New page functionality: Footer Page

This new functionality is used to call a child page and anchor it at the bottom of the current parent page in the foreground.

• The property is available in the global properties of each page.
• By default, the child page is displayed in a fixed position at the bottom of the parent page in the foreground.

Benefits

• The Footer Page functionality is used to display elements in a fixed position.
• Using the Footer Page functionality enables you to restrict the number of elements that are recurrently created in app pages and reduce the number of pages to be maintained.
• This helps improve performance.

Operating principle

(1) The Footer Page functionality is enabled in parent page B and it displays child page A at the bottom.

(2) Another child page C is called by page B and placed at the bottom of the screen.

(3) Although the structure of the app indicates that it is positioned at the bottom, page C will always be found beneath page A when users scroll down parent page B.

Note: To improve performance, called pages are not visible in the graphic editor. They are visible only in execute mode.

Properties of the Footer Page functionality

You can display the properties by checking the Display Footer Page box.

Footer Page: Child page called by the parent page. It will appear at the bottom of the parent page.

Note

The entire child page is selected. You cannot select a specific zone in it.

A child page can be the parent page of another page.

Parent pages and child pages cannot call themselves.

New page functionality: Background Page

This new functionality enables you to add a video to the background of the current page.

• The functionality is available in the global properties of each page.
• You insert the video via a YouTube link.
• You can also insert a playlist.
• You can configure the video using several options.

Benefits

• The background video is an alternative to the background image.
• A playlist enables you to play a series of videos one after the other.

Operating principle

You can display the video or playlist in two ways.

Standard position
         

(1) The Background Page functionality is enabled for the current page B. Object A is the video or playlist added to the properties of page B.

(2) When users scroll down page B, video or playlist A will disappear.

Fixed position (parallax effect)
         

(1) The Background Page functionality is enabled for the current page B. Object A is the video or playlist added to the properties of page B.

(2) Object C, which can be a child page or widget, etc. is called by page B. When users scroll down page B, object C will appear above video or playlist A. Video or playlist A will remain in the background.

Properties of the Background Page functionality

You can display the properties by checking the Display Background box.

Is playlist: Check the box to insert a series of videos in a playlist. Base Url: URL of the video or playlist. Position Fixe: Used to indicate if the video currently being played should remain in the background when users scroll down the page. Allow Border: Used to indicate if the video currently being played should be surrounded by a border. You can customize the style, size and color of the border. Shadow Color: Used to display a color watermark in the current video. You can define the opacity level of the color watermark.

Note

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.

What's new in the core 2.1.2

• Management of child pages called by a parent page. Review of the processes to avoid infinite looping, e.g. page A calls page B which contains page A.

• Improvement of the trusted provider. The concept of tenant alias is now taken into consideration.

• Optimized selection of pages in headers and footers. Once a page is selected in one of the two sections, it will no longer be available for the other section.

• Management of the display of popups in the graphic editor. Users can now access functionalities for adding an image, background image and typeface.

• Improved alignment of the deletion and duplication icons in the Objects pane for data sources and widgets.
           

• SVG tags in the browser console are now managed in new graphic widgets such as Advanced Sidebar, Tag Cloud, etc.

• Self Help connectors for deploying virtual agents are now imported when an app is imported.

What's new in templates

Web content accessibility

Web content accessibility guidelines have now been applied to Service Apps.

These guidelines aim at making Web content more usable to users in general, and making it more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations.

To apply these guidelines, several elements have been added to templates.

• Contrast management: revamping of the colors for different page elements, buttons, popups, etc.
• Organization of information using headings and sub-headings, etc.
• Addition of alternative text for images when they cannot be viewed.

Modifiable fonts and colors

You can now easily modify background colors as well as font colors and sizes for all template elements using the dedicated __ROOT widget. The modifications you make can then be applied in one go, using variables, to all of the widgets in the template.

Operating principle

• A new widget called __ROOT is now available in each template. Note: You can only modify its properties using the Properties Inspector. It cannot be moved to the Design pane.
           

• You can easily modify the widget contents in the HTML editor. All of the graphic elements in the template relating to font color, font size and background color are defined within <style> tags.

• Each widget in the template can call a property from the __ROOT widget using a variable.

What's new in the core 2.1

PHP 7.3 supported

• PHP 7.3 is now supported.

• PHP 7.2 is still supported.

Improved trusted provider: profile management

You can now use the trusted provider, when required, to define the Service Apps profile of the logged-in user when you implement the PHP function called apps_trusted_provider_profile.

           To find out more about the technical details, see the sample files shipped with the trusted provider.

Improved trusted provider: authentication

In the event of a connection error, an error message can now be returned when you implement the PHP function called apps_trusted_provider_getErrorMessage.

           To find out more about the technical details, see the sample files shipped with the trusted provider.

