Hello, how can we help you?

Recent Searches: How to configure a grid in a form - How to use a REST Web Service data source - How to use a Web Service data source - How to use a ComboBox data source

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:

  • Hidden: the panel will stay hidden and will be displayed only if a rule makes is visible.
  • Collapsible: the panel will have the option of being collapsed while the form is filled out.
  • Collapsed by default: the panel will be displayed collapsed at first, and the user will be able to expand and collapse it as needed when filling out 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:

  • Hidden: the section will stay hidden and will be displayed only if a rule makes it visible.
  • Collapsible: the section will have the option of being collapsed while the form is filled out.
  • Collapsed by default: the section will be displayed collapsed at first, and the user will be able to expand and collapse it as needed when filling out 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.  
In the Size field, define whether the image will be displayed in its real size, proportionally, or extended. It is worth remembering that the size of the image area is composed of the height set in the Height field and of the Width set during the designing of the form.

 

• 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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will stay disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• Rules: set the rules that will be executed when the field is focused and/or has its focus removed.

  • Focus: select the rule that will be executed after this field is focused.
  • Remove focus: select the rule that will be executed after this field 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• Rules: set the rules that will be executed when the field is focused and/or has its focus removed.

  • Focus: select the rule that will be executed after this field is focused.
  • Remove focus: select the rule that will be executed after this field 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• Rules: set the rules that will be executed when the field is focused and/or has its focus removed.

  • Focus: select the rule that will be executed after this field is focused.
  • Remove focus: select the rule that will be executed after this field 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• Rules: set the rules that will be executed when the field is focused and/or has its focus removed.

  • Focus: select the rule that will be executed after this field is focused.
  • Remove focus: select the rule that will be executed after this field 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• Rules: set the rules that will be executed when the field is focused and/or has its focus removed.

  • Focus: select the rule that will be executed after this field is focused.
  • Remove focus: select the rule that will be executed after this field 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

Checkbox

 

• Title: set a title for the field.

 

• Presentation: define how the field will be displayed.

  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

Button

• Title: set a title for the button.

 

• Presentation: define how the field will be displayed.

  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• 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.

  • Required: inserting a file in this field will be mandatory.
  • Disabled: the file area will remain disabled (file cannot be added) until a rule enables this field.
  • Hidden: the file area will not be shown until a rule makes the field visible.  
     

• 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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:

  • User's name: the name of the user who will sign the form will be shown.
  • User's reg. code #: the ID of the user who will sign will be shown.
  • Required: signing the form will be mandatory.
  • Disabled: the signature area will remain disabled (form cannot be signed) until a rule enables this field.
  • Hidden: the signature area will not be displayed until a rule makes the field visible.  
     

• 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

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:

  • Required: completing this field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• 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:

  • Disabled: the table will remain disabled (cannot be filled out) until a rule enables it.
  • Hidden: the table will not be displayed until a rule makes it visible.  
     

• 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.

  • Required: completing the field will be mandatory.
  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.  
     

• 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.

  • Disabled: the field will remain disabled (cannot be completed) until a rule enables it.
  • Hidden: the field will not be displayed until a rule makes it visible.

 

• 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.  
Note1: If the Automatically create the field in the table by dragging a component onto the form option is enabled in the Preferences, the table fields will be created automatically, and it will be possible to use the Edit field button to change them.

 
 

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:

  • Disabled: the action plan area will remain disabled (plans cannot be added or associated) until a rule enables it.
  • Hidden: the action plan area will not be displayed until a rule makes it visible.
  • Collapsible: the action plan area will have the option of being collapsed while the form is filled out.
  • Collapsed by default: the action plan area will be displayed collapsed at first, and the user will be able to expand and collapse it as needed when filling out the form.
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:

  • Disabled: the cause analysis area will remain disabled (analyses cannot be added or associated) until a rule enables it.
  • Hidden: the cause analysis area will not be displayed until a rule makes it visible.
  • Collapsible: the cause analysis area will have the option of being collapsed while the form is filled out.
  • Collapsed by default: the cause analysis area will be displayed collapsed at first, and the user will be able to expand and collapse it as needed when filling out the form.
 
 

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:


Was this article helpful?