# 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](https://content.gitbook.com/content/2CssJT0zIo4SJQLbSZ6l/blobs/hWaMmDtLmDCuYpcnRCdh/wlasciwosci_1_pliki/image2025-8-13_12-42-21.png)

## **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><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FsWJgJuNBwLFtyycUnSC7%2Fimage2020-5-19_9-46-27.png?alt=media&#x26;token=2e93f258-4372-4177-b20e-28afe8a3cd64" alt=""><figcaption><p><em><strong>Figure 2.</strong> Section "Entry services" with added services</em></p></figcaption></figure>

### **Services mapping input parameters**

{% hint style="info" %}
Feature availability depends on the license and may not be available in all deployments.
{% endhint %}

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.

{% code expandable="true" %}

```java
@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"));
    }
}

```

{% endcode %}

{% hint style="info" %}
Demo application: demoMappingEntryService
{% endhint %}

### **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**

{% hint style="info" %}
Feature availability depends on the license and may not be available in all deployments.
{% endhint %}

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)](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/biblioteka-komponentow-bazowych/tresc-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 **Slot**option. Panels allow defining multiple contents that will be displayed one under another.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fj0KUe4JyO7c1HxLUk1oA%2Fimage2020-6-1_12-29-55.png?alt=media&#x26;token=b607ce42-8af1-4ffe-a3f5-f92f97c396da" alt=""><figcaption><p><em><strong>Figure 3</strong></em><strong>.</strong> <em>Side and bottom panel - example of defining content</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FElN4b8mH3IFrwkdu4rAf%2Fimage2025-6-17_13-20-39.png?alt=media&#x26;token=0972dafd-723e-40b9-b480-cf5e1b4c26eb" alt=""><figcaption><p><em><strong>Figure 4.</strong> Example appearance of the side panel on the application</em></p></figcaption></figure>

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

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fgit-blob-87035cd54c3895aa37549376c397a233c1575be9%2Fimage2025-12-16_10-09.png?alt=media" alt=""><figcaption><p><em><strong>Figure 5</strong></em><strong>.</strong> <em>Example appearance of the bottom panel on the application</em></p></figcaption></figure>

### **Steps visibility**

Controls the display of the top horizontal progress bar (so-called [form steps](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/tworzenie-formularza/kroki-i-strony-formularza)). 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><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F7BTICP2XvEjmBs7C2B1f%2Fimage2022-12-16_9-24-12.png?alt=media&#x26;token=3d9fc765-b6c6-451a-ad30-ff118f2e52af" alt=""><figcaption><p><em><strong>Figure 6</strong></em><strong>.</strong> <em>Example of a defined condition</em> <em>for the visibility of the steps bar</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FXRmeJ9SYgAy0jrMaKNCJ%2Fobraz.png?alt=media&#x26;token=e31625db-f56a-4d4a-bd18-d081096e512a" alt=""><figcaption><p><em><strong>Figure 7</strong></em><strong>.</strong> <em>Example of steps on the application</em></p></figcaption></figure>

### **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><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FIynunkwvWVfI4ALlC8Sl%2FZaznaczenie_656.png?alt=media&#x26;token=d7bc9354-ba4b-404b-9257-6a413b9cc3d3" alt=""><figcaption><p><em><strong>Figure 8.</strong></em> <em>The section</em> "<em>Navigation button visibility"</em></p></figcaption></figure>

{% hint style="warning" %}
The variable currentPageId is not supported. For correct operation of the navigation button visibility the variable currentPageMid should be used
{% endhint %}

### **Visibility of an additional header element**

{% hint style="info" %}
Feature availability depends on the license and may not be available in all deployments.
{% endhint %}

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**

{% hint style="info" %}
Feature availability depends on the license and may not be available in all deployments.
{% endhint %}

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)**

{% hint style="info" %}
Feature availability depends on the license and may not be available in all deployments.
{% endhint %}

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><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FIGrehtphmhi7rUrg7sRN%2Fimage2021-7-23_13-49-29.png?alt=media&#x26;token=1f7d6503-41b5-406c-bac3-eb533568773b" alt=""><figcaption><p><em><strong>Figure 9</strong></em><strong>.</strong> <em>Visibility of the "Panic Button" section with set conditions and parameters</em></p></figcaption></figure>

#### **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:

```xml
<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:

<table><thead><tr><th width="423">Translation key</th><th>Description</th><th>Default content</th></tr></thead><tbody><tr><td><code>iew.fab.need.help</code></td><td>title in the start popup</td><td>"Do you need help?"</td></tr><tr><td><code>iew.fab.well.call.up</code></td><td>description in the start popup</td><td>"We will call you back as soon as possible…"</td></tr><tr><td><code>iew.fab.order.call</code></td><td>button content in the start popup</td><td>"Request contact"</td></tr><tr><td><code>iew.fab.thank.you.title</code></td><td>title in the thank-you popup</td><td>"We will call you soon"</td></tr><tr><td><code>iew.fab.thank.you.desc</code></td><td>description in the thank-you popup</td><td><em>""</em></td></tr><tr><td><code>iew.fab.error.could.not.order.conversation.title</code></td><td>title in the error popup</td><td>"Could not order the conversation"</td></tr><tr><td><code>iew.fab.error.try.again.desc</code></td><td>description in the error popup</td><td>"Please try again in a moment"</td></tr></tbody></table>

{% hint style="info" %}
Demo applications: demoFab, demoFabChangedLetter
{% endhint %}

### **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).

{% hint style="info" %}
Rows are processed **from top to bottom**, so if several conditions are met, the title from the highest row will be displayed.
{% endhint %}

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F2LK037YnSb4MxaY2cgad%2Fimage2025-7-10_8-25-44.png?alt=media&#x26;token=862e3ec6-6c67-43de-9ed5-20a467167734" alt=""><figcaption><p><em><strong>Figure 10.</strong> Example of four defined conditional titles</em></p></figcaption></figure>

{% hint style="warning" %}
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.
{% endhint %}

{% hint style="info" %}
Demo application: demoFormTitles
{% endhint %}

{% hint style="info" %}
Demo application: demoTemplateProperties
{% endhint %}
