Editing pages

Introduction

As part of form design 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 – using the Add conditionoption, 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 when the form is created. Changing the number of columns (numColumns) is only possible by editing the XML code in the Source.

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 decreasing the number of columns you should adjust the width of components (horizontalSpan) - their sum in a row cannot 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) panel or directly in the XML source via the styleName.

Properties fixedColumns and styleName allow specifying the page appearance - 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 an empty spot in the application editor, the Properties page properties panel opens.

Illustration 1. Fragment of the page "Properties" panel

More information about page properties here

Good practices

• Establish a consistent page naming convention (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 sum horizontalSpan in a row does not exceed the number of page columns. When changing the number of columns, remember to adjust component widths.

• Pages located after the save point are treated as end 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 the drag & dropmethod. 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 the value true.

Can a page's number of columns be different from the rest of the form? Yes, but only after editing the XML source in the Source tab - by changing the numColumns attribute in the <system:Page.layout>.

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