<Page>

Skip past table of contents

Search

Table of contents

Start of documentation content

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>, <SuccessPage>, <ErrorPage>, or other <Page>s).

Use of <Page>

<Page
  id="myPage1"
  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 progressIndicatorHtml on <Root>.

boolean
hideInAnswerSummary

Whether to hide any answers below this.

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
meta

Arbitrary metadata on this node.

This is useful when developing custom controls as it allows you to pass down metadata/extensions.

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
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
type

Non-editable.

Type of component of "Page".

"Page"