Working in the 'Classic' layout

Basic surface structure

images/download/attachments/106962749/image2018-5-8_8_58_25-version-1-modificationdate-1659095343238-api-v2.png

The image is intended to illustrate the basic structure of the client interface of Lobster Data Platform / Orchestration .

Element

Description

Menu bar
(1)

On the left edge of the main screen the menu bar is displayed. This default positioning can be adjusted via Styles (property mainMenuPosition with the value LEFT or RIGHT).

Starting from the initial level, the Main menu with the menu title 'MENU' (not shown in the image), several levels of sub-menus can be accessed. The menu bar works as a 'slide menu' and always shows only one menu level or the elements for a selected menu item (in the picture the sub-menu 'ACCOUNTS') unless the search function was used and matches from different menu levels were found.

The '<' symbol to the left of a title entry (here: ACCOUNTS) indicates that there is a higher menu level. This can be accessed by clicking on the '<' symbol or the 'left' arrow key (←).

The '>' symbol to the right of a menu item indicates that a child menu level exists, which is accessed when the menu item is clicked or accessed by pressing the 'Enter' key or the 'right' arrow key (→) with focus on the menu item.

It is possible to return to the main menu by clicking on the 'little house' (home) in the menu title. There is no need for a separate key combination, since pressing the arrow key 'left' several times has the same effect.

Each menu item can be selected by mouse click or – if controlled by keyboard – by pressing the 'Enter' key.

NOTE

  • The selection of the menu items offered depends, among other things, on the logged-in user's permissions and may differ from the display.

  • Keyboard control for the menu bar assumes that the menu bar has focus. This can be achieved by clicking the mouse or by selecting the search function with the key combination CTRL+SHIFT+F followed by the 'down' arrow key (↓). The 'cursor position' in the menu is highlighted for the navigated menu item (shading, font color, colored marker on the left, see also Styles properties menuItemHoverBackgroundColor, menuItemHoverFontColor and menuItemHoverBarColor):

    images/download/attachments/106962749/image2018-9-11_9_44_2-version-1-modificationdate-1659095343254-api-v2.png
  • This highlighting (hover) is also used when the mouse cursor is hovered over a menu item.In combination with the keyboard control it is possible that two different entries are highlighted in the menu at the same time. For keystrokes (enter key, arrow keys), the cursor position controlled by the keyboard is always decisive.

User area
(2)

Above the menu bar and search function, information about the currently logged-in user is displayed in the 'User area'. On the left appears the profile picture or, if no profile picture is set, the first character of the 'User's name', which is built up on the right of it by concatenating the features Name1, Name2 and Name3 from the user's account. The same scheme is used to compose the 'Company name' from the login context below. As a tooltip – gray in the image – the name of the role from the logon context appears when the mouse cursor is moved over it.

images/download/attachments/106962749/image2018-9-11_10_14_50-version-1-modificationdate-1659095343264-api-v2.png

The Settings link opens a context menu (see example in the following screenshot) with the following options:

  • Sprache ändern (provided the role used has the appropriate authorization) with the selectable locale as sub-menu items.

  • Passwort ändern (provided that the role used has the appropriate authorization).

  • Profilbild ändern (provided that the role used has the appropriate authorization).

  • Fast switch provided that the logged-in user can select from several companies and/or roles.

  • Logout (always available).

images/download/attachments/106962749/image2019-5-22_11-31-5-version-1-modificationdate-1659095343271-api-v2.png

As can be seen when comparing the two screenshots, the green button icon on the right below the profile picture switches between two variants:

  • When the images/download/attachments/106962749/image2019-5-22_11-42-26-version-1-modificationdate-1659095343277-api-v2.png 'Main switch' icon (first screenshot) appears, the Fast switch option is not available and pressing the button causes Logout.

  • The images/download/attachments/106962749/image2019-5-22_11-41-20-version-1-modificationdate-1659095343285-api-v2.png 'double arrow' icon (second screenshot) appears when the Fast switch option is available and provides direct access to it. Logout is then possible via the context menu for Settings or the Fast switch dialog.

Main window
(3)

The main window of the client is also called the 'View slot area' because it can contain either one, two or four 'slots' (line items) for 'views'.

