Ubidots provides different table widgets to visualize your data and one of the most versatile is the Values Table widget, which allows users not only to display numerical data but also texts, dates, URLs, and images. Also, the Values Table allows for additional things such as editing values directly from the Widget.
Requirements
Active Ubidots account with available data.
Table of Contents
1. Create a Values Table widget
Values tables provide a list of the most recent recorded readings for one or more variables. Please follow these steps to create a Values Table widget:
In a Dashboard, click on the “+” button at the top right corner.
Select the Values Table widget.
Note: if the Dashboard is dynamic, you can select if the widget's behavior is static (as if the dashboard were a Static Dashboard) or if it’s dynamic.
3. At this point, you can add multiple ‘date’, ‘value’, or ‘context’ columns in any order that you need:
Date column:
The date column shows the dates of the values. To add a date column:
Click on the Date option when adding a column.
Set a column name.
Select a date format, or leave it to be “Set by Dashboard”.
Select the desired color for the dates.
5. If wanted, pick an action for single click and/or double click on the dates, then set the action accordingly.
Go to device: It takes you to the device view in a new tab, showing the device to which the variable in question belongs.
Go to dashboard: Opens a new tab with the dashboard specified by the user.
Go to URL: Opens a new tab with the specified URL.
Go to variable: It takes you to the variable view in a new tab, showing the variable in question.
6. Pick and adjust the font, its size, and its alignment.
7. Set the minimum column width, or leave it in ‘auto’ so that it automatically uses a size so that all other columns may also fit.
Value column:
The value column shows the variable's values received within the span selected in the widget. Adding a value column has quite similar options to when adding a date column, except that instead of setting up the date, here the setup is oriented towards which variable to show the data from and how the data is shown.
After clicking on ‘value’ when adding a column, select the device and variable from which the values will be retrieved.
Note: For static dashboards, the widget will always show the data for the selected variable. For dynamic dashboards, the widget will show the data for the variable with the same label but for the dashboard’s selected device.
2. Set a column name.
3. Select an aggregation method (last value, average, minimum, maximum, sum, count).
If the aggregation method is different from ‘last value’, then also select the sample period.
Select a span for the data, or leave it to be “Set by Dashboard”.
4. Select the desired color behavior for the values.
Set by widget: you can set any color for the values.
Color logic: the color of the values will depend on the range of the value.
5. If wanted, pick an action for single click and/or double click on the values, then set the action accordingly. These actions are the same as in the date column.
6. Enable or disable “allow edition”. This option determines if the values for the variable can be edited directly in the widget.
7. Pick and adjust the font, its size, and its alignment.
8. Set the minimum column width, or leave it in auto so that it automatically uses a size so that all other columns may also fit.
2. Create a Values Table widget containing context data
To enhance the appearance of your tables and customize the visualization you need for your clients, you can use context to store URLs, images, dates, and text (see table below). To add a context column:
After clicking on ‘context’ when adding a column, select the device and variable that will provide or receive the context, similar to how it’s done for a values column.
Decide whether values can be added manually or not by switching the "allow new rows" toggle button.
Enter a name for the column.
Set the context key from which the data will be extracted or where it will be sent to.
Select the type of context that will be shown.
Context type | Description | Payload example |
Single line text | Displays the text on a single line. If it’s longer than the width of the column, an ellipsis (...) will appear at the end. |
|
Long text | Displays the text on a single line. If it’s longer than the width of the column, it will be displayed in several lines. |
|
Number | Displays a number with the specified decimals, color, and units. |
|
Date | Displays a date in the specified format. |
|
URL | Turns the content into a hyperlink that opens in a new window. |
|
Image | Display a JPG, PNG, BMP, TIF, or GIF file, using the image link as a source. A maximum image size of 256 x 256px can be rendered. |
|
List | Displays a user-defined list of items that can be posted onto the table.
Note: This option only works when the “allow editing” toggle button is turned on. | Although there’s no payload involved in this type of context, the list is constructed by entering all the items as a comma-separated text:
For example: Resolved, Pending, Alert, Unknown |
6. Select the desired color for the context fields when they are not images or URLs.
7. If wanted, pick an action for single click and/or double click on the values, then set the action accordingly. These actions are the same as in the date column.
8. Enable or disable “allow editing”. This option determines if the context for the variable values can be edited directly in the widget. Only when this option is enabled, the “list” context type works.
9. Pick and adjust the font, its size, and its alignment.
10. Set the minimum column width, or leave it in ‘auto’ so that it automatically uses a responsive size so that all other columns may also fit.
After having set the columns for the date, values and for context, you can now save and view your Values Table widget.
3. Edit existing values
Value and context columns allow their values to be edited. To do this, simply make sure that the “allow editing” option on the column settings is enabled.
Then, on the widget click on the edit icon at the end of every row to enable editing for the values and/or context.
Once you have edited the values, you can click on the check mark to save them.
4. Add new rows manually
You can manually add any number of values into existing columns of your Values Table. To do this, simply follow these steps:
Enable the "Allow new rows" option, located at the top of the settings.
Click on the "save" button.
Start adding new values by inputting them in the fields that have now appeared below the column names.
To save the values in the table, click on the floppy disk icon. On the other hand, to clear the fields just click on the trash can icon.
Note: if an aggregation method different than "last value" is selected in the settings of a value column, the "allow new rows" option will become disabled.
5. Advanced appearance section
To reflect your application’s branding, you may further customize your widget’s appearance by changing the following values:
Decimal points: set the amount of decimals for numerical values.
Borders: select the border behavior for the cells in the Values Table widget.
Border width: set the thickness or width of the cell borders.
Freeze first column and header: enable these two options to fix the first column and/or header in place when you move across your Values Table horizontally or vertically.
Values per page: set the maximum amount of values that will be shown per each Values Table page.
Background color: pick a background color for the Values Table.
Column name color: pick a color for the names of your columns.
Alternating row colors: pick one or two colors to alternate between rows. Note that, by default, the transparency (or opacity) of these colors is set to 0 so as not to interfere with the widget's background color.
Background image: either upload an image from your computer or paste the URL of one to be displayed in the background of your widget.
Custom style: further configure the appearance behavior of the widget. For more information on this functionality, please view this article.
