<Page>

The <Page> wraps all page content.

A <Page>'s parent must be the <Root>.

A <Page> can have any other component within it (except <Root> or other <Page>s).

Use of <Page>

<Page
  titleHtml={{ en: 'Case information sharing tool' }}
  hasSubmitPageType={false}
  hasProgressIndicator={false}
  rules={[]}
  previousButtonHtml={{ en: 'Previous' }}
  nextButtonHtml={{ en: 'Next' }}
>
  [children]
</Page>

<Page>'s props

PropAboutType
hasProgressIndicator

Whether the page should display a progress indicator (ie, "page 1 of 3").

To configure the localisable content see pageIndicatorHtml on <Root>.

boolean
nextButtonHtml

Localisable HTML: next button content.

This can be configured per-<Page> so that you can have content such as "Next: Your contact details".

E.g.

{
  en: "Next: Your contact details",
}
LocalisedHtml
previousButtonHtml

Localisable HTML: previous button content.

This can be configured per-<Page> so that you can have content such as "Previous: Your contact details".

E.g.

{
  en: "Previous: Your contact details",
}
LocalisedHtml
rules

An array of Conditional Rules.

All rules need to pass for the condition to be valid.

E.g.

[
  {
   type: 'ConditionalRule',
   target: { type: 'TargetByField', id: 'cat-or-dog' },
   comparison: '=',
   matchesValue: 'Dogs',
  },
  {
   type: 'ConditionalRule',
   target: { type: 'TargetByField', id: 'animal-name' },
   comparison: '=',
   matchesValue: 'tama',
  },
]
ConditionalRule[]
titleHtml

Localisable HTML: page title content.

E.g.

{
  en: "English page title",
}
LocalisedHtml
id

Component Id.

Must be unique within the form.

string
childrenById

Used to indicate children ids of this component.

If used in React this is non-editable.

string[]
hasChildrenById

Non-editable.

Used to indicate that this component has children.

true
hasSubmitPageType

Non-editable.

Used to indicate that the page isn't a wrapper around success/error nodes.

false
hasTagsById

Non-editable.

Used to indicate that this component isn't a form field with tags by id.

false
isFormField

Non-editable.

Used to indicate that this component isn't a form field.

false
isMultichoice

Non-editable.

Used to indicate that this component isn't a multichoice form field like <Select>, <Radios> or <Checkboxes>.

false
obscuredComponentsById

Non-editable.

SDK components that are wrapped in non-Formally SDK components are registered here.

string[]
type

Non-editable.

Type of component of "Page".

"Page"