Open topic with navigation

Open topic with navigation

Form Input

Form input components allow you to design forms and enter data in them.

Designing Input Components

Solution Builder is based on HTML5 components. To learn more about the behavior of each component type, consult a HTML5 reference like this one. Solution Builder includes the following form input components:

• Text Input
• Text Area
• Password Input
• Date Input
• Color Input
• Number Input
• Range Input
• File Input
• List Input

For a detailed reference of properties that affect input components, see Common Properties and Input Component Properties.

Add a Form Input Component

To add a form input component, select Insert > Form and the component Type.

Note: Styling Form Input Components

Solution Builder allows you to style form input components using properties. However, some visual aspects of certain input components depend on the user's browser and operating system (OS). For example, the appearance of the drop-down menu in the list input component, and that of the slider and track in the range input component, depend in part on your browser and OS. It's possible to create custom widgets that are less dependent on these factors.

Use Form Input to Change Data Metrics

To use form input to change data metrics, use a Data action.To create a text input component that commits its contents to the olldata, take the fowing actions:Insert the input component be selecting Insert > Form > Text Input.

1. In the Actions panel, click the Add Action + icon, then select Data Action.
2. In the Data and Metrics panels, navigate to the data metric that you want to change.
3. Right-click the data metric to display a list of command types.
4. In the Actions panel, drag the relevant command type name from the list to "drag data action here".
5. Bind the text input component's value to the Data Action's Value property:
1. In the Outline, select the text input component.
2. In the Property Inspector, hover over the Value property until a blue dot appears.
3. Click the blue dot and select Bind. A binding pop-up appears.
4. Open the Actions panel.
5. Hover over the value in the pop-up until a blue dot appears, the drag the dot to the Value property.
6. Add a key press as the trigger for the action:
1. In the Outline, next to the Input component, click Dataflow.
2. Expand Logic, then add a Keyboard Event block to the Dataflow window.
3. After you have selected the Text Input component, click Advanced properties tab, then find the onKeyDown property.
4. Bind the onKeyDown property to the Input property of the Keyboard Event block.



5. For the filter property of the block, press Enter.
6. Link the output property of the Keyboard Event block to the input property of the Invoke Action block.
 

When you press Enter at runtime, the data action executes using the contents of the component as the value.

Save Input as Value

To save your input as the component's value, you can use a Local Storage dataflow block.

1. Insert the Input component by selecting Insert > Form > Text Input.
2. In the Outline, right-click the Text Input component and select Dataflow.
3. Expand Browser API and add a Local Storage block to the Dataflow window.
4. For the key property of the Local Storage block, enter an identifying name, such as inputValue.
5. Bind the value property of the Text Input component and the value property of the Local Storage block to each other.

When you press Enter at runtime, Solution Builder saves the value as the value of the Input component.

 

Input Component Properties

These properties affect Input components. For a guide to Input components, see Form Input > Designing Input Components.

Note: Inputs are also affected by Common Properties.

Text Input properties	Number Input Properties	File Input properties
Date Input properties	Range Input properties	List Input properties

Return to Atrius Developer Portal Home Page