Integration of user language in Service Apps

The language of the logged-in user is now accessible via the userLanguage property of the EVServiceApps JavaScript object.

Administration of team management

Teams are sorted in alphabetical order when displayed in the grid.

You can also search for a team.

Web content accessibility

Web content accessibility guidelines have now been applied to Service Apps.

These guidelines aim at making Web content more usable to users in general, and making it more accessible to a wider range of people with disabilities, including accommodations for blindness and low vision, deafness and hearing loss, limited movement, speech disabilities, photosensitivity, and combinations of these, and some accommodation for learning disabilities and cognitive limitations.

Overall accessibility

Mandatory elements

• The logged-in user's language is displayed on the page.
• The reading order direction is visible: from left to right or from right to left.
• The page title is displayed in the tab. This corresponds to the name of the page in Service Apps.

Contrast ratio in Service Apps

• Default colors in Service Apps have been reviewed to meet WCAG level AA requirements.
  • Validate and Cancel buttons in popup windows.
  • Titles of popup windows.
  • Notification windows for ticket creation.

Keyboard navigation

• Keyboard navigation is possible using the Pagelink and Pagepopup links.
• A Title attribute is used to warn users when a popup is open.
• The focus is visible for buttons used to open and close windows.

EZV buttons

• Keyboard navigation is possible for EZV buttons, e.g. New Ticket, New Request, etc.

Accessibility to widgets

Search Filter

• Addition of alternative text for the data entry field.
• Addition of alternative text for the Validate button or for the magnifying glass icon in the search.
• The focus is visible for the magnifying glass icon.
• The focus is visible for the cross icon in the search.

Tab

• Keyboard navigation is possible in tabs using the <Tabulation> key.

Filter list

• Keyboard navigation is possible for all modes (Horizontal, Vertical, List).

Logout

• Keyboard navigation is possible for all elements, including in the widget popup window.
• The focus is visible for all elements.

Discussion

• Keyboard navigation is possible for all elements.
• The focus is visible for all elements.

Menu

• You can press <Alt> to access all Menu widget icons.
• Keyboard navigation is possible for all menu links.

Link between Service Apps and Service Manager

A new functionality enables you to switch from one Service Apps app embedded in Service Manager to a Service Manager screen via an icon or text link.

Operating principle

From the app embedded in Service Manager, data is retrieved by a widget pointing to an EasyVista data source.

• You configure the link between Service Apps and Service Manager using the Display evSE Link property in the Header section of the widget. By default, the property is disabled.

• When the property is enabled, the  icon will appear on the Service Manager screen.

• You configure the link in the Service Apps app using the Evse Link property of the widget that displays data.  enables you to access the HTML editor to configure it.

Note

• The link is possible only for widgets with an EasyVista data source.
• You can display the details of the link only for users with the appropriate display rights.
• The Evse Link property is taken into account only if the Header > Display property is selected.

New widgets 2.1

Embedded Page widget

 This new widget belongs to the Basic category in the widget library. It enables an app page, i.e. the parent page, to call another page in the same app, i.e. the child page. The child page will be displayed within the parent page. The aim is to group sets of child pages called directly in parent pages in order to restrict the number of duplicate elements.

Benefits

• Using the Embedded Page widget enables you to restrict the number of elements that are recurrently created in app pages and reduce the number of pages to be maintained.
• This helps improve performance.

Operating principle

(1) A, B and C are three pages created in an app.

(2) Page B is made up of two child pages, A and C.

(3) Page A is made up of two child pages, D and C.

(4) Page A (with child pages D and C) is called by parent page B. It will thus become the child page of page B.

Rules

• A parent page can be the child page of another page.

• A page can be the child page of several parent pages. This facilitates the maintenance of pages.

• Although a given child page may be called several times in a page, it will only be loaded once.

Note: To improve performance, child pages are not visible in the graphic editor. They are visible only in execute mode.

Widget properties

Content: Child page to be displayed in the current page. The icon is used to switch directly to the child page in edit mode. Theme: Theme applied to the Embedded Page widget. The child page has its own theme.

Note

• Properties in the Theme section are identical to those in other widgets. The Embedded Page widget does not have any specific properties.
• The entire child page is selected. You cannot select a specific zone in it.
• Parent pages and child pages cannot call themselves.

Sidebar widget

 This new widget belongs to the Basic category in the widget library. It enables an app page, i.e. the parent page, to call another page in the same app, i.e. the child page. The child page will be displayed in a horizontal or vertical pane.

Benefits

• Using the Sidebar widget enables you to restrict the number of elements that are recurrently created in app pages and reduce the number of pages to be maintained.
• This helps improve performance.

Operating principle

(1) Page B is the current page in which a button for calling page A is located.

