Form properties

Tab Properties allows configuring parameters related to the behavior, appearance and interaction of the form during its runtime. These parameters affect how the form is presented to the user, how it communicates with services and which interface elements are visible. Properties are grouped into topical sections.

Figure 1. Appearance of the "Properties" tab

Section "General"

Application description

A text field allowing you to add a short description or comment to the form design. This description is not presented to the end user, but helps identification in the repository and in team work.

Entry services

This section contains a list of services attached to the application as startup services. These services will run at the beginning of the application's lifecycle if the activity condition is met. Entry services are executed sequentially, according to the order in the list. In edit mode it is possible to add and remove an entry service and define the condition for the service to run.

Figure 2. Section "Entry services" with added services

Services mapping input parameters

Feature availability depends on the license and may not be available in all deployments.

The section Services mapping input parameters allows connecting services whose purpose is to supply form fields with data before it is started. These services are started automatically when entering the application - both during a standard form opening and in the case of its unparking (session resumption).

Thanks to these services you can, for example, pass customer data from an external system, set initial field values or open the application on a specified page.

Characteristics of mapping services

• do not have output parameters,

• the result of the service execution is directly mapped to form fields or session variables,

• can specify the page on which the form should open,

• execute always first - even before entry services.

Implementation example (ServiceProxy)

To populate a field, the service should return in the map a key that will have the identifier of the field on the application and a value that will be assigned to it. Do not define outputFields for fields returned from the callService() method. To open the application on a specific page, pass to the output map the variable recentlyRequestedPageMid and provide it with the mid of the appropriate page.

@Component
@Service(AbstractServiceProxy.class)
public class DemoMappingEntryService extends AbstractServiceProxy {

    private final static String TEXT_FIELD = "GesComplexComponent1.GesTextField1";
    private final static String PAGE_MID = "_recentlyRequestedPageMid";

    public DemoMappingEntryService() {
        this.name = "DemoMappingEntryService";
        this.description = "For test purposes ONLY!";
    }

    @Override
    public List<Map<String, String>> callService(Map<String, List<String>> map)
            throws ServiceProxyException {
        return Collections.singletonList(ImmutableMap.of(
                TEXT_FIELD, "Value passed from DemoMappingEntryService",
                PAGE_MID, "Page2"));
    }
}

Demo application: demoMappingEntryService

Exit services

This section contains a list of services attached to the application as final services. These services will run before the end of the application's lifecycle if the activity condition is met.

Section "Appearance"

This section is responsible for configuring interface elements visible while filling out the application.

Side and bottom panel

Feature availability depends on the license and may not be available in all deployments.

Allows enabling or disabling visibility of additional panels (e.g. side menu with information, notifications or content blocks). Panels can be used to present useful links or cross-sell elements.

Artifacts of type can be attached to panels Content (TextContent), selected from the repository. Editing a panel (adding a visibility condition, listeners, styles or selecting a slot) requires clicking the pencil icon, and saving changes requires clicking the save symbol. The placement of added content is determined by the Slotoption. Panels allow defining multiple contents that will be displayed one under another.

Figure 3. Side and bottom panel - example of defining content

Figure 4. Example appearance of the side panel on the application

The content of the bottom panel is determined by setting the Slot option to the appropriate value, which depends on the deployment.

Figure 5. Example appearance of the bottom panel on the application

Steps visibility

Controls the display of the top horizontal progress bar (so-called form steps). Hiding it can be used in single-page applications or simplified processes.

In the section you can specify the visibility condition for the steps bar and indicate elements that trigger this change (so-called listeners on elements).

Figure 6. Example of a defined condition for the visibility of the steps bar

Figure 7. Example of steps on the application

Visibility of the navigation bar/button

Navigation bar visibility allows determining whether the bottom navigation bar (with Back/Next/Submit buttons) should be visible. Meanwhile in the Navigation button visibility section you specify only the condition for showing the Next/Submit button. In both sections remember to indicate the elements that trigger the change (so-called listeners).

Figure 8. The section "Navigation button visibility"

The variable currentPageId is not supported. For correct operation of the navigation button visibility the variable currentPageMid should be used

