Page settings

List of available parameters

Parameter	Required	Description
analytics	false	Analytics configuration
defaultAction	false	Default form submit action name
defaultActionParams	false	Default form submit action params
defaults	false	Default values for form fields
fadeAnimationBack	false	Use “fade” animation on back action
fadeAnimationSubmit	false	Use “fade” animation on submit action
items	false	Elements tree of specific page
og	true	List of meta og tags (will be merged with the ones coming from project configuration)
schema	false	Validation rules as a JSON schema
title	false	Page meta title

Example configuration

components:
  formLayout: !include @common/layouts/form-layout.yml
  formGroup: !include @common/components/form-group.yml
  header: !include @common/components/header.yml
  pinInput: !include @common/components/pin-input.yml
fadeAnimationBack: true
schema:
  required:
    - code
  properties:
    code:
      type: string
      minLength: 4
      maxLength: 4
  errorMessage:
    _: '{field} - Required field'
defaults:
  mobile: !expression 'flow.export.mobile'
items:
  - !ref components: formLayout
    items:
      - !ref components: header
        progress: <%-((3 / 8) * 100)%>
      - !component as: div
        className: 'content main-content'
        items:
          - !component as: h1
            items: 'Enter your phone number'
          - !component as: p
            items: 'Please enter a valid mobile phone number to where we can text a confirmation code to.'
          - !ref components: formGroup
            items:
              - !ref components: pinInput
                field: code
                label: 'Enter your confirmation code'
                length: 4

The whole application is created from pages. Every view, that can be presented to user must be implemented as page. There is two predefined user positions - index and error page. Index must be inside index property in pages. In root of your yaml (typicaly index.yml) you can specify property errorPage. This property is name of page, where will be user redirected, when some unexpected error occurs (eg. network fail).

Error page

Error page can be specified as an errorPage parameter in application configuration.

errorPage: 'error-page'
---
pages:
  error-page: !include ./pages/error.yml # Include error page to a list of pages

In case of error page is not specified, auth cookie will be deleted and application will be reloaded

You can create more dynamic error page, that provides some useful features. E.g. you can put there a button to continue (or try again) previous action (flowContinue). This button will automaticaly fetch last stored data from server and redirect user to correct screen.

Another useful case for user is a page with a button to reload flow. You can bring user to start of your flow in case, when problem can not be resolved easily - form action flowReload.

If you are on error page, there are also available page params with reason, why are you on this page — page.params.error. It is raw output from catch in action.