Creating Keypad Widgets

Creating Keypad Widgets

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.

    • Related Articles

    • Keypad Widget

      Keypad allows the user to submit a pin code along with an optional action string. This widget is ideal to represent an alarm or to request a PIN code to unlock a resource. Creating your own To add it to your dashboard, choose the Keypad widget from ...
    • Keypad Visualization

      The numeric keypad contains 10 digits that range from 0-9, it also contains an asterisk (*) and a number sign (#). You have the option to customize the content of the keypad by creating buttons that will appear along with the digits. In the ...
    • Creating Dashboard Tabs

      By using Tabs, you can divide dashboards into multiple sections and add links to them. This is a great feature to create applications where the user has to deal with some setups and data in the same dashboard, the result is something like the image ...
    • Widgets Overview

      Dashboards are composed by widgets that can display and collect data from users. TagoIO provides a variety of widgets to handle your data in real time. The available options cover from simple dials to tables, maps, videos, and even forms that you can ...
    • Creating Analysis

      Creating your own analysis is easy. First, click on Analysis on the sidebar, then click the + Add Analysis button in the upper right of the analysis main screen. Just write a name and you’re ready to go! 1. Name What you usually use to identify your ...

    Webinar Announcement - Image Only

        Take a look at our updated roadmap here!
          What would you like to see on TagoIO?

            Future and past Webinars