How to use the user interface elements of this application

General description for the user interface

The browser page is split into 3 main parts: the header, the card dock, and the actual workspace.

Main parts of the user interface

1. Header

   The Header provides access to login or logout, user preferences, language selection and help.

   NOTE

   You cannot resize the header.

   The header contains the icon which links to the main dashboard of PRISMA Home.

2. Card

   The Card provides very brief specific information to be displayed in the card dock. Most apps only open a single card in the card dock on the first call.

3. Card dock

   The card dock keeps track of open workspaces.

4. Workspace

   The Workspace covers most of the screen area. This is where most of the things happen.

5. App

   The actual App will take as much space as possible inside the workspace. You can combine more than one app in the workspace.

6. Panels

   Depending on the app, the displayed information can be split into one or more Panels.

App menu

The app menu

The app menu contains buttons to open/collapse the dashboard and app menu as shown in the illustration above.

• The app menu is locked in the open position. The app list is always visible.

• The app menu is collapsed. The app list is hidden until you press this button.

Card

When you select one app from the app menu, a new app card with a new workspace will open.

Card elements

1. The workspace name and icon.

   Initially, the header of the card displays the name of the app as the title.

   The icon is optional.

   To change the default title of the card, double-click the name of the card.

2. The drag-and-drop button

   This button only appears when the "long press" gesture is applied or when the mouse cursor is hovering the title bar of the card.

   You can drag the handle icon to move the card in a different position inside the dock.

3. The [Close app] button

   This button only appears when the "long press" gesture is applied or when the mouse cursor is hovering the title bar of the card.

   To close one app, either close the card by the icon in the corner or select [Close app] from the workspace menu.

4. The actual content of the card

   The cards are primarily used as a navigation through the workspaces. The cards also provide information at a glance about the state of the workspace.

   In any workspace you can have one or more active apps. When starting a new app by clicking on it in the menu, a new workspace is opened with only the started app in it. When dragging an app from the app menu into an existing workspace, the app is added to the existing workspace. Each started app will add its own card in the dock. Each card will change its content when the app status changes.

   The app can visually signal that it needs attention by using a different background color or a colored border:

   • Orange for warnings

   • Red for errors

Card dock

The card dock manages the running apps.

When you select one app from the app menu, a new app card with a new workspace will open.

At any given moment, you will see one active card for the currently visible workspace and a number of inactive cards in the card dock area.

The expanded dock with examples of cards

If you have more cards than the dock can show, the card dock menu will add one or two navigation arrows.

There are a few card dock controls available.

Card dock controls

It is possible to toggle between different card dock views. To change the view, click the top icon (1).

The button has three different icons, each corresponding to one of the different dashboard modes:

• Minimized

  The card dock is collapsed and the card dock is reduced to a single row.

• Maximized

  The card dock is expanded to fill the entire available workspace space. No app panels are visible.

• Default

  The card dock shares the space with the app workspace.

If you need more screen for the workspace, you can:

• drag the bottom of the dock to the top;

• click the top icon (1) until you reach to .

This will lead to the dock collapsing to a single line (the title of the card).

Collapsed dock

If you want to create a dashboard of apps to monitor and be able to quickly open an app, click the top icon (1) until you reach to . Only the app cards will be displayed.

Navigation arrow

If you have more cards than the dock can show, the card dock menu will add one or two navigation arrows (2).

The order of the cards in the dock is kept when you log out and log in again.

If you collapse the dock, the cards only show one line of status. The icons in the dock are arranged horizontally.

Workspace

The main area of the screen is called "workspace".

• The workspace is connected to at least one app.

• The workspace takes up the majority of the screen.

• There is never unoccupied space inside the workspace. The information displayed by the workspace is grouped into rectangular panels. The workspace contains at least one panel.

• If you resize the web page, the content of the workspace will try to keep the order of the contained content, but the workspace does not provide scrolling bars.

• Every workspace has the three-dots menu in the top-right corner. The three-dots menu offers a number of options to customize your workspace or close the app.

Setting up the workspace

From the app menu, select your favorite apps.

• Each app comes with its own workspace.

• Each app adds a card to the Dock. You can add a new app in the workspace of another running app by dragging the new app from the menu. This special case could force one card to contain information from both apps. You will have to scroll the card's content to switch from one app to the other one

