BS Navigator

As part of the BS Studio, there is a new modern navigation panel, that simplifies the user experience through a streamlined and highly customizable look. It is called the BS Navigator.

The navigator contains a simple list with links to the most important application areas available for the current user called “Navigator Links”.

Collapsing the Navigator

It can be collapsed and reopened using the bottom link to save space and the user focus on the application itself:

When the navigator has collapsed the labels of the navigator links appear as tooltips over the navigator link icons.

It is possible to provide also special tooltip text per icon to provide additional information as tooltip text per navigator link.

Tips:

  • The link settings dialog can also be quickly opened by [Alt] + Click on the link icon in the BS Navigator.

  • The link target and context remain loaded in the background when switching to another link and returning back.

  • The link target will be forced to reload by [Double] + Click on the link icon in the BS Navigator

  • The link target can also be opened in a new popup window by [Shift] + Click on the link icon in the BS Navigator. The popup window shows the label of the link as dialog title:

At the very top left corner, there is the typical Contentserv main menu:

The main menu gives quick access to important actions like:

  • Logout

  • User account

  • Language Settings

For administrative users additional actions can be available like:

  • System Preferences

  • Portal Settings

  • Quick User or Portal switch

  • Portal Setup Settings

Creating a new Navigator

The BS Navigator is a standard Contentserv portal widget. As such, it can be added by

  • unlocking the main portal through the main menu popup

  • creating a new tab with one column

  • adding a new widget

  • choosing the “BS Navigator” widget:

This will create a new empty navigator. Navigators without links will by default display some useful short cuts to:

  • This online help article

  • A quick link to create your first custom links

  • A quick link to open the widget preferences

  • A quick link to create navigator links for each widget and studios within the current portal

As soon as you create your own links these items will be replaced by your links.

Customizing the Navigator

The BS Navigator is a standard Contentserv portal widget. As such, it can be configured and customized by unlocking the main portal:

Once the portal is unlocked the horizontal portal header becomes visible and the navigator can be configured through the typical “Widget Options” button on the right end of the BS Navigator widget:

Tip: The widget settings dialog can also be quickly opened by [Alt] + Click on the main menu icon.

Customizing the Navigator Design

In the widget settings dialog, the navigator can be customized in look and feel:

Setting

Impact

Default

Setting

Impact

Default

Show Main Menu

If the main menu should be displayed along with the portal header icon at the top of the navigator

Show the main menu automatically if the portal settings provides only one tab

Application Padding

If the applications in the right frame should be embedded in a padded card layout

Yes

Icon Size

Modifies the display size of the icons in the navigator

  • 16 x 16 px as Small

  • 20 x 20 px as Medium

  • 24 x 24 px as Large

Menu Icon

The hamburger menu icon if Show Main Menu is activated

Two dashes, which is delivered by “mainmenu”

Logo Icon

The logo if Show Main Menu is activated

The portal header icon from the global skin settings

Background Color

The background color of the navigator pane

The vertical navigation background color from the global skin settings

Font and Icon Color

The color for the navigator links and their icons

The vertical navigation font color from the global skin settings

Selected Background Color

The background color of the navigator link when it is active or the mouse is over it

The vertical navigation selected background color from the global skin settings

Accent Color

The left border color of the selected link

The accent color from the global skin settings

Collapse Button Background Color

The background color of the collapse button at the bottom of the navigator

The same as the selected background color

Collapse Button Font and Icon Color

The color for the collapse button label and its icon

The same as the selected font and icon color

The navigator links can be defined using the second button in the vertical navigation of the widget settings dialog:

The links are a configurable tree structure of items with a label, tooltip, icon and more settings:

Setting

Impact

Setting

Impact

Link Type

The type of link which might ask for additional settings

Label

The displayed label of the link

Tooltip

Optional tooltip of the link

Icon

Optional icon name from the Icomoon library like “hand”. Click to open up the icon selector dialog.

Allow Access by

One of the following:

  • All known User (which excludes the Anonymous User)

  • All known and unknown User (which includes the Anonymous User)

  • The Owner and following Users, which allows to pick users or user folders, which includes the contained users as well

Owner

The user which is responsible for the link

Deactivated

Allows to temporarily deactivate the link without deleting it

[Additional Options]

Depending on the Navigator type additional options will appear

Create Navigation Folders

By right-clicking in the tree it is possible to create new navigation items or folders, which can contain more navigation items:

Links can be organized by drag and drop. Links within folders will be shown as Popup Menu in the UI:

To switch the default link icon to something more meaningful you can click on the icon field and open up the icon selector dialog:

Custom icons are automatically recognized. Color values can be selected or provided by the color HEX code separated with a colon:

The further decision about the link target and behavior is up to the link type, which is actually implemented as a plugin interface and is fully customizable by providing a CSNavigatorLink Plugin. Typically used link types are:

This link type is a bridge to the classical CS Portal Studio applications, like the PIM or DAM or the System Preferences. It allows selecting the Studio Application in the drop-down that shows up for this link type:

The application displayed is exactly the same as by the classical CS Studio Widget:

Allows selecting PIM Product Folders, DAM Folders or CRM User Groups as root nodes in a searchable tree:

This link will show up like in the following screenshot:

This link type allows selecting favorites that should be made available:

In the navigator these favorites will be offered as simple flat lists:

This link type allows embedding any external or even relative internal link.

Here for example this Confluence article is embedded as a “BS News” link with an info icon:

This custom link type comes with the BS Cockpit and allows embedding a specific cockpit view:

The “Cockpit Type” provides several options for the Cockpit context:

  • Global: all users will see the same tile-set

  • User: tile-set per user

  • User Group: tile-set per user group

  • Role: tile-set per role

  • Widget: tile-set per BS Navigator widget

  • Custom: custom context, for example, widget:254 to reuse the tileset from another cockpit in another widget