Page Controller (Avalon)

   MaestroThe UI design product.  |   Form Builder |  22.04 This feature was introduced in 22.04.

Maestro comes with the Page Controller (Avalon) component, which is a container for all application's pages, allowing form users to navigate them in a certain order as per a user onboarding flow. Page Controller (Avalon) only accepts the Page Groups (Avalon) and Pages (Avalon) components as they have additional properties. If you don't use the Avalon Template, you can use the Page Controller component.

Page transitions help form users understand where each page of a single-page application ends and another page begins, which greatly improve Maestro form accessibility.

Page transitions can be animated using CSS transitions or animations. By default, both the Maguire and Avalon templates provide two choices of transition:

• Page Fade Transition: the default transition.
• Page Slide Transition

Custom transitions can also easily be created using shared styles.

Usage

1. Open the Palette pane in the Maestro Editor.
2. Locate the Page Controller (Avalon) component within the Navigation folder.
3. Drag the component into the View pane or the Wireframe.
4. Configure the component's properties via the Properties pane.

Properties

The following properties are available to the Page Controller component:

Background Save On Page Change

Boolean saveOnPageChange

Select to enable saving a form on page change event. However, the following conditions apply:

• Transact Function enabled forms, which are forms built with the Use server side Transact Functions (requires TM 17.10 +) option selected, will always Background Save on page change.
• Non-Transact Function forms will only do the Background Save if the form data has changed since the last page change.

Validation Mode

Option validationMode

Select the page validation mode from the Validation Mode dropdown, which can be one of the following:

• Sequential, validate on page change: sequential.
• Unconstrained, validate on submit: unconstrained.

Scroll Timing

Option timingMode

Select the page transition mode from the Scroll Timing dropdown, which can be one of the following:  |  24.10 This feature was introduced in 24.10

• Scroll after page transition: to enable scroll to the top of a new page after the page transition has finished.
• Scroll during page transition: to enable scroll to the top of a new page during the page transition.

Restart At Last Saved Page

Boolean restartAtLastSavedPage

If checked, the form will return to the page it was on after save and resume.

Deprecated

Focus After Page Change Mode

Option focusMode

Select a focus option from the Focus After Page Change Mode dropdown, which can be one of the following:

• Smart Focus: to set focus to the Navigator, if present. Otherwise, it sets focus to the first heading. The value is smart.
• Do Nothing: the value is none.

Page Transition Delay

Integer transitionDelay

Provide how long the duration of the page transition will be.

Styles

The following styles are available to this component:

Height Transition

A transition by changing the height of a page. This is added by default.

Page Fade Transition

A transition by fading out. This is added by default.

A sample CSS is shown below. The key is the first line which defines the timings and what property is being animated (opacity in this example), plus the .vstk-in and .vstk-out selectors, which define the opacity values:

@transition: opacity 0.5s ease-in-out;

form[name='form'] {
	.page-fade-transition {
	    &[data-view-stack], &[view-stack], [data-view-stack], [view-stack] {

          &.stack-active {
            position: relative;
            overflow-y: hidden;
          }

          & > * {
            -webkit-transition: @transition;
            -moz-transition: @transition;
            -ms-transition: @transition;
            -o-transition: @transition;
            transition: @transition;
          }

          .vstk-in {
            opacity: 1;
          }

          .vstk-out {
            visibility: hidden;
            opacity: 0;
            transform: none;
          }

Page Slide Transition

A transition by sliding out.

A sample CSS, which animates the transform instead of the opacity is shown below:

@transition: transform 0.7s ease-in-out;

form[name='form'] {
    .page-slide-transition {
        &[data-view-stack], &[view-stack], [data-view-stack], [view-stack] {

            &.stack-active {
                position: relative;
                overflow-y: hidden;
            }

            & > * {
                -webkit-transition: @transition;
                -moz-transition: @transition;
                -ms-transition: @transition;
                -o-transition: @transition;
                transition: @transition;
            }
        }
    }
}

The 3 styles above are used for page transition effects, which is commonly used to enhance form accessibility. The transition happens where the leaving page completely disappears before the new page fades in. This is achieved by the standard CSS that uses the animation of the change in height between two pages, and controlling timing of the change.

You can edit the existing styles or you can even create your own shared style defining some other animation.

The styles use the view-stack directives, which are the vstk- classes. Each page has some combinations of those classes at its top div level

The main classes are listed below:

vstk-in

the currently visible page.

vstk-out

any page that is not visible.

vstk-down

a page that is not visible, but which is in the "back" direction from the current page.

vstk-up

a page that is not visible, but which is in the "forward" direction from the current page.

vstk-in-add

a page that is currently being animated on to the screen.

vstk-out-add

a page that is currently being animated off the screen.

vstk-down-add

a page that is currently being animated off the screen, when moving "forward".

vstk-up-add

a page that is currently being animated off the screen, when moving "back".

vstk-down-remove

a page that is currenting being animated on to the screen, when moving "back".

vstk-up-remove

a page that is currenting being animated on to the screen, when moving "forward".

Next, learn about the Page component.