When users click the button, child page A will appear in the current page B. The child page will be called indirectly and will not be anchored in the parent page.

• (2) Display in a horizontal pane.
• (3) Display in a vertical pane.

Note: To improve performance, child pages are not visible in the graphic editor. They are visible only in execute mode.

Widget properties

Content: Used to configure the child page. Page: Child page called by the current page. The icon is used to switch directly to the child page in edit mode. Direction: Direction and opening of the pane, i.e. horizontal, from left to right or from right to left, or vertical, from top to bottom or from bottom to top. Open Button: Text button or icon button for opening the pane. enables you to access the HTML editor to configure it. Close Button: Text button or icon button for closing the pane. enables you to access the HTML editor to configure it. Width: Size of the pane displaying the child page, in pixels or as a percentage. Active Shadow : Used to indicate if a background color is applied to the parent page to highlight the child page. You can select the color and its opacity. Theme: Theme applied to the Sidebar widget.

Note

• Properties in the Theme section are identical to those in other widgets. The Sidebar widget does not have any specific properties.
• The entire child page is selected. You cannot select a specific zone in it.
• Parent pages and child pages cannot call themselves.

New page functionality: Page Header

This new functionality is used to call a child page and anchor it at the top of the current parent page in the foreground.

• The functionality is available in the global properties of each page.
• A new child page can replace the current child page when users scroll down using the mouse.

Benefits

• The Page Header functionality is used to display elements in a fixed position.
• Using the Page Header functionality enables you to restrict the number of elements that are recurrently created in app pages and reduce the number of pages to be maintained.
• This helps improve performance.

Operating principle

(1) The Page Header functionality is enabled in parent page B and it displays child page A at the top.

(2) Another child page C is called by page B. Although the structure of the app indicates that it is positioned at the top, page C will always be found below page A when users scroll down using the mouse.

(3) A new child page D is displayed when users scroll down using the mouse. After a specified scroll distance, child page D will replace child page A at the top of the screen.

Note: To improve performance, child pages are not visible in the graphic editor. They are visible only in execute mode.

Some of the Page Header functionality properties

Properties will be displayed by checking the Display Header Page box.

Header Page: Child page called by the parent page that will be positionned at the top of the parent page. Page Displayed When Scrolling: Second child page to be displayed when users scroll down using the mouse. It will replace the first child page. You can specify the scroll distance after which this child page will replace the first page.

Note

• Parent pages and child pages cannot call themselves.
• The entire child page is selected. You cannot select a specific zone in it.

Service Bots and Self Help

Customer-specific information (name of the domain, server address, etc.) is now extracted from Service Apps apps and placed in connectors. In addition:

• Self Help connectors can now be used to specify the Self Help project ID.
• A new Service Bots connector has been created to define the virtual agent reference to be used in apps.

Benefits

• Defining customer-specific information in connectors enables you to modify it in a single spot. You no longer need to do this in each page of the app.
• This also makes it easier to move from a production environment to a preproduction environment using aliases.

Properties of new Service Bots connectors

The EasyVista Virtual Agent data source no longer points to a Self Help connector. Instead, it now points to a Service Bots connector.

(1) Create a new Service Bots connector.

(2) Enter the virtual agent reference previously found in the Virtual Agent widget.

(3) Specify the Public Account field. This is the Self Help connection account previously found in the EasyVista Self Help data source.

Properties of Self Help connectors

Two properties have been moved from the EasyVista Self Help data source to the connector.

(1) Project ID or Alias: ID of the Self Help project or procedure to be run.

(2) Connection Account: Self Help connection account.

New properties of the Virtual Agent widget

Properties are now grouped in two sections to facilitate access and configuration.

• (1) Configuration of the conversation panel.

• (2) Configuration of the call button.

New widgets 2.0

Funnel Chart widget

 This new widget, in the Dashboards category of the library, shows bottlenecks in chart form. 

• All of the elements are compared from bottom to top according to values, indicating the so-called blockage zone.
• There are various features that allow you to amend how the chart is displayed: colors, width of the 3 sections of the funnel (top, main body, bottom), descriptor appearance and positions, etc.
   

Operating principle

The Funnel Chart widget requires a data source from a report, view or file in .csv format, containing two columns (breaks): Descriptor and Value.
         

Some of the chart layout properties

Charts Base Width: Width of the base of the chart Neck Width: Width of the central section Neck Height: Height of the lower section Connector Dash Size: Thickness of the dashes linking the descriptors and values Gaps Size: Space between dashes Thickness: Width of the dashes Color: Color of the dashes

Important information

• The .csv report, view or file linked to the data source must contain only 2 columns.
• Colors can be selected from a predefined palette. You cannot define custom colors.

