Page (Avalon)

MaestroThe UI design product. + Avalon TemplateThis topic is related to the Avalon Template used in Maestro. | Form Builder | 22.10 This feature was introduced in 22.10.

Maestro comes with the Page (Avalon) component that allows you to group components according to a form's navigation logic to build a user journey flow. This component is available when you use the Avalon Template. The Page (Avalon) component extends functionality of the Page component.

Usage

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

Properties

The following properties are available to this component:

Display Text

Title Text: Rich Text titleText; This text is used as a title. If the text is not provided, the default {{T[item.id].label}} value is used.
Subtitle Text: Rich Text subtitleText; This text is used as a subtitle. If the text is not provided, the default <h1 ng-bind-html="T[Form.$Pages.currentPage.id].properties.formName">Form Name</h1> value is used.
Note
You can use HTML tags in the Subtitle Text component, for example, <samp>Welcome</samp> to <em>my</em> page!. For more information, see rich text editor.
Additional Text: Rich Text additionalText; This text is used as an additional text.
Help Text: Rich Text helpText; This text is used as a help text.

Options

Hide Selection Header: Hide a selection header.
Force Page Break Before on Receipt: Force a page break for a receipt.
Show Page Label in Receipt: Show a page label for a receipt.

Page View

Hide From Navigator: Boolean hideFromNavigator; A page that is in the flow of the form but not displayed in the Navigator.
Hide From Header: Boolean hideFromHeader; Hide or show the form header (if applicable for the template).
Hide From Footer: Boolean hideFromFooter; Hide or show the form footer (if applicable for the template).
Hide Navigation Buttons: Boolean hideNavigationButtons; Hide or show the navigational buttons.
Hide Menu Button: Boolean hideFromHeader; Hide or show the form menu button.
Page of No Return: Boolean pageNoReturn; The user will not be able to navigate back past this page.

Navigator

Navigator Text: Rich Text; This text will be shown in the Navigator in place of the page label.

Rules

The Page component allows you to add the Page load and Page load scroll rules, which are handy for prefilling component's content as the page is loaded and displayed.

Animate Visibility: Animate a Visibility rule
Note
This option is available only if a Visibility rule exists on the component.

Styles

The following styles are available to this component:

Avalon Page

A style is shown below:

form[name='form'] {
  .avalon-page {
    width: ~"calc(100% + 10px)";
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    .wdg-section-1-container {
      margin: 0;
      padding: 0;
      border: 0;
      border-radius: 0;
      box-shadow: none;
    }
    .wdg-section-1-outer-wrapper {}
    .wdg-section-1-wrapper {
      padding: 0;
    }
    .wdg-section-1-header {}
    .wdg-section-1-icon {
      display: none;
    }
    .wdg-section-1-title {
      margin: 0;
      padding: 0 0 20px 0;
      outline: none;
    }
    .wdg-section-1-form-name {
      display: none;
    }
    .wdg-section-1-additional-text {
      display: none;
    }
    .wdg-section-1-body {
      padding: 0;
    }
  }

  &.av-receipt {
    .avalon-page {
      width: 100%;
    }
  }
  // Fullscreen page overrides
  .av-fullscreen {
    .wdg-section-1-wrapper {
      max-width: @ux-max-form-width;
      margin-left: auto;
      margin-right: auto;
    }
    .wdg-section-1-header {
      display: none; 
    }
    .wdg-section-1-body {
      padding: 0;
    }
  }
}

Next, learn about the Save and Close component.

Topics