Interactive Controls Overview
You will collect data from your audience and interact with them via interactive controls.
The way they look is determined by the Style applied to the app.
|
|
Furthermore, each control you add to your app has various properties you can set.
The most important properties for interactive controls are:
- Label to display - what will be shown on-screen
- Data field - the variable holding the data for this control, which you will use in calculations
- Description (A longer description to display) - stores additional information about the element
- Tooltip - specify a tooltip when the cursor hover over an element
- Default/initial value - will be shown at runtime - a static or calculated value. If "Set to default on load" is set, then the control will always initialize to that value - e.g. empty or some content. By default, controls will maintain their previously entered value.
- Masked - if you don't want to show the entry data on screen, e.g. passwords
- Clearable - adds an x so it's easy to clear on mobile devices
- Dense - removes padding to make the controls closer to each other
- Validation - required, as well as other validation logic where applicable
If the control area has a blue dotted border around it, it means that it may accept variables that will be replaced with some value at runtime. For example, we could write ${V.location} below for "Label to display", which may be replaced at runtime with text in different languages etc.
An application combines these interactive controls, which can be divided into two categories:
- Output - displaying information such as text, pictures, PDF files, etc.
- Input - collecting information from your users
Output elements include:
- Text label - display text information.
- Text output - multi-line formatted text output.
- PDF - output of PDF files
- Table - shows information as a table
- Media - output of pictures or video
- Line, Separator - separating element
- Grid - markup element
- Embed - output of external resources
Input elements include:
- Text Input, Num Input, Date, Time, Email, Name, Address, Phone - input fields for text, numeric and other information
- Paragraph - multi-line text input
- Link/Button - allows to specify a link to go to an external source, or to a step within the application
- Checkboxes, Radio Buttons - group of controls
- Dropdown - drop-down list of values
- File Upload - allows the user to upload a local file
- Slider, Rating - graphical representation of a number value