view_widget.xml

This page lists all of the available tags within the view_widget.xml file and how to access them from within the widget

As described before, this file allows the developer to create a form so that it can be displayed as a GUI at the moment of creating the Widget on a dashboard.

The contents of this file are Ubidots-mapped XML-like tags to React elements, so it actually differs from the traditional XML supported tags. Also, view.xml and view_widget.xml are implemented differently, so their supported tags are different.

Please check our Custom UI documentation in order to know the available elements and how to use them:

pageCustom UI

'Add Variables' feature.

Ubidots native widgets offer the capability to select the target variables for the widget:

This can be achieved also while developing a Widget-plugin using the addvariable tag within the view_widget.xml file. For example, in order to replicate the Metric widget's UI shown above, you can use the following view_widget.xml:

<form>
    <addvariable
        id="variables"
        maxvariables="1"
        dividername="ADD VARIABLES"
    >
        <variablelabel
            label="Variable label"
            description=""
        />

        <inputcombo
            type='dropdown.list'
            id='aggregationMethod'
            label="Aggregation method"
            description=""
            placeholder='Last value'
        >
            <menu>
                <item id='last_value'>Last value</item>
                <item id='average'>Average</item>
                <item id='minimum'>Minumum</item>
                <item id='maximum'>Maximum</item>
                <item id='sum'>Sum</item>
                <item id='count'>Count</item>
            </menu>
        </inputcombo>

        <inputcombo
            type="span"
            id="span-selector"
            label="Span"
            description=""
        />

    </addvariable>
</form>

Note that within the addvariable tag, you can use any of the elements described in the Custom UI documentation.

addvariable tag

This element is interpreted such that it displays the whole drawer for adding variables. The following are its attributes:

Attribute	Mandatory	Description
id	Yes	Unique identifier used internally. Don't modify its default value.
maxvariables	Yes	Max number of variables that can be added.
dividername	Yes	Unique identifier used internally. Don't modify its default value.

variablelabel tag

This element displays a label and a description within a container in order to provide detailed information.

Attribute	Mandatory	Description
label	Yes	Message displayed when selecting a variable.
description	No	Message displayed below the label message

With this in mind, if you changed the label attribute from Variable label to Variables , such message will be displayed instead.

Adding variables' Aggregation methods.

If your Plugin-widget requires information about the variable's aggregation method, you can use a inputcombo of the dropdown.list type as shown above, however, for it to work correctly, it is mandatory that the id attribute has the value aggregationMethod

Adding variable's time-span

If your Plugin-widget requires a time span for the variable's data, you can use a inputcombo of the span type as shown above, however, for it to work correctly, it is mandatory that the id attribute has the value span

Accessing the view_widget.xml elements from within the Widget's Javascript script

The view_widget.xml elements can be accessed from within the widget.js script using the input combo id attribute.

For example, suppose your Widget is implementing the following view_widget.xml file:

<form>

    <inputcombo 
        id="device_label" 
        type="text" 
        label="Device label" 
        description="Device's label to which send the data" 
        placeholder="" 
    />
    <inputcombo 
        id="title" 
        type="text" 
        label="Chart's title" 
        description="Chart's title" 
        placeholder="" 
    />

    <addvariable
        id="variables"
        maxvariables="1"
        dividername="ADD VARIABLES"
    >
        <variablelabel
            label="Variable label"
            description=""
        />

        <inputcombo
            type='dropdown.list'
            id='aggregation_method'
            label="Agregation method"
            description=""
            placeholder='Last value'
        >
            <menu>
                <item id='last_value'>Last value</item>
                <item id='average'>Average</item>
                <item id='minimum'>Minumum</item>
                <item id='maximum'>Maximum</item>
                <item id='sum'>Sum</item>
                <item id='count'>Count</item>
            </menu>
        </inputcombo>

        <inputcombo
            type="span"
            id="span-selector"
            label="Span"
            description=""
        />
    </addvariable>
</form>

You can access all of these data as follows:

const settings = ubidots.getWidget().getSettings()["xmlSettings"];

Then, the settings object will be something like:

{
   "title":"my chart",
   "variables":[
      {
         "span":"inherit",
         "color":{
            "a":1,
            "b":62,
            "g":131,
            "r":131
         },
         "label":"variable-cron",
         "variableColor":{
            "a":1,
            "b":62,
            "g":131,
            "r":131
         },
         "aggregationMethod":"last_value"
      }
   ],
   "device_label":"my device",
   "widgetBehavior":"inherit"
}

This object contains on the root level, all the keys corresponding to each of the view_widget.xml element's id.

For example note that above, it was used two input combo whose ids are device_label and tittle correspondingly, also note that those keys are within the settings object. Also note variables key, this is always a list containing the selected variables.