This article will demonstrate how to create a Keypad Widget using the TagoIO Node.js SDK.

In order for you to create keypad widgets, this is the structure that you will need to send to the account.dashboards.widgets.create method.

{
  "analysis_run": "",
  "data": [
    {
      "bucket": "5d8d06027fe011b001b8d236b",
      "origin": "5d8d06027fe011b001b8d236a",
      "timezone": "Your/Timezone",
      "variables": [
        "my_keypad_variable"
      ]
    }
  ],
  "display": {
    "buttons": [
      {
        "color": "",
        "disabled": false,
        "icon": "",
        "text": "",
        "type": "text",
        "value": ""
      },
    ],
    "bypass_bucket": false,
    "click_color": "#337ab7",
    "help": "",
    "main_color": "white",
    "send_run_user": false,
    "show_asterisk": true,
    "show_digits_bar": true,
    "show_last_column": true,
    "show_last_row": false,
    "show_number_sign": true
  },
  "label": "Keypad #1",
  "type": "keypad"
}

• analysis_run: This field should contain an ID indicating which analysis to run when a user submits the widget.
• data: This field should contain an array of variables used in the keypad widget. By default, the widget only uses the first variable, so this array should only contain an array with a single object.
• display.buttons: This field is required, and it composes all the custom buttons inside of the keypad widget. Below we have a demonstration of how each button in the array gets positioned inside of the keypad widget.Each of these numbers represents the index of the object inside of the button array. This will always be the position of the buttons, even if one of the buttons ends up getting hidden due to the widget's configuration.
• display.bypass_bucket: If set to true, the data sent by this widget will never reach the bucket. It will still be available inside the analysis scope.
• display.click_color: This is the color shown for each digit when a user clicks on it. The color can be any type of color identified by major browsers, for example a color name (orange, red, blue), or hsl, or hex, or even rgb.
• display.help: Usual help for the widget.
• display.main_color: Main color for the digits inside of the keypad. The color can be any type of color identified by major browsers, for example a color name (orange, red, blue), or hsl, or hex, or even rgb.
• display.send_run_user: Indicates if a new variable called 'run_user' should be sent along with the usual data from this widget. Read more about data manipulation at the bottom of the page.
• display.show_asterisk: Indicates if the asterisk digit should appear inside of the keypad. If this is set to false, a new slot for custom buttons will appear.
• display.show_number_sign: Indicates if the number sign digit should appear inside of the keypad. If this is set to false, a new slot for custom buttons will appear.
• display.show_digits_bar: Indicates if a digits bar should appear above the widget. A digits bar will show asterisks representing the amount of digits typed by the user.
• display.show_last_column: Indicates if the last column of the buttons should appear or not.
• display.show_last_row: Indicates if the bottom row containing buttons should appear or not.
• label: The title of the widget inside of the dashboard.