Main

Main pages function as the primary landing or dashboard within an app, designed to aggregate key content, provide navigation, and offer quick access to other pages. They act as the central hub, ensuring users can easily find essential information and move seamlessly through different sections of 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	"Main"	Specifies the page type as a main 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": "Main",

  "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": "Main",

  "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}"
}

Main Center

This configuration defines the Main.Center property: it is a Boolean field that controls whether the main content of the page is centered. By default, the value is set to false, meaning the content will align according to the standard layout unless explicitly changed to true.

Field Name	Type	Default Value	Description
Main.Center	Boolean	false	Determines if the main content should be centered on the page.

Coding:

{
  "@Type": "Main",

  "Main.Center": false
}

Nav

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": "Main",

  "AppNav.Show": false
}

Footer

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": "Main",

  "Footer.View": "{pageName}",
  "Footer.Size": 100,
  "Footer.Radius": 0,
  "Footer.Margin": 0,
  "Footer.MarginLine": 0
}

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.

Coding:

{
  "@Type": "Main",

  "Elements": [

  ]
}

🔗 Visual Version

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