All Collections
User Guides
Create a Manual Input widget
Create a Manual Input widget

Send values or context data to an Ubidots variable directly from your dashboard.

Isabel Lopez avatar
Written by Isabel Lopez
Updated over a week ago

Dashboards can act not only as a monitoring tool, but also as an actual UI to interact with the operation itself. Part of that interaction involves manually entering data based on operational events, setting points at the device level, modifying calculation parameters, or simply leaving a comment about a specific behavior. For such cases, the Manual Input widget exists.

This tutorial explains how to create a Manual Input widget to enter data to a device property, a variable value or even variable context.

Requirements

1. Create a Manual Input widget

The Manual Input is a widget capable of sending values with or without context to a variable or properties to a device. This functionality is useful as a UI to enable users to insert custom data.

a. Send a value to a variable:

Step 1: While in a dashboard, click on the "+" button at the upper right corner.
Step 2: Select the Manual Input widget option.

Step 3: Optionally, enable the "Send user information" option to identify the user who operated the Manual Input widget by logging the user's information in the context of the variable, like this:

"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Step 4: Click on "+ add input" button and select the "variable" option.

Step 5: Add the variable to which the data will be sent to.

Step 6: Click on the input's header to expand the remaining parameters. Fill them according to your needs:

  • Name the input.

  • Define the minimum and maximum values that should be allowed.

  • Step: Minimal allowed increment. For example, if you'd like to input decimal numbers, you can define the step as "0.01".

Step 7 (optional): By clicking on the "+ add input" button again, select "data/time picker" to have the option of sending the value in a specific timestamp.

In the appearance section of the widget's configuration:
Step 8: Make sure all available fields are correct:
Name your Manual Input widget.
– Enter a custom button label if desired
– Choose a font family.
– If any, enter a Custom Style for your widget.

b. Send a value with timestamp:

Step 1: While in a dashboard, click on the "+" button at the upper right corner.
Step 2: Select the Manual Input widget option.

Step 3: Optionally, enable the "Send user information" option to identify the user who operated the Manual Input widget by logging the user's information in the context of the variable, like this:

"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Step 4: Click on "+ add input" button and select the "variable" option.

Step 5: Add the variable to which the data will be sent to.

Step 6: Click on the input's header to expand the remaining parameters. Fill them according to your needs:

  • Name the input.

  • Define the minimum and maximum values that should be allowed.

  • Step: Minimal allowed increment. For example, if you'd like to input decimal numbers, you can define the step as "0.01".

Step 7: By clicking on the "+ add input" button again, select "data/time picker" to have the option of sending the value in a specific timestamp. Click on the "data/time picker" input to expand its parameters and configure them according to your needs:

  • Style: Date and time or date only.

  • Name this input.

c. Send context to a variable:

Step 1: While in a dashboard, click on the "+" button at the upper right corner.
Step 2: Select the Manual Input widget option.

Step 3: Optionally, enable the "Send user information" option to identify the user who operated the Manual Input widget by logging the user's information in the context of the variable, like this:

"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Step 4: Click on "+ add input" button and select the "context" option.

Step 5: Add the variable to which the context will be sent to.

Step 6: Click on the input's header to expand the remaining parameters. Fill them according to your needs:

  • Name the input.

  • Insert the context key.

Step 7 (optional): By clicking on the "+ add input" button again, select "data/time picker" to have the option of sending the context in a specific timestamp.

In the appearance section of the widget's configuration:

Step 8: Make sure all available fields are correct:
Name your Manual Input widget.
– Enter the button label.
– Choose a font family.
– If any, enter a Custom Style for your widget.

d. Set a device property:

Step 1: While in a dashboard, click on the "+" button at the upper right corner.
Step 2: Select the Manual Input widget option.

Step 3: Optionally, enable the "Send user information" option to identify the user who operated the Manual Input widget by logging the user's information in the context of the variable, like this:

"context": { "_action_user": { "username": <userName> "id": <user_id> } }
Step 4: Click on "+ add input" button and select the "device" option.

Step 5: Add the device where the property will be created.

Step 6: Click on the input's header to expand the remaining parameters. Fill them according to your needs:

  • Name the input.

  • Insert the property key.

Step 7 (optional): By clicking on the "+ add input" button again, select "data/time picker" to have the option of sending the property in a specific timestamp.

In the appearance section of the widget's configuration:
Step 8: Make sure all available fields are correct:
Name your Manual Input widget.
– Enter the button label.
– Choose a font family.
– If any, enter a Custom Style for your widget.

Did this answer your question?