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

Coding:

{
  "@Type": "Wizard",

  "Name": "{name}",
  "Color": "{color}",
  "Cover": "{cover}",
  "Routes": [],
  "NextPage": 0,
  "Timeout": 0,
  "Finish": false,
  "FullScreen": false,
  "CanLandScape": false,
  "CanScreenShot": false,
  "Dir": "{dir}",
  "Dir.Text": "{dir}"
}

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

Coding:

{
  "@Type": "Wizard",

  "Title.Show": true,
  "Title.Color": "{titleColor}",
  "Title.Text": "{titleText}",
  "Title.Text.Size": 16,
  "Title.Text.Color": "{titleTextColor}",
  "Title.Text.Style": "{titleTextStyle}",
  "Title.Menu": "{pageName}",
  "Title.Back.Logo": "{backLogo}",
  "Title.Menu.Logo": "{menuLogo}"
}

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.

Coding:

{
  "@Type": "Wizard",

  "Wizard.Next.Text": "{nextText}",
  "Wizard.Next.Text.Finish": "{nextTextFinish}",
  "Wizard.Next.Text.Color": "{nextTextColor}",
  "Wizard.Next.Text.Style": "{nextTextStyle}",
  "Wizard.Next.Text.Size": 16,
  "Wizard.Next.Color": "{nextColor}",
  "Wizard.Next.Radius": 1000,
  "Wizard.Next.Margin": 30,
  "Wizard.Next.MarginLine": 30,
  "Wizard.Next.Size": 80,
  "Wizard.Next.OnClick": []
}

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.

Coding:

{
  "@Type": "Wizard",

  "Pages": [
    [

    ]
  ]
}

🔗 Visual Version

To see how to create this page in Applin Studio (no-code mode), visit:
Design the Wizard Page in Applin Studio