Views

User navigation can be defined through interconnected views, giving the user a comprehensive way to access DPS information.

When the user accesses the DPS application, the navigation begins from the first page in the sidebar menu, typically the Overview page whose purpose is displaying to users what is important to them, for example, the presence of problems or actions to be performed.

You can define multiple pages which can be accessed from the sidebar menu, from tab menus, or linked by page elements.

The set of pages composing the application navigation, including the pages specific for thing definitions, can be profiled according to the user types accessing the DPS. For instance, the customers management pages will be available only to the OEM o Partner users, instead end-users will access more simple pages.

Creating Views

To add a new View, you should:

Enter the Interfaces / Views page.
Select whether you need to create a General view or a Thing Definition specific view.
In case of Thing Definition, select the Thing Definition to edit.
Press the Add View button
Select the target view type to create.

Editing a General View

In the General tab you can configure the views which are the set of main pages navigable from the main menus of the application.

Initially you can find a view with no associated user type, this is the default view that is used by all users accessing the DPS application.

In addition, you can define more specific views, associating them with one or more user-types, for example, you can create a view specifically for end users and associate it with all customer user-types. Note that a user-type can only be explicitly associated with one view at a time.

By selecting a view, you can configure:

Group: the group to which the view belongs. Note that, by changing the group, you must select the user type that can access the view according to the new group.
Name: the name of the view, used only within the console, and not visible to users navigating the DPS application.
User Types: if it is not the default view, you can select one or more user-types for which this view is specific.
Main Menu Style: the style of the left menu, which can be Icon and Text or just Icon.
Main menu collapsable: you can define whether the users can collapse the left menu.
User Menu Style: you can define where to display the user menu, if as a dropdown menu in the top bar, or as different pages in the left menu.
Control Bar Template: the template to be used as the default control bar on any page of the view.

Other than the above options, in a view you can define:

Pages: the set of pages composing the user navigation.
Details Pages: the details pages used to display the details of the common objects (e.g. customer, location, alert).

To add a new Page, you should:

Select the View where you want to add the new page.
Press the Add Page button below the page list.
Provide the required information and press Save.
Enter the newly created Page and add at least one sub-page.

To change the position of the pages in the menu, you can drag pages in the list.

By selecting a page, you can edit its option and contents.

Page Editing

Within a page, you can define where and how the page is included in the navigation menus.

Label

The name of the page within the navigation menus (e.g. Overview).

Page URL

To allow users to access the page, it is necessary to define its location, which can be:

Internal: the page is located within the DPS, and it is necessary to specify a URL Path that will be resolved from the path "/overview".
For instance, the main Overview page with the "overview" URL Path is reachable to:
```
http://acme.servitly.com/dashboards/overview
```
External: the page is external, and you need to specify an External URL, which must be a secure.
```
https://www.acme.com/support
```

In case of an external page, in the navigation menu the page is visible like other standard pages (icon, label), but when the user clicks on the menu item, a new browser tab is opened. If the operation is done from the Mobile App, the system browser is opened.

Navigation

Define the way this page is navigable (e.g. from the top bar o sidebar menu):

Sidebar Menu: the page is added to the page left menu.
Top Bar Left: the page is added in the page top bar on the left.
Top Bar Right: the page is added in the page top bar on the right.
Link: the page is accessible only from a Link Element placed in another page.

Menu Icon

The icon to be displayed before the page label with the menu.
Here you can find helpful icon sets to use in your DPS.

Menu Informational Badge

On the right of the menu item, you can display a colored badge warning the user of the presence of specific elements (e.g. active alerts, running work sessions).

You can choose to display:

Alert Count: the number of active alerts by severity, such as a red badge for failures and a yellow badge for anomalies.
Work Session Count: the number of in progress work sessions in a green badge.
Action Count: the number of pending actions, by using a yellow badge for actions pending for completion and a red one for expired actions.
Action Count by Priority: the number of outstanding actions, using a colored badge according to the priority of the action.

User Types

You can further reduce the availability of this page to a sub-set of user-types already associated with the parent dashboard.

Control Bar Template

The template to be used as the default control bar for any sub-page of the page.

Visibility Condition

You can define an expression to make the page available with a more specific condition

getUser().customer.country == "Spain"

For more details about visibility conditions, refer to the Visibility Conditions article.

Sub Pages

Within a page you can define multiple sub-pages, for instance, to organize the content into tabs.

Refer to the below section for more details about sub-page editing.

Details Page Editing

Within a dashboard, you can change the detail pages used by default to display the details of a specific object. These pages are automatically navigated by the front end, for instance, when you click on a customer, the Customer Details page is opened.

Detail pages are predefined, and it is not possible to create new ones or delete an existing one.

A details page uses a specific URL, according to the kind of object to display, for instance a customer details is reachable at this URL

https://acme.servitly-sandbox.com/dashboard/customer_details/6061a2ff65dac300011df85d

Within a details page, you can only configure the sub-pages.

Refer to the below section for more details about how to edit sub-pages.

Editing a Thing View

Other than main views, you can define also the views which must be used when entering a specific thing details page. Within the system, you can configure several thing-definitions, each one having a specific visualization.

By entering the Interfaces / Views page, in the Thing Definitions tab, you can select the thing definition you want to modify. When selected, the list will display the view for the various user types that are defined for such thing definition, also including inherited views.

By selecting a thing-definition view, you can edit the user-types the view is designed for, and the sub-pages composing it.

Refer to the below section for more details about how to edit sub-pages.

Sub Pages

A sub-page is the place where you can define the content available entering a certain page.

In a sub-page, you can configure:

Title : the title of the sub-page displayed within the
URL Path: the URL path used to navigate the sub-page respect the parent page.
Template: the template describing the content to be displayed.
Control Bar Template: the template describing the parent page control bar to be displayed when navigating the sub-page.
Navigation: the navigation mode of the subpage
- Tab Menu: the subpage is added as a new item in the tabbed menu of the page. If there is only one subpage in the tabbed menu, the tabbed menu is hidden.
- Link: the sub-page is accessible only from a Link Element placed in another page tab.
Visibility Condition: you can define an expression to make the sub-page available with a more specific condition.

getUser().customer.energyMonitoringEnabled

For more details about visibility conditions, refer to the Visibility Conditions article.