Pages are used to divide an app into sub-apps in order to group information. 

• By default, pages are automatically displayed as buttons in a banner at the top of the app.
           

• Each app has a home page that is the entry point for users.
• Each page has properties that are used to define its appearance and the visual aspect of widgets.
    

Pages can be as follows:

• Public page: This contains data accessible to all users with the app URL or shortcut, without requiring user authentication
• Private page: This contains data that requires user authentication

Example

     See Public mode.

ExamplePublicMode

Notes

• Link between objects in pages:
  • Data sources are available for all app pages.
  • Widgets in app pages are not linked to each other. 

• Home:
  • It is always placed at the top of the list of pages.
  • It cannot be hidden.
  • In execute mode, it is automatically displayed when users run the app.

• Each page can be hidden in execute mode using a property, except for the home page which is always visible.

• Management of public and private pages.  See Public mode.
  • You must associate a user whose profile is Public with the app.
  • By default, all of the pages are private, except for the home page which is automatically defined as a public page. This mode cannot be changed.
  • New pages are private by default.
  • If you move a private page to the top of the list to define it as your app home page, it will automatically become public.

• Most graphic properties of pages have an Inherit checkbox. This is used to manage inherited or context-specific properties.  See the principles of inheritance for graphic properties.

Caution

• When a page is deleted:
  • All of the widgets defined in the page will automatically be deleted. 
  • All of the data sources used in the page will remain available in the app library.

Best Practice

• To define direct access to another page in the app, you can use:
  • The Page widget that enables you to configure a navigation button that can be made up of text and images.
  • The text editor that enables you to insert a hyperlink.

• You can associate a theme with an app. In this case, the graphic properties of app pages will automatically inherit the properties defined for this theme.  See Properties of apps in the theme editor.

• You can replace the standard banner by a Menu widget. If this is the case, you should hide all pages.

Screen description

: Used to add a new page at the bottom of the list.

: Used to open the contextual help page.

: Search field used to filter pages by name.

 (Note: Except for the home page): Used to define if the page will be displayed in execute mode (box is checked) or hidden (box is not checked).

: Used to display the contents of the selected page in the Design pane and open the Properties Inspector.    See the properties description.

  (Note: Only if a Public user is associated with the app): Used to indicate if it is a public  or private  page.  See Public mode.

: Used to open the contextual menu of the page.

•  : Used to delete the selected page.
•  : Used to duplicate the selected page. It will have the same name followed by the word, (Copy).
   

: You can click and drag the pages to arrange them in the order you want.

Properties description

Access:  next to a page.

Run

Name of Display Page: Page name displayed after the app name in the Web browser tab title.

Note: If you do not specify this information, the tab title will display the page name in edit mode. By default, it is Page....

Menu

MenuProperties

Graphic properties of the menu in the top banner of the app (standard presentation when the pages appear as buttons).

Note: If you replace the standard presentation with a Menu widget, go to the Theme section > Cell Style to define the graphic properties of menu items used to access pages.

Standard presentation (buttons)	Presentation using the Menu widget

Property		Description	Representation
Element: Object to be formatted	(1)	Application Title: Title of the app
	(2)	Menu (Active): Active button
	(3)	Menu: Inactive buttons
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor
Color of the logout icon
Logout Color (Inherit)	(1)	Inactive icon
Logout Color (hover) (Inherit)	(2)	Icon displayed on hover
Color of the outline surrounding the buttons
Active Menu Separator (Inherit)	(1)	Active button outline
Menu Separator (Inherit)	(2)	Inactive button outline
ColorOnHover When you move the cursor over the title of the object: Background Color On Hover (Inherit) (1) Background color of the object Text Color On Hover (Inherit) (2) Color of the object title

EndMenuProperties

Page

Background Image

Background image in the page.

Property		Description	Display
Background Image / Background Image (mobile)		Background image on a traditional screen or on a small device screen (smartphone)
		Download the image
Background Image Properties		Click the drop-down list to configure the image display using different options.
Image display options BackgroundImageProperties Repeat: Used to define the way in which the image is repeated in the background. no-repeat repeat repeat-x repeat-y Image not repeated Image repeated horizontally and vertically Image repeated horizontally Image repeated vertically The image is repeated as many times as required to cover the entire background. The last image is cropped if required. Size: Used to define the size of the image. Initial size Scale to fit Scale to cover Original size Image adjusted to fit the height of the background while locking its aspect ratio Image resized to fit the the height and width of the entire background. Note: A part of the image may be cropped. Position (H/V): Used to define the position of the image in the background. The first value defines the horizontal position of the image as regards the left, right or center. The second value defines the vertical position of the image as regards the top, bottom or center. If the image is repeated in the background (i.e. Repeat = repeat), then Position will have an impact on the layout of the repeated image.

PageProperties_WidthColor

Width / Color properties

Width and color of the page.