Visibility of an additional header element

Feature availability depends on the license and may not be available in all deployments.

Allows displaying an additional element in the first position of the page header (e.g. an icon, a button promoting an action). The type of displayed element may vary depending on the deployment and its presence is not guaranteed in all implementations.

Bottom Bar

Feature availability depends on the license and may not be available in all deployments.

Determines whether the form footer should be presented to the user. It can be hidden conditionally – e.g. on information or summary pages.

Panic Button (FAB)

Feature availability depends on the license and may not be available in all deployments.

Specifies whether the floating button on the application page that opens an additional window (FAB – Floating Action Button) should be visible on the form.

Visibility

The button's visibility is set in the subsection Visibility, where the condition for showing the button and the element that should trigger this change are specified (listening). Thanks to this the button can be visible only in certain situations, e.g. after checking a field or in a specific step of the application.

Phone number masking

In the Masking section you can define whether the phone number in the button's window should be masked (e.g. partially hidden). The visibility of the number is determined using a condition and listening to the element that triggers the change.

Additional settings

In the subsection Additional data you can indicate form components whose values will be passed to the button configuration - phone number, id or configuration version. This option is available only in selected deployments.

Figure 9. Visibility of the "Panic Button" section with set conditions and parameters

Technical configuration

The size and position of the browser window, as well as the website address to which it leads, are defined for a given installation in the webforms.xml configuration file. Example values:

<floatingActionButton>
    <windowPositionX>100</windowPositionX>
    <windowPositionY>100</windowPositionY>
    <windowSizeX>100</windowSizeX>
    <windowSizeY>100</windowSizeY>
    <actionLink>http://consdata.pl</actionLink>
</floatingActionButton>

Configuration parameters:

• windowPositionX – distance of the window from the left edge (px)

• windowPositionY – distance of the window from the top (px)

• windowSizeX – window width (px)

• windowSizeY – window height (px)

• actionLink – the website address opened in a new window; may contain form variables available during application start, e.g.:

<actionLink>http://consdata.pl?applicationName=${formId}&applicationNumber=${formInstanceNumber}</actionLink>

Translations and text keys

Captions on the component can be customized by adding translations in the main form template:

Translation key	Description	Default content
iew.fab.need.help	title in the start popup	"Do you need help?"
iew.fab.well.call.up	description in the start popup	"We will call you back as soon as possible…"
iew.fab.order.call	button content in the start popup	"Request contact"
iew.fab.thank.you.title	title in the thank-you popup	"We will call you soon"
iew.fab.thank.you.desc	description in the thank-you popup	""
iew.fab.error.could.not.order.conversation.title	title in the error popup	"Could not order the conversation"
iew.fab.error.try.again.desc	description in the error popup	"Please try again in a moment"

Demo applications: demoFab, demoFabChangedLetter

Loading progress style

Defines how the loading indicator is presented during form initialization. The default value is "preloader". Available styles may differ depending on the visual theme (e.g. progress bar, spinner, logo animation).

Conditional application titles

Allows defining different titles displayed in the form header depending on whether certain conditions are met. Each title has an assigned visibility condition (e.g. dependent on data), allowing dynamic changes to the header depending on the application stage or the user's role.

Title definitions

Each title definition is presented in a separate row of the table. A given row contains:

• Title key – the translation identifier or fixed text displayed in the form header,

• Visibility condition – a logical expression specifying when the title should be used,

• Elements triggering change (listening) – a list of components or variables (separated by commas) whose change causes re-evaluation of the condition,

• Edit and delete buttons – allow modifying or deleting the title definition row,

• Save button – visible while editing the row; saves the changes made,

• Drag handle for reordering – allows dragging the title and setting its priority (the order in which conditions are checked).

Rows are processed from top to bottom, so if several conditions are met, the title from the highest row will be displayed.

Figure 10. Example of four defined conditional titles

If the change of the application title depends on moving between pages, use the variable currentPageMid. This will allow the title to change both when moving to the next page and when going back.

Demo application: demoFormTitles

Demo application: demoTemplateProperties