Overview
The form widgets are widgets that allow the user to push data into your dataflow directly from the dashboard he is looking at. Multiple inputs exists:
- Text
- Autocomplete
Those data are sent using a submit widget.
Link a dashboard to the DataFlow Manager
To work, forms widgets needs the dashboard to be linked to a brainstudio out node. In order to configure this you first have to add and deploy a brainstudio out node in the dataflow and drag and drop a first forms in widget in your dashboard. This will enable the configuration of a forms.
Text widget
The Text widget is designed to facilitate the creation of interactive forms by adding text input fields.
Configuration
1. Source
The Source configuration determines the data origin for the widget. It can be set to either:
Manual: Data inputted by the user.
IoT: Data retrieved from the Dataflow Manager (DFM) using the node name (Brainstudio).
2. Main Settings
The Main Settings configuration includes the following options:
Name (mandatory for IoT): Unique identifier, required for payload mapping in IoT scenarios.
Label: User-friendly label for the text input field.
Default Value (optional): Pre-filled content for the text input.
State: Four available states - Default, Disabled, Hidden, Read-only.
For IoT sources, an additional setting is available:
Payload Key: Key for payload extraction from the IoT source.
3. Personalize the card
Customize Card allows users to personalize the appearance of the widget by specifying:
Title: Title displayed on the widget card.
Description: Brief description providing context for the widget.
4. Appearance
The Aspect configuration focuses on the aesthetic aspects of the widget, offering options to enhance visual appeal and alignment with the overall app design.
5. Validation
Validation settings enable users to define whether the widget must be filled out for form submission.
Usage
1- Drag and Drop:
Drag the Text widget from the toolbox and drop it onto the desired location in the app interface.
2- Configuration:
Access the widget settings to configure the Source, Main Settings, Customize Card, Aspect, and Validation based on your application requirements.
3- IoT Integration:
If using IoT as the data source, ensure to specify the IoT node name (Brainstudio) for seamless integration.
4- Save and Preview:
Save your configurations and preview the app to see the Text widget in action.
Autocomplete
The Autocomplete widget simplifies the creation of interactive forms by providing a dropdown list. This widget is highly configurable and supports both manual and IoT data sources. Users can customize the widget's appearance, including its title and description, as well as apply aesthetic adjustments.
Configuration
1. Source
The Source configuration determines the data origin for the widget. It can be set to either:
Manual: Data inputted by the user.
IoT: Data retrieved from the Dataflow Manager (DFM) using the node name (Brainstudio).
If the source is IoT, presume the subject, which is the name of the Brainstudio node on the DFM
2. Main Settings
The Main Settings configuration includes the following options:
Name (mandatory): Unique identifier, required for payload mapping in IoT scenarios.
Label (widget title): Title for the widget.
State: Three available states: Default, Disabled, Hidden.
3. Data Source
Specify the payload key in case you chose IoT as a source. The input format for the datasource should correspond to following template :
[
{
"id": 1,
"label": "one",
"value": "one"
},
{
"id": 2,
"label": "two",
"value": "two"
}
]
4. Personalize the card
Customize Card allows users to personalize the appearance of the widget by specifying:
Title: Title displayed on the widget card.
Description: Brief description providing context for the widget.
5. Appearance
The Aspect configuration focuses on the aesthetic aspects of the widget, offering options to enhance visual appeal and alignment with the overall app design.
6. Validation
Validation settings enable users to define whether the widget must be filled out for form submission.