Property		Description	Representation
Max Width (Inherit)	Maximum width of the page
Color of the page
Inside Color (Inherit)	(1)	For the main section (= Maximum width of the page - Max Width property)
Outside Color (Inherit)	(2)	In the outer section

EndPageProperties_WidthColor

Header Page

Header displayed from a child page.

• The page header appears in the foreground of content in the parent page.
• Parent pages and child pages cannot call themselves.
• The entire child page is selected. You cannot select a specific zone in it.
• To improve performance, called pages are not visible in the graphic editor. They are visible only in execute mode.
   

Property		Description	Display
Display Header Page		Used to indicate if a child page should be displayed at the top of the page (box is checked) or not (box is not checked).
Header Page		Child page called by the parent page. It will appear at the top of the parent page.
Change Page When Scrolling		Used to indicate if the current child page will be replaced by a second child page when users scroll down the parent page (box is checked) or not (box is not checked).
Page Displayed When Scrolling		Second child page displayed when users scroll down the parent page. The second child page will replace the first child page.
Scroll Distance		Scroll distance after which the second child page will replace the first child page.

Footer Page

Footer displayed from a child page.

• The page footer appears in the foreground of content in the parent page.
• Parent pages and child pages cannot call themselves.
• The entire child page is selected. You cannot select a specific zone in it.
• To improve performance, called pages are not visible in the graphic editor. They are visible only in execute mode.
   

Property		Description	Display
Display Footer Page		Used to indicate if a child page should be displayed at the bottom of the page (box is checked) or not (box is not checked).
Footer Page		Child page called by the parent page. It will appear at the bottom of the parent page.

Background Page

Video or playlist (series of videos) in the page background.

• Videos loop automatically once they reach the end. Once the last video in a playlist has reached the end, the first video will start playing again.
• Videos will automatically occupy the entire width and height of the screen. The width and height are automatically adjusted based on the screen size.
• Videos must have an aspect ratio of 16:9 to avoid the display of black borders.
   

Property		Description	Display
Display Background		Used to indicate if the video or playlist should be displayed in the background (box is checked) or not (box is not checked).
Is playlist		Used to indicate whether the background comprises a playlist (box is checked) or a single video (box is not checked).
Base Url		URL of the video or playlist via a YouTube link. See the procedure How to insert a video or playlist in the page background.
Position Fixe		Used to indicate if the video currently being played should remain in the background when users scroll down the page (box is checked) or if it should disappear when users scroll down (box is not checked).	Fixed position Standard position
Allow Border		Used to indicate if the video currently being played should be surrounded by a border (box is checked) or not (box is not checked). You can define the type of border, e.g. style, color, size.
Shadow Color (Inherit)		Display a color watermark in the current video.
Opacity (Inherit)		Opacity level of the color watermark. You can select it using the slider or enter it directly in the field. The higher the opacity level, the more the color will be visible.

Widgets

Properties applied to all widgets in the page.

WidgetsGeneralProperties

General properties

Property		Description	Representation
Element: Object to format		Widget:
		Selection (Active):
		Selection (Secondary):
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor
ColorOnHover When you move the cursor over the title of the object: Background Color On Hover (Inherit) (1) Background color of the object Text Color On Hover (Inherit) (2) Color of the object title
Widget Height		Default height of widgets in pixels.
Widget Minimal Height		Minimum height of widgets in pixels. Widgets cannot be resized less than this height.
Widget Maximum Height		Maximum height of widgets in pixels. Widgets cannot be resized greater than this height.
Enable Entry Animation		Used to indicate if an animation is available for the widget (box is checked) or not (box is not checked). If there is an animation, it will run each time the page is loaded. See How to define an animation for a widget .	example   Display the widget with a fade effect when the page is loaded.

EndWidgetsGeneralProperties

Header / Footer

HeaderFooter_CommonProperties

Properties of the widgets header and footer.

(1)   Header section: Properties of the widgets header (2)   Footer section: Properties of the widgets footer

Property		Description	Representation
Height (Inherit)		Height of the element in pixels
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor

Border

Border_CommonProperties

Properties for formatting borders around the widget

Property		Description	Representation
Style (Inherit)		Border style, e.g. dotted, solid line, double solid line
Color (Inherit)		Border color
Size (Inherit)		Border width
Define the general properties of all borders (1). You can then define the properties specific to each border if required (2): Top: Top border Bottom: Bottom border Left: Left border Right: Right border
Radius (Inherit)		Rounded corners for the border in pixels: Top Corner Left: Top left corner Top Corner Right: Top right corner Bottom Corner Left: Bottom left corner Bottom Corner Right: Bottom right corner
Notes :
Enter 0 if you want the corner of the border to be a right angle (1). The higher the value, the more rounded the corner (2).

Box Shadow

BoxShadow_CommonProperties

Properties for formatting the shadow of the widget border

Note: Not applicable to Breadcrumbs widgets.

