Listing pages are designed to display data in a structured list format, typically supporting features like filtering, searching, and clickable items for viewing detailed information. This layout makes it easier for users to browse, organize, and interact with large sets of content efficiently within the app.
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 | "Listing" | Specifies the page type as a listing 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 |
Coding:
{
"@Type": "Listing",
"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": "Listing",
"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 search bar settings for a Listing page: it includes Title.Search.Show to enable or disable the search bar, Title.Search.Logo to set the search icon, and Title.Search.Hint to provide placeholder text for the search input. These fields allow customization of how search functionality is presented within the listing.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Title.Search.Show | Boolean | false | Enables or disables the search bar in the listing. |
| Title.Search.Logo | Logo | {searchLogo} | Sets the search icon displayed in the search bar. |
| Title.Search.Hint | String | {searchHint} | Provides the placeholder hNumber text for the search input. |
Coding:
{
"@Type": "Listing",
"Title.Search.Show": false,
"Title.Search.Logo": "{searchLogo}",
"Title.Search.Hint": "{searchHint}"
}This configuration defines the empty state of a Listing page: it includes Empty.Text with customizable content, color, size, and style, as well as an Empty.Logo with adjustable image size. These fields ensure that when no items are available, the page still provides a clear and styled placeholder message along with an optional logo or image.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Empty.Text | String | {text} | The text shown when the listing has no items. |
| Empty.Text.Color | Color | {textColor} | Sets the color of the empty state text. |
| Empty.Text.Size | Number | 20 | Determines the font size of the empty state text. |
| Empty.Text.Style | TextStyle | {textStyle} | Defines the text style (e.g., bold, italic) of the empty state text. |
| Empty.Logo | Logo | {logo} | Image displayed when the listing is empty. |
| Empty.Logo.Size | Number | 64 | Sets the size of the empty state logo/image. |
Coding:
{
"@Type": "Listing",
"Empty.Text": "{text}",
"Empty.Text.Color": "{textColor}",
"Empty.Text.Size": 20,
"Empty.Text.Style": "{textStyle}",
"Empty.Logo": "{logo}",
"Empty.Logo.Size": 64
}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": "Listing",
"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": "Listing",
"Footer.View": "{pageName}",
"Footer.Size": 100,
"Footer.Radius": 0,
"Footer.Margin": 0,
"Footer.MarginLine": 0
}This configuration defines the Listing page: it includes an Elements array for child components and an Items array for item objects to be displayed. These fields structure how listings are organized and presented within the app, ensuring both components and content are managed consistently.
| Field Name | Type | Default Value | Description |
|---|---|---|---|
| Elements | Array |
[] | Array of child elements (components) within the listing. |
| Items | Array |
[] | Array of item objects to be displayed inside the listing. |
Coding:
{
"@Type": "Listing",
"Elements": [
],
"Items": [
]
}To see how to create this page in Applin Studio (no-code mode), visit:
Design the Listing Page in Applin Studio