Profile

Profile pages are designed to manage user-specific information, presenting personal data, a profile avatar, and editable settings. This ensures users can easily view and update their details while maintaining a personalized experience within the app.

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	"Profile"	Specifies the page type as a profile 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": "Profile",

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

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

Profile

This configuration defines the Profile page: it specifies the profile image with adjustable size, the name with customizable color, font size, and style, and the email address with similar styling options. Together, these fields create a structured and personalized profile view inside the app.

Field Name	Type	Default Value	Description
@Type	PageName	"Profile"	Defines the element type as a Profile.
Profile.Logo	URL	{logo}	URL or path of the profile image.
Profile.Logo.Size	Number	128	Sets the size of the profile image.
Profile.Name	Name	{name}	Displays the profile's name.
Profile.Name.Color	String	{nameColor}	Sets the color of the profile name text.
Profile.Name.Size	Number	22	Sets the font size of the profile name.
Profile.Name.Style	String	{nameStyle}	Sets the text style (e.g., bold/italic) for the profile name.
Profile.Email	Email	{email}	Displays the profile's email address.
Profile.Email.Color	String	{emailColor}	Sets the color of the profile email text.
Profile.Email.Size	Number	22	Sets the font size of the profile email.
Profile.Email.Style	String	{emailStyle}	Sets the text style (e.g., bold/italic) for the profile email.

Coding:

{
  "@Type": "Profile",

  "Profile.Logo": "{logo}",
  "Profile.Logo.Size": 128,
  "Profile.Name": "{name}",
  "Profile.Name.Color": "{nameColor}",
  "Profile.Name.Size": 22,
  "Profile.Name.Style": "{nameStyle}",
  "Profile.Email": "{email}",
  "Profile.Email.Color": "{emailColor}",
  "Profile.Email.Size": 22,
  "Profile.Email.Style": "{emailStyle}"
}

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

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

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

  "Elements": [

  ]
}

🔗 Visual Version

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