• The order of the cards in the dock is kept when you logoff and on again

The workspace has a title on the topmost position, usually being the name of the app. The title bar can be hidden, depending on the needs of the application.

The workspace editor

The workspace editor can be activated through the three-dots menu in the application header. Once activated, the overlay will present various controls to resize and move panels. Once the workspace editor is closed, the layout is saved in the user settings.

The workspace editor

The workspace editor can be activated trough each of the three-dots menus. If there are multiple combined apps in the same workspace, both have the same option. but only one needs to be selected.

All changes made in the workspace editor are saved instantly, but you will have to close the edit mode. This can be achieved trough 2 different methods:

1. Switch to a different app by clicking one of the inactive apps.

2. Click/tap the close editor button in the info bar.

The following operations can be performed:

1. Deactivate panels, one at a time.

   Click the icon.

   NOTE

   The last panel cannot be deactivated.

2. Move / reorder panels.

   Use the "drag" gesture to move the panel.

   The interface will indicate the proposed spot while you drag around the panel. When released, the panel is placed in the indicated spot.

3. Resize panels

   Use the workspace editor splitter.

Combining cards and workspaces

Regular cards are assigned to a single workspace. A small number of workspaces can be joined together. You can combine two instances of the same app in a single workspace. As a consequence, the card will also reflect this.

Card with 2 apps

You can drag and drop one app from the app menu into the currently active workspace. This way of use will let you combine two or more apps into the same workspace. The card will then respond to change requests from all the apps.

1. The card header will receive the names of the apps, separated by a comma.

   Double-click to change it.

2. On both lateral edges, arrows will allow you to switch from the card of one app to a different one. The scroll order is given by the order in which you added the apps to the workspace.

   Press < or > to navigate to the previous or to the next app in this workspace.

3. On the bottom of such card, a navigation indicator will be added: one point for each app in the workspace.

   The current app has the navigation point highlighted.

The use of this functionality is highly dependent on the size of your display.

Panel

The workspace is composed out of one or more panels. The panel consists of three distinct areas: Header area, Title area, Content. Like for the workspace, the title can be shown or hidden.

Each panel can be freely moved to a different position in the current workspace. When you hover the mouse over the top of a panel, a handle appears which you can use to drag the panel to a different position. When rearranging occurs, a drop zone appears to give you a visual indication where it will be placed when the handle is released.

On the top-right corner, the button can be found. If you press it, the panel is hidden and the application will reorder the remaining panels. The panel will still send notifications to the card even if it is hidden. If the workspace only contains one single panel, you cannot hide it.

When the mouse cursor is in the top-right corner of the workspace, a menu appears. When you click the three dots menu , a list with all the panels supplied by the app is shown. The visible panels are marked with a checkmark symbol. Additional entries in this menu are [Store as default] and [Reset to default].

• Use the menu entry [Store as default] to save the current panels position as the new default.

• When you want to obtain the intended position for all the panels, select [Reset to default] from this menu.

• If you want to close the app, select [Close app].

Panel context menu with the workspace editor

Working with tables

Each app can enable additional functionality for the table user interaction:

• The header of the table offers a context menu from the button. From this menu, you can check which of the columns to be displayed by the table. The order in which this menu shows the column headers does not change. If you select the [Filter], each column header will receive one input box for content filtering for the values in that column only.

  Table context menu

• Column reordering

  All the tables have a header. If the header is visible, and ordering is enabled, the columns can be reordered. Simply drag a column to the desired spot.

• Data sorting

  The information in a table can be sorted in some of the tables (depending on the providing app). Click the header of a column to sort the whole content of the table using the values in that column once. A second ordering will reverse the sorting order.

• Column resizing

  The column separator in the heading row can be dragged to set a different width for the column.

  When the mouse cursor changes to the divider icon , you can use the mouse double-click gesture to automatically resize the column to the width needed to fully contain the longest value.

• Filtering

  Right above the context menu, you can find the filtering button. If pressed, a small text box will allow you to search inside the table, in any of the visible columns.

• Setting the current layout as the default one

  Use the menu entry [Store as default] to save the current visible columns, order and their size as the new default.

• Setting the original layout as the default one

  When you want to obtain the intended position for all the parameters of the table, select [Reset to default] from the context menu.