Splitting the main window into view slots is controlled by the pop-up menu activated by the Split screen (1) icon (far right in the taskbar below the main window). There are four options to choose from (1 slot, 2 slots side by side, 2 slots on top of each other, 4 slots). It is also possible to save (2) the currently configured arrangement (incl. the assigned views) as a user-specific default. This default mapping appears automatically whenever the current user logs in to a session. An existing default arrangement can also be deleted (3).

images/download/attachments/106962749/image2019-5-23_10-2-50-version-1-modificationdate-1659095343292-api-v2.png

Each configured slot can be assigned to one of the open views (see (4) in the image above). It is also possible to assign slots with not yet opened views via drag & drop from the menu bar.

The following image shows an example with two side-by-side slots containing the 'Localization' (left) and the corresponding entry in the 'Manual' (right).

images/download/attachments/106962749/image2018-9-11_10_59_4-version-1-modificationdate-1659095343300-api-v2.png

Taskbar
(4)

The taskbar at the bottom of the main window shows a 'tab' for each open view, with the views currently displayed in slots highlighted by a colored marker at the bottom edge. The tabs can be clicked directly to display specific views. Views from the taskbar can be assigned to specific slots via drag & drop. The taskbar also expands automatically when the mouse cursor remains in the vicinity for a bit longer. Then individual views can be closed selectively via the images/s/-95e2zf/9012/8yg2g7/_/images/icons/emoticons/error.svg icon.

images/download/attachments/106962749/image2018-9-11_11_29_3-version-1-modificationdate-1659095343306-api-v2.png

Quicklinks
(5)

Below the menu bar is the Quicklinks access area, where each user can compile individual 'favorites' from the available menu items using drag & drop. Only 'real' menu items are selectable and not submenus containing further menu items.

The bar can display a maximum of three entries visible at the same time. However, additional entries can be added and scrolled into the image as needed.

It is also possible to Delete an existing Quicklinks access by drag & drop. When dragging a Quicklinks access entry from the list, a recycle bin icon appears in the Quicklinks access title bar, as shown in the picture, on which the entry must be placed for deletion.

images/download/attachments/106962749/image2019-5-23_10-47-38-version-1-modificationdate-1659095343314-api-v2.png

Like menu items, Quicklinks access entries can be dragged and dropped into a view slot to display the corresponding view there.

Show and hide ribbon macros

images/download/attachments/106962749/image2018-5-8_10_18_35-version-1-modificationdate-1659095343321-api-v2.png

The ribbon macro bar (1) can be hidden by clicking on the 'up arrows' icon (2).

images/download/attachments/106962749/image2018-5-8_10_19_41-version-1-modificationdate-1659095343328-api-v2.png

When the ribbon bar is hidden, the main categories it contains remain visible. When the mouse cursor is moved over these categories, the ribbon bar automatically unfolds to allow button selection. When the mouse cursor leaves the area, the bar is automatically hidden.

After clicking on the 'down arrows' icon (3), the bar with the ribbon macros remains permanently displayed again.

Switch to full view for details

images/download/attachments/106962749/image2018-5-8_10_23_12-version-1-modificationdate-1659095343334-api-v2.png

A detail area can be displayed in a full view by clicking on the icon (1). It then temporarily fills the view slot completely, covering other areas such as the ribbon bar or the data grid in a combined view.

images/download/attachments/106962749/image2018-5-8_10_24_50-version-1-modificationdate-1659095343341-api-v2.png

Clicking the icon (2) restores the original size of the detail area.

Show and hide menu area

images/download/attachments/106962749/image2018-5-8_9_8_13-version-1-modificationdate-1659095343347-api-v2.png

The menu area (incl. user area, menu bar and quicklinks access) can be hidden by clicking on the '<' symbol (1) in the upper right corner to use more space for the main window. This behavior can also occur responsively, i.e. automatically, when the space available in the width becomes tight, for example when the browser window is moved from a large desktop screen to a laptop display with limited resolution.

images/download/attachments/106962749/image2018-5-8_9_9_7-version-1-modificationdate-1659095343354-api-v2.png

When the menu area is hidden, the first view in the main window shows the menu icon (2). When this is clicked, the menu reappears, merely overlaying the view slot area laterally (see image below), until the menu is exited again by clicking in another area or selecting a menu item.

images/download/attachments/106962749/image2018-5-8_9_11_40-version-1-modificationdate-1659095343360-api-v2.png

Click on (3) to switch back to the permanent menu display.