The Pages of Apps


Apps - Manage pages icon.png  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.
             Apps - Pages - Buttons Banner.png
  • 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

   Open url.png See Public mode.

ExamplePublicMode

Customer portal containing both public and private pages

  • Portal home page: public page
     Apps - Example portal - not connected.png
    • It displays corporate indicators and provides access to the service catalog and knowledge base.
    • Any user can access it without logging in. 
    • Users are identified as guests.
    • Data is displayed based on the Public profile and its configuration. The display remains identical, regardless of the user.
       
  • Portal page 2: private page
             Apps - Example portal - connected.png
    • It displays a dashboard with My Incidents. Logged-in users will see a list of their own incidents.
    • The logged-in user is shown in the user information zone Apps - Authentication zone.png.
    • The data is displayed based on the configuration of the logged-in user, i.e. the user's language, date and number formats and time zone.
       
  • Portal page 3: private page
    • It is used to submit requests for services.
    • The data displayed is based on the configuration of the logged-in user.

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. Open url.png 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.

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 replace the standard banner by a Menu widget. If this is the case, you should hide all pages.

example  IT Portal template app. The logo enables you to return to the home page.

Apps - Pages - Buttons Banner with widget Menu.png

Screen description

EVApps - GUI - Manage Pages.png

Apps - Add icon.png: Used to add a new page at the bottom of the list.

ev sas - Help icon.png: Used to open the contextual help page.

Box checked.png (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).

Apps - Edit icon.png: Used to display the contents of the selected page in the Design pane and open the Properties Inspector.   Open url.png See the properties description.

Apps - Public page icon.png Apps - Private page icon.png (Note: Only if a Public user is associated with the app): Used to indicate if it is a public Apps - Public page icon.png or private Apps - Private page icon.png page. Open url.png See Public mode.

Wheel icon.png: Used to open the contextual menu of the page.

  • Apps - Delete icon.png : Used to delete the selected page.
  • Apps - Duplicate 2 icon.png : Used to duplicate the selected page. It will have the same name followed by the word, (Copy).
     

Apps - Order objects icon.png: You can click and drag the pages to arrange them in the order you want.

Properties description

       EVApps - GUI - Inspector Properties Page.png

Access: Apps - Edit icon.png next to a 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
Pages as buttons.png Pages as menu.png
Property Description Representation
Element: Object to be formatted (1) Application Title: Title of the app Menu - Elements.png
(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 Graphic properties - General format.png
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 Apps - Logout icon.png

Logout Color (Inherit) (1) Inactive icon Menu - Logout icon off.png
Logout Color (hover) (Inherit) (2) Icon displayed on hover Menu - Logout icon on.png

Color of the outline surrounding the buttons

Active Menu Separator (Inherit) (1) Active button outline Menu - Separator.png
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 Object on hover.png
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)

Page - Background image.png
Apps - Upload icon.png

Download the image

Background Image Properties Image - Repeat Size Position properties - Dropdown list.png

Click the drop-down list to configure the image display using different options.

Image - Repeat Size Position properties.png
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 - Repeat property - No Repeat.png

Image repeated horizontally and vertically

Image - Repeat property - Repeat.png

Image repeated horizontally

Image - Repeat property - Repeat x.png

Image repeated vertically

Image - Repeat property - Repeat y.png

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 - Size property - Initial.png

Image adjusted to fit the height of the background while locking its aspect ratio

Image - Size property - Scale to fit.png

Image resized to fit the the height and width of the entire background. Note: A part of the image may be cropped.

Image - Size property - Scale to cover.png

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)

Page - Color inside outside.png
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.

Page - Header - Child page 1.png
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.

Page - Header - Child page 2.png
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.

Page - Footer - Child page.png

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).

Page - Background page on.png
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.

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
Page - Background page - Fixe position on.png Page - Background page - Fixe position off.png
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.

Page - Background page allow border.png
Shadow Color (Inherit)

Display a color watermark in the current video.

Page - Background page - Shadow color.png
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 Graphic properties - General format.png
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 Object on hover.png
Text Color On Hover (Inherit) (2) Color of the object title
Widget Height Default height of widgets in pixels. Widget - Minimal maximal height.png
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.

Open url.png 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

EVApps - widgets Properties - Theme - Header-Footer.png
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 Graphic properties - General format.png
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

EVApps - widgets Properties - Theme - Border style-color-size.png

Color (Inherit) Border color
Size (Inherit) Border width

Best Practice icon.png    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
EVApps - widgets Properties - Theme - Border corner.png

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)

EVApps - widgets Properties - Theme - Spread Negative.png

EVApps - widgets Properties - Theme - Spread Positive.png

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
EVApps - widgets Properties - Theme - Shadow Example A.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
EVApps - widgets Properties - Theme - Shadow Example B.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
EVApps - widgets Properties - Theme - Shadow Example C.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 0px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example D.png
  • Horizontal Position = -5px
  • Vertical Position = -5px
  • Blur Radial = 5px
  • Spread Distance = 5px
EVApps - widgets Properties - Theme - Shadow Example E.png
  • Horizontal Position = 0px
  • Vertical Position = 0px
  • Blur Radial = 5px
  • Spread Distance = 0px
EVApps - widgets Properties - Theme - Shadow Example F.png
  • 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 EVApps - widgets Properties - Theme - Padding.png
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 EVApps - widgets Properties - Theme - Margin.png
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 Graphic properties - General format.png
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 Apps - Manage pages icon.png in the Objects pane.

2. Select the method for creating the new page.

  • You can click Apps - Add icon.png to create a new page.
  • You can also use an existing page as a template:
    • Click Wheel icon.png.
    • Click Apps - Duplicate 2 icon.png 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 Apps - Drop-down list Pages.png.

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

Step 2: Specify the properties of the new page.

1. Click Apps - Edit icon.png.

2. Specify the graphic properties of the page in the Properties Inspector. Open url.png 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 Apps - Order objects icon.png.
The drop-down list Apps - Drop-down list Pages.png 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 EVApps - GUI - Execute icon.png.

How to manage public and private pages of an app

Step 1: Associate a user whose profile is Public.

1. Click Apps - Application properties icon.png 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 Apps - Manage pages icon.png 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 Apps - Public page icon.png to make a page private.
  • Click Apps - Private page icon.png to make a page public.

The modifications will automatically be saved.

Tags:
Last modified by Unknown User on 2020/03/24 12:40
Created by Administrator XWiki on 2014/09/02 11:36

Shortcuts

Recent changes
•  Service Manager
•  Service Apps
•  Self Help

Glossary

Powered by XWiki ©, EasyVista 2020