Tag Cloud widget

 This new widget, in the Dashboards category of the library, shows text data in chart form and is primarily intended for keyword frequency analysis. 

• The size of each word depends on its value (the higher the value, the bigger the word).
• There are various features that allow you to amend how the chart is displayed: overall color of keywords, angle of words, font, etc.
   

Operating principle

The Tag Cloud widget requires a data source from a report, view or file in .csv format, containing two columns (breaks): Descriptor and Value.
         

Some of the chart layout properties

Charts Position: Display tags as a sphere or rectangle Color Range: Show legend Series Angle: Tag rotation angle Text Spacing: Space between tags

Important information

• The .csv report, view or file linked to the data source must contain only 2 columns.

Virtual Agent widget

 This new widget, in the EasyVista category of the library, allows you to add a virtual agent call button in Service Apps. A chat window opens, where the user can talk to a chatbot via a text-based conversation (chat).

• The widget allows you to customize the call button and the agent chat interface.
• The virtual agent interface is laid out according to a Self Help theme.
• There are various features that allow you to amend how the virtual agent is displayed: chat interface font, call button and chat header and text-entry zone configuration, list of keywords displayed when the chat interface opens, etc.
   

Operating principle

The Virtual Agent widget requires an EasyVista Virtual Agent data source (new data source type).

Some of the virtual agent layout properties

Content: EasyVista Virtual Agent data source used by the virtual agent, and Self Help theme applied to the chat interface Panel: Font settings in the chat interface Panel Top: Characteristics of the top of the chat panel (icon, text, background color) User Area: Characteristics of the text-entry zone (text entry color, background color, keywords displayed when the chat interface opens) Virtual Agent: Name of the virtual agent, and primary and alternative colors Panel Bottom: Characteristics of the bottom of the chat panel (icon, text, background color)

Theme Button Style: Characteristics of the virtual agent call button (1) Search Label: Properties for display of a text zone before the text-entry zone (2) Search Style: Properties for display of a text-entry zone before the call button (3)

Changes to widgets

Self Help widget

 New properties have been added to the Self Help widget.

• It is now possible to choose the data source that the widget uses directly from the widget itself.
• New properties allow you to choose which buttons are displayed in the Self Help portal.

Some of the widget properties

Datasource: Data source linked to the widget; must be an EasyVista Self Help data source (new data source type) Theme: Theme applied to the Self Help widget Select which buttons are displayed in the Self Help portal Allow Log: Report button Allow Postit: Comment button Allow Map: Overview button Allow Pause: Pause button

Data sources linked to widget headers/footers

A new feature, common to all widgets, allows you to link the header/footer to a different data source than the one used by the widget. Various types of information from different sources can therefore be displayed in the same widget, such as the total number of records displayed by the widget.

Explanatory diagram

The same widget can use 3 separate data sources: one for the Header, one for the Footer, and one for the widget itself.
         

What are the benefits?

• Using 3 data sources for the same widget allows you to reduce the number of widgets that the app uses.

• Reducing the number of widgets allows you to:
  • reduce loading time for the elements of each widget
  • improve overall app loading performance.

Important information

• To show the number of records displayed by the widget in the header/footer, the data sources will need to be linked to the same filter but to different views (List view for the widget, view by grouping level for the header/footer, for counting purposes).

Operating principle

1. Go to the following property: Theme > Header (widget header) or Footer (widget footer).
           

2. Select the data source for the Header (widget header) or Footer (widget footer).
         

3. Click on  to open the text editor.
         

4. Enter the widget header/footer text.

5. Use the Data Picker  to select the data source values you want to insert in the widget header/footer.

6. Save and close the text editor. The HTML code is updated in the widget Header/Footer field.
         

New data sources 2.0

EasyVista Virtual Agent data source

 This new data source, in the Apps category of the library, allows you to link a data source to a Virtual Agent widget (the virtual agent opens a chat window where the user can talk to a chatbot - new widget type).

Some of the data source properties

Virtual Agent Id: The unique ID of the virtual agent Locale: Virtual agent language Public Account: Self Help ID (for disabling user authentication)

EasyVista Self Help data source

 This new data source, in the Apps category of the library, includes the options that were previously present in the Self Help widget. It should be linked to the new Self Help connector.

Some of the data source properties

Alias/connector Self Help: Connector used by the Self Help widget linked to the data source Locale: Language used by the Self Help widget linked to the data source Connection Account: Account used to connect to Self Help

New Self Help connector

This connector allows you to define the Self Help domain.
         

  Device Native Style property

• The option is checked in mode L (true value) and applies to all modes.

• The option is unchecked in mode M (false value). Mode S will therefore inherit the false value of this property from mode M. Modes XL and XXL will inherit the true value from mode L, i.e. the option will be checked.

  Click  to display apps from least recently run to most recently run.