Form properties

Tab Properties allows configuration of parameters related to behavior, appearance, and interactions 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. The properties are grouped into thematic sections.

Illustration 1. Appearance of the "Properties" tab

"General" section

Application description

A text field allowing you to add a short description or comment to the form project. This description is not presented to the end user, but facilitates identification in the repository and teamwork.

Entry services

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

Illustration 2. "Entry Services" section with added services

Services mapping input parameters

The availability of features depends on the license and may not be available in all deployments.

Section Services mapping input parameters allows connecting services whose task is to populate the form fields with data even before it starts. These services are launched automatically upon entering the application - both during a standard form open and in the case of its unparking (resuming the session).

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 specific page.

Characteristic features of mapping services

• do not have output parameters,

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

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

• they execute always first - even before the 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 in the application and the 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 the variable to the output map recentlyRequestedPageMid and assign to it 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 the DemoMappingEntryService service",
                PAGE_MID, "Page2"));
    }
}

Demo application: demoSerwisMapujacyParametryWejscia

Exit services

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

"Appearance" section

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

Side and bottom panel

The availability of features depends on the license and may not be available in all deployments.

Allows enabling or disabling the visibility of additional panels (e.g., a 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 by clicking the save symbol. The option determines the placement of the added content Slot.

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

Illustration 4. Example appearance of the side panel in the application

Step 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 define the visibility condition of the steps bar and indicate elements that trigger this change (so-called listening to elements).

Illustration 5. Example of a defined condition of the steps bar visibility

Figure 6. Example of steps in the application

Visibility of the navigation bar/button

Visibility of the navigation bar allows you to specify whether the bottom navigation bar (with Back/Next/Send buttons) should be visible. In the section Visibility of the navigation button only the condition for showing the Next/Send button is defined. In both sections, remember to indicate the elements that trigger the given change (so-called listening).

Illustration 7. Section ""Visibility of the navigation button"

Visibility of an additional header element

The availability of features 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 propagating an action). The type of displayed element may vary depending on the implementation and its presence is not guaranteed in all implementations.

Bottom Bar

The availability of features 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)

The availability of features 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

Button visibility is set in the subsection Visibility, where you specify the condition for showing the button and the element that should trigger this change (listening). Thanks to this, the button can be visible only in specific situations, e.g., after checking a field or in a given application step.

Phone number masking

In the section Masking 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 defined 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 implementations.

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

Technical configuration

The size and position of the browser window, as well as the website address it leads to, 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 address of the website opened in a new window; it may contain form variables available when starting the application, e.g.:

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

Translations and text keys

The labels 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	"Order a contact"
iew.fab.thank.you.title	title in the thank-you popup	"We will call you back 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 a conversation"
iew.fab.error.try.again.desc	description in the error popup	"Try again in a moment"

Demo applications: demoFab, demoFabZmienioneLitera

Loading progress style

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

Conditional application titles

Allows you to define different titles displayed in the form header depending on meeting specific conditions. Each title has an assigned visibility condition (e.g., dependent on data), enabling you to dynamically change the header depending on the stage of the application or the user's role.

Definition of titles

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

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

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

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

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

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

• Handle for changing order – allows you to drag the title and set its priority (order of condition checks).

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

Illustration 9. Example of four defined conditional titles

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

Demo application: demoFormTitles

Demo application: demoWlasciwosciSzablonuWniosku