Web pages embed external web content or websites directly inside the app through an in‑app browser view, allowing seamless integration of online resources without leaving the application.
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 | "Web" | Specifies the page type as a web 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": "Web",
"Name": "{name}",
"Color": "{color}",
"Cover": "{cover}",
"Routes": [],
"NextPage": 0,
"Timeout": 0,
"Finish": false,
"FullScreen": false,
"CanLandScape": false,
"CanScreenShot": false,
"Dir": "{dir}",
"Dir.Text": "{dir}"
}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": "Web",
"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}"
}This configuration defines the web page display: it sets the URL to be shown and allows hiding specific elements by their ID or name when the page loads.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Web.URL | URL | {url} | The URL of the web page to be displayed. |
| Web.HideByID | Array |
{hideByID} | List of element IDs on the web page to hide when loaded. |
| Web.HideByName | Array |
{hideByName} | List of element names on the web page to hide when loaded. |
Coding:
{
"@Type": "Web",
"Web.URL": "{url}",
"Web.HideByID": [],
"Web.HideByName": []
}This configuration defines the web error display: it sets the error text with customizable size, color, and style, shows an optional logo with adjustable size, and controls whether a progress indicator is displayed alongside the error message.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Web.Error.Text | String | {text} | The text to display when a web error occurs. |
| Web.Error.Text.Size | Number | 16 | Font size of the error text. |
| Web.Error.Text.Color | Color | {textColor} | Color of the error text. |
| Web.Error.Text.Style | TextStyle | {textStyle} | Text style for the error message (e.g., bold, italic). |
| Web.Error.Logo | Logo | {logo} | URL or path to an image/logo to show during an error. |
| Web.Error.Logo.Size | Number | 128 | Size of the error logo in pixels. |
| Web.Error.Progress.Show | Boolean | false | Whether to display a progress indicator along with the error. |
Coding:
{
"@Type": "Web",
"Web.Error.Text": "{text}",
"Web.Error.Text.Size": 16,
"Web.Error.Text.Color": "{textColor}",
"Web.Error.Text.Style": "{textStyle}",
"Web.Error.Logo": "{logo}",
"Web.Error.Logo.Size": 128,
"Web.Error.Progress.Show": false
}The AppNav.Show field is a Boolean that controls whether the navigation bar is visible or hidden in the application.
| Field | Type | Default Value | Description |
|---|---|---|---|
| AppNav.Show | Boolean | false | Controls whether the navigation bar is visible |
Coding:
{
"@Type": "Web",
"AppNav.Show": false
}This configuration defines the footer: it specifies the page displayed inside, controls its height, corner radius, and outer margin, plus the margin for the separator line.
| Field | Type | Default Value | Description |
|---|---|---|---|
| Footer.View | PageName | {pageName} | The Page that will be displayed inside the footer |
| Footer.Size | Number | 100 | Sets the height of the footer |
| Footer.Radius | Number | 0 | Sets the corner radius of the footer |
| Footer.Margin | Number | 0 | Defines the outer margin for the footer |
| Footer.MarginLine | Number | 0 | Defines the margin for the footer’s separator line |
Coding:
{
"@Type": "Web",
"Footer.View": "{pageName}",
"Footer.Size": 100,
"Footer.Radius": 0,
"Footer.Margin": 0,
"Footer.MarginLine": 0
}To see how to create this page in Applin Studio (no-code mode), visit:
Design the Web Page in Applin Studio