Designing a responsive form
Prerequisites
- Access to the File > Form (FO005) menu.
- Previously created responsive form.
Introduction
After creating the table and the responsive form, we can access the designer of the form and start building it.
During this process, we add all the fields that must be completed by the users when they execute the form. Moreover, when designing the form, we can create rules, expressions, variables, and functions in order to manipulate its fields and the data inserted in them.
See how to design a responsive form:
Designing a responsive form
1. Access the File > Form (FO005) menu.
2. Select the previously created responsive form.
3. Click on the arrow next to the
button and select the Form designer option.
4. With the editor screen open, design the responsive form:
• The responsive form designer does not have the Save button, as all changes made during the designing are saved automatically by the system.
• If the use of the responsive form in the off-line application is enabled, some rules, expressions, properties, and components will not be allowed. Check which advanced and integration components can be used:
- Advanced: File, Signature, Advanced list, and Rich text.
- Integration: Attachment.
• If the form has a revision control of the Simplified type enabled, the Accept revision button will be displayed in the editor. Check the article Revising forms for further details.
Configurations available for the elements of the form
After adding each one of the desired components, we can use the Settings panel to edit them.
See the editing options available for each component:
Exhibition
| Panel |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the panel.
• Presentation: choose how the panel will be displayed in the form:
|
| Section |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the section.
• Presentation: choose how the section will be displayed in the form:
|
| Card |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown. • Adjustments: allows visual adjustments in the card.
• Presentation: check the Hidden button so that the card remains hidden until a certain piece of information provided in another field makes it visible through the execution of a rule. |
| Title |
• Title: enter the name that will be displayed as title.
• Height: set the height of the title area.
• Adjustments: allows making visual adjustments in the title.
• Font: in the Font size field, set the size of the title font. And in the Font color field, set the color of the title font. Use the Bold and Italic options to make the title bold and/or italic.
• Presentation: check the Hidden option so that the title stays hidden and is only shown if a rule makes it visible. |
| Image |
• Title: enter a name for the image.
• Height: set the height of the image.
• Image: in the Display field, define whether the image to be displayed will be the default logo, the report logo, or an image. If an image is chosen, use the Select image button to upload the desired image.
• Adjustments: allows making visual adjustments in the field.
• Presentation: check the Hidden option so that the image remains hidden until a certain piece of information provided in another field makes it visible through the execution of a rule.
• Rules: select the rule that will be executed when the image is clicked. |
Basic
| Text |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Placeholder: enter the text that must appear written in the form field. This feature can be used to indicate to the user how this field must be completed.
• Configure mask: allows for configuring a completion mask for the text field. The mask has three configuration types: Free format, Simple mask, and Regular expression. Thus, completion patterns can be defined, such as: phone #, postal code, SSN, license plate, etc. After configuring the mask, click on the Apply button.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or have its focus removed.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
|
Paragraph
|
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Placeholder: enter the text that must appear written in the form field. This feature can be used to indicate to the user how this field must be completed.
• Height: set the height that the paragraph will have.
• Limits: specify the minimum and maximum number of characters allowed in the paragraph.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or have its focus removed.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
| Integer |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Placeholder: enter the text that must appear written in the form field. This feature can be used to indicate to the user how this field must be completed.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or have its focus removed.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table.
Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
| Decimal |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Placeholder: enter the text that must appear written in the form field. This feature can be used to indicate to the user how this field must be completed.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or have its focus removed.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
| Date |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as a change is made to this field.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
| Time |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or have its focus removed.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
|
Checkbox
|
• Title: set a title for the field.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as a change is made to this field.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
|
Option group
|
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as a change is made to this field.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used.
To add options to the group, click on the Edit field button. On the screen that will open, click on Add option and add the options of this group. It is possible to change the display order of the options by dragging them to the intended position. It is also possible to deactivate them by simply disabling the button located next to the field name. |
| Simple list |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as a change is made to this field.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used.
To add options to the list, click on the Edit field button. On the screen that will open, click on Add option and add the options of this list. It is possible to change the display order of the options by dragging them to the intended position. It is also possible to deactivate them by simply disabling the button located next to the field name. |
| Button |
• Title: set a title for the button.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as this button is clicked. |
| Date and time |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as a change is made to this field.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
The Option group and Simple list components allow 20 alternatives only. Therefore, if a greater number of alternatives is needed, use the Advanced list component.
Advanced
| File |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: set the height of the file area.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the file area will be presented.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
| Signature |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: set the height of the signature area.
Signature type: define whether the signature will be a Written signature or an Image of the user's signature, which is recorded on the user data screen. The first option allows for writing within a predefined area, whereas the second option makes it possible to add a signature image from the user data screen and use this image in the form. If an image is used, the user's password/countersign will be requested for the form to be signed.
• Restricted to user: it is possible to restrict signing so that only a certain user can sign, such as the company's CEO. If necessary, select the user who will have permission to sign the form.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the signature area will be presented:
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
| Advanced list |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Table and fields: click on this button to define the table and the field that contains the values that can be selected in this field. Refer to the Creating a list of values in the responsive form article to learn more about how to configure this field.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be presented:
• Rules: select the rule that will be executed as soon as a change is made to this field. |
| Rich text |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Save field in: each form field must be associated with a table field. Select the previously created table field that will be associated with the form field, or use the Add field button to create a new field in the table. Note: If a table field that is being used in another form field is selected, a sequential value will be added at the end of the name of the field that is being used. |
| Table |
• Title: set a title for the table/grid.
• Height: set the height of the table/grid area.
• Table and fields: click on this button to define the table and the fields that will be displayed as table/grid columns. Refer to the How to use tables in the fields of a responsive form article to learn how to configure the field.
• Data source: click on this button to configure an SQL or REST data source in order to import records into the table. This field will only be enabled after the table is defined in the Table and fields button. For further details on grid or data source configuration, refer to the following articles:
• Presentation: define how the table will be presented:
• Rules: select the rule that will be executed as soon as a change is made to this field. |
| Editable table |
• Title: set a title for the table/grid.
• Height: set the height of the table/grid area.
• Table and fields: click on this button to define the table and the fields that will be displayed as table/grid columns. Refer to the How to use tables in responsive form fields article to learn how to configure the field.
• Data source: click on this button to configure an SQL or REST data source in order to import records into the table. This field will only be enabled after the table is defined in the Table and fields button.
• Presentation: define how the table will be presented:
|
| SQL source list |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Data source: click on this button to define the dataset containing the values that can be selected in this field. Refer to the Fetching external data via dataset article to learn how to configure the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as a change is made to this field. |
| REST source list |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Data source: click on this button to define the dataset containing the values that can be selected in this field.
• Adjustments: allows making visual adjustments in the field.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as a change is made to this field. |
Integration
| Attachment |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: define the height of the attachment area. The minimum height for the attachment area is 15.
• Adjustments: allows making visual adjustments in the attachment area.
• Presentation: define how the attachment area will be presented:
|
| Action plan |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: set the height of the action plan area. The minimum height for the action plan area is 15.
• Adjustments: allows making visual adjustments in the action plan area.
• Presentation: define how the action plan area will be presented:
|
| Cause analysis |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: set the height of the cause analysis area. The minimum height for the cause analysis area is 15.
• Adjustments: allows making visual adjustments in the cause analysis area.
• Presentation: define how the cause analysis area will be presented:
|
| Attribute |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: define the height of the attribute area. The minimum height for the attribute area is 15.
• Adjustments: allows making visual adjustments in the attribute area.
• Presentation: define how the attribute area will be presented:
• Process data: enter the ID # of the activity referring to the process related to the attribute. |
| Responsibility route |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: define the height of the responsibility route area. The minimum height for the responsibility route area is 15.
• Adjustments: allows making visual adjustments in the responsibility route area.
• Presentation: define how the responsibility route area will be presented:
• Process data: enter the ID # of the activity referring to the process related to the responsibility route. |
| Checklist |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: define the height of the checklist area. The minimum height for the checklist area is 15.
• Adjustments: allows making visual adjustments in the checklist area.
• Presentation: define how the checklist area will be presented:
• Process data: enter the ID # of the activity referring to the process related to the checklist. |
| Association |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Height: define the height of the association area. The minimum height for the association area is 15.
• Adjustments: allows making visual adjustments in the association area.
• Presentation: define how the association area will be presented:
|
For more information on the function of each component, refer to the Responsive form designer overview article.
Conclusion
With the responsive form fields added, further configurations can be set. Refer to the articles listed below to learn how to make such adjustments:



