Show Form
Displays a specified form and gets the submitted data.
Last updated
Visualyze Documentation
Displays a specified form and gets the submitted data.
Last updated
This activity is designed to display a customized form based on a JSON input and retrieve the entered data upon submission. This documentation will guide you through the process of using this activity effectively.
JSON Definition: String Argument Required
Specifies the JSON file that contains the JSON schema required for generating the form.
The JSON file that contains JSON Schema required for creating the form can be obtained by creating a form manually using the Form Designer, where the user can design the desired form and save the form as a JSON file.
Additionally, you can specify variables during form designing to populate fields when the form is loaded. Variable placeholders in the default value section can be specified as '${variable_name}'.
Submitted Data: String Variable Required
Specifies the variable that stores the submitted data as a JSON string.
The Form Designer helps the user in creating new form designs by using the drag and drop feature provided by the designer. The users can design new forms using Form Designer that can be used in attended as well as unattended automation processes.
We can launch the Form Designer from the Assistant Tab in the Ribbon Window at the top portion of the studio.
Each of the available components in the Form Designer enables user interaction providing easier data collection. These components are categorized based on their functionality as follows:
Basic | This category contains the most commonly used form fields | Text Field Text Area Number Password Checkbox Select Select Box Radio Button |
Advanced | This category contains fields that accept personal or date-time period data | Url PhoneNumber Tags Address Date/Time Day Time Currency Survey Signature |
Layout | This category contains elements that modify the form layout | HTML Element Content Columns Field Set Panel Table Tabs Well |
Data | This category contains grids and containers that are used for retrieving data | Hidden Container Data Map Data Grid Edit Grid Tree |
When a Form Component is selected, a configuration window will appear, offering several tabs to customize the component based on its unique functionalities.
The following table describes the settings available for each of the form components in the window tab that is opened when the components are drag and dropped.
| Tab | Description |
|---|---|
Display | We can specify the way in which the Form Component is to be displayed in the designer |
Data | We can specify a default value that should appear in the text field |
Validation | We can specify the validation requirements for trigger other components |
API | In this tab, we can configure the form component's name that we want to use in the workflow. |
Conditional | Specifies the properties for the API that is generated for the form |
Logic | We can specify a particular logic that can be used to trigger some specific conditions |
Layout | We can specify some Html attributes for the component's input element |
The Form Designer ribbon provides the following options:
Save - Saves or exports the form that you have designed as a file(template) that can be reused for any other automation process.
Load - Enables you to load an existing form template and appends them to the current form design.
Preview - Displays the designed form at runtime in a new window.
We can reopen the configuration window by hovering over to the specific form component that you want to modify and click the Edit option.
We can rearrange the form components in the current design, by clicking on the Move option and then drag the specific form component to the desired location inside the form.
We can edit the form component by clicking on the Edit JSON option**,** which then opens the component JSON, which in turn displays all the available settings for that particular component.
We can also copy a specific component that is inside the form by clicking on the Copy option and then click on the Paste below option to paste on the same or a different component in the form.
