Wizard
Wizard pages guide users through multi‑step processes or tutorials, typically in a sequential order with step‑by‑step navigation.
Page
This configuration defines a page’s core behavior: it sets type, name, color, and cover, controls navigation with routes, next page, and timeout, marks if it’s the final step, manages display options like fullscreen, landscape, and screenshots, and specifies layout and text direction.
| Field | Type | Default Value | Description |
|---|---|---|---|
| @Type | PageType | "Wizard" | Specifies the page type as a wizard page |
| Name | PageName | {name} | Name or title of the page |
| Color | String | {color} | Background color of the page |
| Cover | String | {cover} | Optional cover image for the page |
| Routes | Array |
[] | List of route scripts or actions associated with the page |
| NextPage | Page | 0 | ID of the next page to navigate to |
| Timeout | Number | 0 | Duration in seconds before automatic navigation |
| Finish | Boolean | false | Indicates if this page marks the end of a sequence |
| FullScreen | Boolean | false | Determines if the page should be displayed in full screen mode |
| CanLandScape | Boolean | false | Allows landscape orientation if true |
| CanScreenShot | Boolean | false | Allows users to take screenshots if true |
| Dir | Direction | {dir} | Layout direction (e.g., "ltr" or "rtl") |
| Dir.Text | TextDirection | {dir} | Text direction for content on the page |
Title
This configuration manages the page title bar: it can show or hide the bar, set its background color, define the title text with size, color, and style, link a menu page, and assign icons for the back and menu buttons.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Title.Show | Boolean | true | Shows or hides the page title bar |
| Title.Color | Color | {titleColor} | Background color of the title bar |
| Title.Text | String | {titleText} | Title text displayed at the top |
| Title.Text.Size | Number | 16 | Font size of the title text |
| Title.Text.Color | Color | {titleTextColor} | Text color of the title |
| Title.Text.Style | TextStyle | {titleTextStyle} | Font style (bold, italic, etc.) |
| Title.Menu | PageName | {pageName} | Menu page name to open from title |
| Title.Back.Logo | Logo | {backLogo} | Icon used for the back button |
| Title.Menu.Logo | Logo | {menuLogo} | Icon used for the menu button |
Next
This configuration defines the Next button in the wizard: it sets the label text (including a special Finish label for the last step), controls text color, style, and size, applies a background color, corner radius, and margins, specifies the button’s height, and assigns on‑click commands to handle navigation or actions.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Wizard.Next.Text | String | {nextText} | The label displayed on the “Next” button. |
| Wizard.Next.Text.Finish | String | {nextTextFinish} | The label displayed when reaching the final step (e.g., “Finish”). |
| Wizard.Next.Text.Color | Color | {nextTextColor} | Defines the text color of the button. |
| Wizard.Next.Text.Style | TextStyle | {nextTextStyle} | Sets the font style (Regular, Bold, etc.). |
| Wizard.Next.Text.Size | Number | 16 | Sets the font size of the button text. |
| Wizard.Next.Color | Color | {nextColor} | The background color of the Next button. |
| Wizard.Next.Radius | Number | 1000 | Corner radius of the button for rounded styling. |
| Wizard.Next.Margin | Number | 30 | Outer margin around the button. |
| Wizard.Next.MarginLine | Number | 30 | Space between button and any bottom line/progress element. |
| Wizard.Next.Size | Number | 80 | Height of the button. |
| Wizard.Next.OnClick | Array |
[] | A list of scripted route commands executed when button is pressed. |
Pages
The Pages field defines the app’s wizard steps: each step is represented as an array of Elements, allowing you to structure multi‑step flows where every page contains its own set of components and layouts.
| Field | Type | Default | Description |
|---|---|---|---|
| Pages | Array<Array |
[] | A list of wizard steps, where each step contains an array of Elements. |
To design your pages, you can click here.
🔗 Additional Resources
To learn how to build this same page using JSON coding, visit:
Develop the Wizard Page with JSON