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

Responsive form designer overview

 

Prerequisites

  • Access to the File > Form (FO005) menu.
  • Previously created responsive form.

 

Introduction

SoftExpert Form provides a table with all the tools necessary for creating a responsive form.

The responsive form editor or designer allows for building forms with a responsive interface, meaning that it self-adjusts to the screen size on which the form is being filled out (desktop computer or mobile devices). 

Additionally, with the responsive form designer, rules can be created more intuitively and there is no need to use the formula editor. On the screen, it is possible to insert all the fields that must be completed by the user, as well as to configure rules, variables, expressions, and functions.

Watch the video to understand how the form designer screen is divided:

The Enable form to be used in the off-line application allows the responsive form to be filled out off-line on the SoftExpert Workflow application. 

Once the configuration is saved, the system will issue a notification in the case of any inconsistencies in the form and will change the designer for it to display only what is allowed on the application, making for a simpler designing.

A form that has this option enabled must be associated with a process enabled for off-line use as well. Thus, the user will be able to start the process and fill out the form on the application while off-line.

For more details on how to configure a process for off-line use, refer to the SoftExpert Process documentation.

 

 

Available components

Exhibition

The exhibition components can be used to better organize and distribute form fields. Remember that we can mix them by inserting sections into cards, and vice versa.

Panel In the form, the panel is displayed with all of its area highlighted. Use this exhibition component to separate form fields into areas. Then, drag the desired fields into this element.  
It is not possible to drag a panel into panels, sections, or cards.
Section Just as the Panel, this exhibition component can be used to separate form fields into areas, but there is no visual delimitation for the area of the section. Drag the desired fields into this element.  
It is not possible to drag a panel into a section, but other sections can be dragged into a section.
Card A Card allows for separating form fields in a certain area, but it does not have the collapse and expand feature. On the other hand, a card may have a specific background color, and its border, shown by default, can be hidden.  
It is not possible to drag a panel into a card, but sections can be dragged into a card.
Title Use this exhibition component to insert a title in the form. It will be possible to set the size of the title area, adjust the alignment of the text, the color and size of the font, the background color, as well as to define whether the font will be bold and/or italic.
Image Use this exhibition component to insert an image in the form. It is possible to use the default system logo, the report logo, or a custom image. The default logo and the report logo are defined in SoftExpert Configuration > Configuration > System (CM006).
 
 

Basic

Text Use this basic component to insert a field that allows for inputting text-type data. For this item, a field can be created in the form table, or a previously created field of the Text type, with 50 or 255 characters, can be selected.
Paragraph Use this basic component to insert a field that allows for inputting text-type data.  
For this item, a field can be created in the form table, or a previously created field of the Text type, with 4000 characters or unlimited, can be selected.
Integer Use this basic component to insert a field that allows for inputting number-type data.  
For this item, a field can be created in the form table, or a previously created field of the Number or Long number type can be selected.
Decimal Use this basic component to insert a field that allows for inputting data of the decimal (number) type.  
For this item, a field can be created in the form table, or a previously created field of the Decimal type can be selected.
Date Use this basic component to insert a field that allows for inputting date-type data.  
For this item, a field can be created in the form table, or a previously created field of the Date type can be selected.
Time Use this basic component to insert a field that allows for inputting time-type data.  
For this item, a field can be created in the form table, or a previously created field of the Time type can be selected.
Checkbox Use this basic component to insert a field that allows for checking/unchecking an option.  
For this item, a field can be created in the form table, or a previously created field of the Boolean type can be selected.
Option group Use this component to insert a group containing multiple options, and from which only one can be checked.  
A maximum of 20 options can be created. If more options are needed, use the Advanced list component.
Simple list Use this component to insert a list containing multiple options, and from which only one can be selected.  
A maximum of 20 options can be created. If more options are needed, use the Advanced list component.
Button Use this component to insert a button in the form.
 
 

Advanced

File Use this advanced component to insert an area that will allow for adding a file (only one file).  
For this item, a field can be created in the form table, or a previously created field of the File type can be selected.
Signature Use this advanced component to insert an area that will allow for adding a signature. The form can be signed in writing or using an image.  
The written alternative is recommended for forms to be filled out on tablets or smartphones, as it allows for writing within a predefined area of the form.  
For the option of signing from an image, the user's scanned signature will be used, which must be created as image on the user data screen.  
It is also possible to restrict signing so that only a certain user can do so.
Advanced list Use this advanced component to insert a list containing options from another table; only one option can be selected.  
For this item, it will be necessary to define the table and the table field that has the values to be displayed on the list.
Table Use this advanced component to insert a table that allows for associating multiple records, such as items of an order.  
For this item, it will be necessary to define the table and the table field that will work as columns for the form table.
Data source list

Use this advanced component to insert a list containing options originated from a data source; only one option can be selected.  
Data sources allow for using queries to external databases of third-party systems, such as CRM, ERP systems, and others.

A data source is registered through the SoftExpert Administration > Configuration > Data source > Data source (AD047) menu.

Rich text Use this advanced component to insert an area that allows for inputting rich text, that is, it allows formatting the text (setting or changing font type, size, and color, applying the bold, italic, and underline styles), formatting paragraphs, inserting tables, links, and images.  
For this item, a field can be created in the form table, or a previously created field of the Text type, with 50 or 255 characters, can be selected.
 
 

Integration

Attachment

Use this integration component to insert an area in which it will be possible to add or view attachments directly in the form.  
This resource is available only if the form is associated with a process activity automated for SoftExpert Workflow.

Note: This component cannot be used in a responsive form.

Action plan Use this integration component to view, add, or edit action plans directly in the form.  
This resource is available only if the form is associated with a process activity automated for SoftExpert Workflow. The activity of the process (that contains the form) must be configured for association or visualization of action plans.
Cause analysis Use this integration component to perform cause analyses directly in the form.  
This resource is available only if the form is associated with a process activity automated for SoftExpert Workflow. The process activity must be configured for the cause analysis step.
 
 

 

Conclusion

Now that you know the structure of the designer, learn how to design a responsive form.


Was this article helpful?