Editing pages

Introduction

As part of form design in Eximee Designer the user has the ability to edit individual application pages, which make up its logical and visual structure. Each page may contain base 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 displayed to the user. They are defined in the tab Request on the selected page, in the section 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 Add condition– through the option

, which allows defining the presentation logic of individual form steps.

Page layout editing

Each page has a defined column layout, determined when the form is created. Changing the number of columns (numColumns) is possible only 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 reducing the number of columns, adjust the width of the components (horizontalSpan) - their sum in a row must not exceed the number of page columns.

Page styling

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

Properties fixedColumns and styleName allow defining the page appearance - namely 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 area of the application editor, the panel opens Properties of the page.

Figure 1. Fragment of the page's "Properties" panel

More information about page properties here

Best practices

• Establish a consistent page naming convention (e.g. Page1, Page2, Summary).
• Use visibility conditions only where necessary.
• Establish a uniform number of columns across all form pages.
• 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 the 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, pages can be dragged using drag & drop. Changes are saved automatically.

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

Can the number of columns on a page differ from the rest of the form? Yes, but only by editing the XML source in the Source - by changing the attribute numColumns in the element <system:Page.layout>.

How do you set a page as a thank-you page? Simply place it after The form save point - the system will automatically treat it as an end page.