Skip to main content

Input Button Widget

Widget Type: rc-input-button

Input Button

A button paired with one or more labelled text inputs. When pressed, the widget calls a service and merges the input values into the request payload, keyed by each input's payloadKey.

Configuration​

service Service path to call when the button is pressed.

label (optional) Button label. Defaults to Submit.

icon (optional) Icon to show on the button. Any icon name supported by the widget icon component.

buttonType (optional) primary, panic, default, outlined, yellow, or grey. Defaults to primary.

layout (optional) horizontal (default) or vertical. Controls whether the button sits beside or above/below the inputs.

buttonPosition (optional) Where to place the button relative to the inputs. In horizontal layout: left (default) or right. In vertical layout: bottom (default) or top.

inputs Array of input descriptors. The button payload is the merge of payload (if set) and an object built from each input's current value keyed by payloadKey.

payload (optional) JSON-encoded string representing the base payload sent with the service call. Input values override matching keys.

timeoutMs (optional) Maximum time to wait for the service call to acknowledge. Defaults to 5000.

Input descriptor props​

payloadKey Required. The key the input's value is sent under. Also shown as the input's label.

placeholder (optional) Placeholder text. Defaults to Enter value.

defaultValueExpression (optional) A stringified JavaScript function (queryParams) => value that produces the input's initial value from the dashboard URL query parameters. Arrays are joined with commas; use .join() in the expression to control the separator.

Example​

{
  "service": "/robot/command",
  "label": "Send",
  "icon": "send",
  "buttonType": "primary",
  "inputs": [
    {
      "payloadKey": "target",
      "placeholder": "e.g. tank-A"
    },
    {
      "payloadKey": "reason",
      "placeholder": "Why are you dispatching?"
    }
  ],
  "timeoutMs": 5000
}

Example with default value from URL query parameter​

When the dashboard URL has ?ticket-id=abc, the input is pre-filled with abc.

{
  "service": "/robot/command",
  "label": "Send",
  "inputs": [
    {
      "payloadKey": "id",
      "defaultValueExpression": "(q) => q['ticket-id']"
    }
  ]
}

Example with vertical layout and base payload​

{
  "service": "/robot/dispatch",
  "label": "Dispatch",
  "layout": "vertical",
  "buttonPosition": "bottom",
  "payload": "{\"source\":\"dashboard\"}",
  "inputs": [
    {
      "payloadKey": "target",
      "placeholder": "e.g. tank-A"
    },
    {
      "payloadKey": "priority",
      "placeholder": "low / med / high"
    }
  ]
}