Property		Description	Representation
Horizontal Position		Width of the shadow starting from the left (negative value) or from the right (positive value) of the widget border
Vertical Position		Width of the shadow starting from the top (negative value) or from the bottom (positive value) of the widget border
Blur Radial		Intensity of the blur applied to the shadow
Spread Distance		Distance of the shadow from the widget border	Negative value (- 40 px) Positive value (40 px)
Color (Inherit)		Color of the shadow
Opacity		Transparency of the shadow (the higher the value, the more visible the shadow)

Examples of shadow settings

Example	Setting		Example	Setting
	Horizontal Position = -5px Vertical Position = -5px			Horizontal Position = -5px Vertical Position = -5px Blur Radial = 5px
	Horizontal Position = -5px Vertical Position = -5px Blur Radial = 0px Spread Distance = 5px			Horizontal Position = -5px Vertical Position = -5px Blur Radial = 5px Spread Distance = 5px
	Horizontal Position = 0px Vertical Position = 0px Blur Radial = 5px Spread Distance = 0px			Horizontal Position = 0px Vertical Position = 0px Blur Radial = 5px Spread Distance = 5px

Padding

Padding_CommonProperties

Padding between the widget content and its border

Property		Description	Representation
Padding Top (Inherit)	(1)	Padding between the top edge of the widget content and the widget's top border
Padding Bottom (Inherit)	(2)	Padding between the bottom edge of the widget content and the widget's bottom border
Padding Left (Inherit)	(3)	Padding between the left edge of the widget content and the widget's left border
Padding Right (Inherit)	(4)	Padding between the right edge of the widget content and the widget's right border

Margin

Margin_CommonProperties

Widget margins as regards its position (row/column)

Note: Not applicable to Breadcrumbs widgets.

Property		Description	Representation
Margin Top (Inherit)	(1)	Distance between the top edge of the row in which the widget is positioned and the widget's top border
Margin Bottom (Inherit)	(2)	Distance between the bottom edge of the row in which the widget is positioned and the widget's bottom border
Margin Left (Inherit)	(3)	Distance between the left edge of the column in which the widget is positioned and the widget's left border
Margin Right (Inherit)	(4)	Distance between the right edge of the column in which the widget is positioned and the widget's right border

Fonts

Properties of HTML tags for styles applied to all widgets in the page.

Property		Description	Representation
Element: Object to format		Body: Style for the text body
		Normal {p}: Normal style
		Preformatted {pre}: Style for preformatted text
		Title 1 {H1} to Title 6 {H6}: Six header styles
Graphic properties of the selected object PageGeneralFormat Font Family (Inherit) Font of the text, selected via Select Font Size Font size, selected via the slide or specified directly in the field Alignment (Inherit) Alignment of the text (Left/Center/Right/Justified) Style (Inherit) Font style of the text Bold/Italic/Underline) Background Color (Inherit) Background color of the widget Text Color (Inherit) Color of the text displayed by the widget Note: Priority is given to the font and color defined using the text editor

Procedures

How to create a page

Step 1: Add a new page.

1. Click  in the Objects pane.

2. Select the method for creating the new page.

• You can click  to create a new page.

• You can also use an existing page as a template:
  • Click .
  • Click Duplicate in the contextual menu.
    It will have the same name followed by the word, (Copy).

The new page will be added at the bottom of the list of pages and to the drop-down list .

3. Rename the page so you can easily identify its contents.

Step 2: Specify the properties of the new page.

1. Click .

2. Specify the graphic properties of the page in the Properties Inspector.  See the properties description.
Modifications will automatically be taken into account and displayed in the Design pane.

Step 3 (optional): Modify the order of the pages.

1. Click and drag the page to its new position using .
The drop-down list  will automatically be reorganized.

Step 4 (optional): Define the visibility of the page in execute mode.

1. You can show or hide the page in execute mode by selecting or unselecting the box next to each page.

Step 5: Test the page configuration.

1. Execute the app via .

How to insert a video or playlist in the page background

Step 1: Recover the video or playlist URL in YouTube.

1. Display the YouTube video or playlist you want.

2. Click Share below the video.
The video share box will appear.

3. Click Embed.
         

4. Copy the the video or playlist URL. You should keep only the text displayed in yellow below.

Step 2: Insert the video or playlist in the page background.

1. Click  in the Objects pane. Then display the page properties via .

2. Insert the video or playlist in the page background.

• Go to the Page > Background Page section.
• Check the Display Background box.
• Paste the video or playlist URL in the Base Url field.
• Check the Is Playlist box if this is a playlist.
• Set up the various options you want: border, color watermark, opacity.  See the description.

How to manage public and private pages of an app

Step 1: Associate a user whose profile is Public.

1. Click  to access the general properties.

2. Select the relevant user from the Choose a public User list.

Step 2: Specify the type of access for the page.

1. Click  in the Objects pane.
The list of existing app pages will appear.

2. Specify the type of access for the page.
Note: The home page will always be a public page. You can not modify its type of access.

• Click  to make a page private.
• Click  to make a page public.

The modifications will automatically be saved.