Term
Term pages are designed to present legal text, terms of service, or policies within the app. They allow users to review important agreements and, when necessary, provide an accept button so users can confirm their consent before proceeding. This ensures compliance and transparency while keeping the experience integrated inside the application.
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 | "Term" | Specifies the page type as a term page |
| Name | PageName | {name} | Name or title of the page |
| Color | Color | {color} | Background color of the page |
| Cover | URL | {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 |
Accept
This configuration defines the Accept button’s main properties: it controls whether the button is shown or hidden, sets its size, border radius, and outer margin, adjusts the spacing from nearby elements, and specifies the actions executed when clicked.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Term.Accept.Show | Boolean | true | Shows or hides the accept button. |
| Term.Accept.Size | Number | 80 | Sets the size of the accept button. |
| Term.Accept.Radius | Number | 1000 | Sets the border radius of the accept button. |
| Term.Accept.Margin | Number | 30 | Sets the outer margin of the accept button. |
| Term.Accept.MarginLine | Number | 30 | Sets the margin between button and adjacent lines/elements. |
| Term.Accept.OnClick | Array |
[] | Array of actions triggered when the accept button is clicked. |
Accept (Before)
This configuration defines the Accept button’s pre‑click state: it sets the background color, specifies the text displayed, customizes the text color, adjusts the font size, and applies a text style (like bold or italic) before the button is clicked.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Term.Accept.Before.Color | Color | {color} | Background color of the accept button before being clicked. |
| Term.Accept.Before.Text | String | {text} | Text displayed on the button before being clicked. |
| Term.Accept.Before.Text.Color | Color | {textColor} | Text color before clicking. |
| Term.Accept.Before.Text.Size | Number | 16 | Font size of the text before clicking. |
| Term.Accept.Before.Text.Style | TextStyle | {textStyle} | Text style (bold, italic, etc.) before clicking. |
Accept (After)
This configuration defines the Accept button’s post‑click state: it sets the background color, updates the displayed text, customizes the text color, adjusts the font size, and applies a text style (like bold or italic) after the button has been clicked.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Term.Accept.After.Color | Color | {color} | Background color of the accept button after being clicked. |
| Term.Accept.After.Text | String | {text} | Text displayed on the button after being clicked. |
| Term.Accept.After.Text.Color | Color | {textColor} | Text color after clicking. |
| Term.Accept.After.Text.Size | Number | 16 | Font size of the text after clicking. |
| Term.Accept.After.Text.Style | TextStyle | {textStyle} | Text style (bold, italic, etc.) after clicking. |
Elements
This configuration defines the Elements field: it holds an array of UI components that will be rendered inside the page, allowing you to structure and display the page’s interactive content.
| Field | Type | Default | Description |
|---|---|---|---|
| Elements | Array |
[] | A list of UI Elements that will be rendered inside the page. |
To design your pages, you can click here.
🔗 Additional Resources
To learn how to build this same page using JSON coding, visit:
Develop the Term Page with JSON