Page

Projects are organized in pages. There are three types of pages: page, overlay, and popup.

Page IDs are always automatically prefixed with "page:", so to set an attribute with a UISet, use the full id (ex. "page:menu").

If a page is set as Home Page in the project's attribute, it's the first page that appears when the UI is opened.

Two versions of the same page can be created using the same page ID, one for portrait and one for landscape. When the device orientation changes, the UI navigates to the corresponding page. Objects that show the same value on both versions can share an ID, so one UISet updates both.

Each page can be protected with a password, and can be assigned to one or more locations.

Pages are part of the navigation stack, so they appear in the breadcrumb and can be navigated to.

Follow this tutorial for more detailed info:

Create your first project with HSYCO

Attributes

Common

ID

Sets the object's ID.

The ID identifies the object and is used to reference it in UISet actions, allowing to change its attributes dynamically.

The ID is not unique, it can be shared among multiple objects to quickly change a common attribute.

IDs can't be changed with a UISet action, but they can have a Value Binding assigned to them. Value Bindings on IDs allow an object to be dynamically attached to a set of attribute values.

E.g. the following Value Binding switches the ID of the object between mybutton1 and mybutton2 based on the value of the UISet button.address:

Value binding:

"mybutton" + ui('button', 'address')

UISet:

UISet('button', 'address', '1') switches the ID to mybutton1

UISet('button', 'address', '2') switches the ID to mybutton2

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Page

Title

The page's title. Appears in the UI header and breadcrumb.

Attribute Values

Value	Description
<String>	Page title.

Orientation

Specifies the device orientation associated to the page. When the device orientation changes, the UI navigates to a page with the same ID as the current one, but with the corresponding orientation, if there's one.

Attribute Values

Value	Description
landscape	Default value. Landscape orientation.
portrait	Portrait orientation.

This attribute is available when project's orientationmode is "true".

The default value is: landscape.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Navigation

Overlay

Specified the id of an overlay or "none" if no overlay should appear on top of this page.

Attribute Values

Value	Description
none	No overlay will appear on top of this page.
<Overlay ID>	ID of an overlay that appears on top of this page.

The default value is: default.

Parent Page

Specifies the ID of another page. Sets the page as the children of the specified parent page. Used to identify hierarchy in nav and breadcrumb objects.

Attribute Values

Value	Description
<Page ID>	The parent page's ID.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Portrait Page

Specifies the ID of a portrait page that is shown when the device orientation changes to portrait.

Attribute Values

Value	Description
<Page ID>	The portrait page's ID.

This attribute is available when project's orientationmode is "true" and orientation is "landscape".

When project's orientationmode is "true" and orientation is "landscape", this attribute defaults to the id attribute.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Landscape Page

Specifies the ID of a landscape page that is shown when the device orientation changes to landscape.

Attribute Values

Value	Description
<Page ID>	The landscape page's ID.

This attribute is available when project's orientationmode is "true" and orientation is "portrait".

When project's orientationmode is "true" and orientation is "portrait", this attribute defaults to the id attribute.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Options

Protected

If true, the user must enter their PIN or password again to open the page. It doesn't restrict the page to specific users.

Attribute Values

Value	Description
false	Default value. Page is not protected.
true	Page is protected.

The default value is: false.

Focus

Specifies the ID of a field that gains autofocus if the page is open or whenever the page is opened.

Attribute Values

Value	Description
<ID>	Target ID of the field to focus.

History

Specifies whether the page is added to the history stack when opened.

Useful for pages that are opened from a link or command, but shouldn't be added to the history stack.

Attribute Values

Value	Description
true	Default value. Page is added to the history stack.
false	Page is not added to the history stack.

The default value is: true.

Transition

Specifies the transition animation when opening the page.

It's only available when the project's Page Transitions attribute is set to true.

Attribute Values

Value	Description
auto	Default value. Auto, based on history and Parent Page.
none	No animation.
back	Fade and slide from left.
forward	Fade and slide from right.
up	Fade and slide from bottom.
down	Fade and slide from top.

The default value is: auto.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Locations

Locations assigned to this page.

Attribute Values

Value	Description
<List of locations>	Comma-separated list of locations.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Gestures

Comma separated list of gestures assigned to the page.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Scope

Specifies a scope.

If set, uiSets with the same scope will be enabled.

The scope is defined by the project's scope, plus the scope of the current page.

Attribute Values

Value	Description
<string>	The name of a scope.
<list>	A comma-separated list of scopes.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Heartbeat

Specifies the frequency in seconds at which a heartbeat command is sent to the server. This command serves to indicate that the user is still active on the page, and is primarily used to monitor user activity on the server side.

When set to 0, no heartbeat command will be sent. When the user closes the page, the heartbeat command will cease.

The default command's name and parameters are:

• name: <project id>
• parameter: hearbeat/<page id> or, if the project is orientation-enabled:
• parameter: hearbeat/<page id>#<orientation>

Command Name and parameters can be changed with the following attributes: Hearbeat name, hearbeat parameter.

Attribute Values

Value	Description
0	Default value. No heartbeat.
<int>	Hearbeat frequency in seconds.

The default value is: 0.

Heartbeat Name

Specifies the name of the heartbeat command.

Attribute Values

Value	Description
<string>	Hearbeat command's name.

This attribute is available when heartbeat is not "0".

When heartbeat is not "0", this attribute defaults to the project's id attribute.

Heartbeat Parameter

Specifies the parameter of the heartbeat command.

Attribute Values

Value	Description
<string>	Hearbeat command's parameter.

This attribute is available when heartbeat is not "0".

When heartbeat is not "0", this attribute defaults to the template heartbeat/{id}, replacing id with the id attribute.

Background

Background Color

Specifies a background color that covers the area behind the page.

Background Image

Specifies an image to show as page background.

Attribute Values

Value	Description
<image path>	Path to the image file. Files are searched inside the project's directory first, then inside the www/img directory.

Background Fit

Specifies how the image should be resized to fit its container.

Attribute Values

Value	Description
fill	The image is resized to fill the given dimension. If necessary, the image will be stretched or squished to fit.
contain	The image keeps its aspect ratio, but is resized to fit within the given dimension.
cover	Default value. The image keeps its aspect ratio and fills the given dimension. The image will be clipped to fit.
none	The image is not resized.

This attribute is available when backgroundimage is neither "" nor "icon:%".

When backgroundimage is neither "" nor "icon:%", this attribute defaults to cover.

Meta

Comment

Specifies a comment, visible only in the Project Editor. It can be used to add a note or a tag to the object. The filter in the object's SELECT panel applies to the comment as well.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.

Exclude

Excludes the object from the UI. Useful to temporarily hide an object without deleting it. Different from the "Visible" attribute, which hides the object in the UI but keeps it in the project, allowing it to be shown again with a UISet.

Attribute Values

Value	Description
false	Default value. Object is included in the UI.
true	Object is excluded from the UI.

The default value is: false.

note

This attribute is static. Its value can't be changed dynamically with a uiSet command or with a value binding.