Editing pages

Introduction

As part of designing the form in Eximee Designer the user has the ability to edit individual application pages, which create its logical and visual structure. Each page can contain basic components or complex ones, and its behavior and appearance can be modified in the page properties panel.

Form structure and pages

A form in Eximee consists of steps and pages. Page management is done in the Steps tab, while their content and layout are modified in the Application tab.

Visibility conditions

Visibility conditions allow control over whether a given page will be shown to the user. They are defined in the Application on the selected page, in the Data quality (field Add visibility condition) using logical expressions created in the advanced condition editor, which allows referencing form field values or session variables.

Visibility conditions can also be defined in the Steps tab – by using the Add condition, which allows specifying the presentation logic of individual form steps.

More information: Advanced condition editor.

Editing page layout

Each page has a defined column layout, set at the time of creating the form. Changing the number of columns (tab and find the definition of the given page, then change the attribute) is possible only by editing the XML code in the The number of page columns can be changed after creating the form by editing its definition. In the application edit mode go to the.

Example of a page fragment with the number of columns set to 12

<system:Page id="Page3" mid="Page3" titleKey="Page3.title">
  <system:Page.layout>
    <ns6:GridLayout makeColumnsEqualWidth="true" numColumns="12"/>
  </system:Page.layout>
</system:Page>

Note: Before reducing the number of columns, you should adjust the width of components (horizontalSpan) - their sum in a row must not exceed the number of columns of the page.

Page styling

Each page can have its own CSS styles assigned. A style defines the visual presentation of the page (e.g., layout, margins, background color). The defined style can be set in the Properties (section Styling) or directly in the XML source via the styleName.

Properties fixedColumns and styleName allow specifying the appearance of the page - respectively the layout structure and the assigned CSS style.

It is recommended to use platform styles consistent with the implemented visual theme. More information: Form and component styles.

Page properties

After clicking on an empty area of the application editor, the Properties page panel opens.

Illustration 1. Fragment of the page "Properties" panel

More information about page properties here

Good practices

• Establish a consistent naming convention for pages (e.g. Page1, Page2, Summary).

• Use visibility conditions only where necessary.

• Set a uniform number of columns across all pages of the form.

• Design the component layout so that their total horizontalSpan in a row does not exceed the number of columns of the page. When changing the number of columns, remember to adjust the width of the components.

• Pages located after the save point are treated as completion pages (e.g., thank you, confirmation)

FAQ

Can the order of pages in the form be changed? Yes. In the Steps tab you can drag pages using drag & drop. Changes are saved automatically.

How to hide a page from the user? In the page properties panel you should set a visibility condition (visibleCondition). The page will be shown only if the condition returns a value of true.

Can the number of page columns be different than in the entire form? Yes, but only after editing the XML source in the The number of page columns can be changed after creating the form by editing its definition. In the application edit mode go to the tab - by changing the tab and find the definition of the given page, then change the attribute attribute in the <system:Page.layout>.

How to set a page as a thank-you page? Just place it after the Application save point - the system will automatically treat it as a completion page.