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.
• It is not possible to enable the use of a responsive form on the off-line app if it has an advanced list configured with components that are not allowed, namely: File, Signature, Option group, and/or Simple list,
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. • 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. • 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: use the Background color field to set a color to fill in the card. Check the Hide border option if you do not need to show the card border. • 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: in the Alignment field, set the alignment of the title text. In the Background color field, set the background color of the title area.
• 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: in the Alignment field, set the alignment of the image.
• 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.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or has 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.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or has 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.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or has 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.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or has 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.
• 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.
• 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.
• Presentation: define how the field will be displayed.
• Rules: set the rules that will be executed when the field is focused and/or has 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.
• 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.
• Configure options: click on this button to define the options that will be displayed in the group. 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.
• 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. |
Simple list |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• Configure options: click on this button to define the options that will be shown on the list. 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.
• 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. |
Button |
• Title: set a title for the button.
• Presentation: define how the field will be displayed.
• Rules: select the rule that will be executed as soon as this button is clicked. |
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.
• 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.
• 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.
• 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. |
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: 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. |
Data 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 data source and the dataset that contains 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. |
Rich text |
• Title: enter the name that will be displayed as title. Check the Hide title option so that it is not shown.
• 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. |
Integration
Attachment | Although this component is displayed in the form designer, it cannot be used in a responsive form. |
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.
• 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.
• Presentation: define how the cause analysis 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: