Page Settings

Page settings

The entire application consists of pages. Each view that is presentable to a user must be implemented as page. There are two predefined user positions, the index page and the error page. The index must be inside index property in pages. In root of your yaml (typically index.yml), you can specify the value of the property errorPage. This property is name of page to which the user will be redirected when an error occurs (such as a network failure).

List of available parameters

Parameter	Required	Description
`analytics`	false	Analytics configuration for specific page
`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
`formOutputModifier`	false	Override page payload
`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

Error page

The 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

If an error page is not specified, the auth cookie will be deleted and application will be reloaded.

You can create more dynamic error page that provides useful features, such as a button to continue or reattempt the previous action (flowContinue). This button will automaticaly fetch the last stored data from the server and redirect user to correct screen.

Another useful error management feature is to provide a button that reloads the flow. If the problem is not easily resolved, have the user click a button to redirect to start of the flow in case with the form action flowReload.

If you are on error page, there are also available page parameters that contain the reason for the error. For example, query the value of page.params.error to get the raw output from the error catch.

Static pages

In pages can be also specified static pages, static page is page which can be accessed outside of any workflow logic, so can be used as landing pages for some calls of other SDKs or etc.. Static page name always start with $ character like this:

pages:
  $static-page: !include ./pages/static-page.yml

Then static page can be accessed by loading URL https://some-target-url.xyz/?s=static-page&some=other-params

If an error page is not specified, the auth cookie will be deleted and application will be reloaded.