Configuring Direct Customer's Dashboard
- Panagiotis Papanastasiou
On this page, you can find an analysis of the options and tools for configuring the visual representation of the direct customer's dashboard in Storefront.
Configuring the Direct Customer's Dashboard and Widgets in BSS
To configure the direct customer's dashboard along with the widgets, the BSS user can navigate to the BSS Setup → Administration → System Options → Storefront Dashboard Configuration. 
Under the Direct Customer Dashboard tab, the BSS user is able to configure the Storefront dashboard by editing the default layout, the default widgets, and the default color palette of those widgets (containing charts).
On top of the tab, two buttons are displayed:
- Back: It navigates the BSS user to the previous page.
- Save Layout: It saves the changes applied on the dashboard by the BSS user.
The page is also comprised of the following sections, which are analyzed in detail further below.
- Dashboard Layout: This option can alter the display arrangement of the widgets by changing the column layout.
- Dashboard Colors: This option can alter the colors of the dashboard charts. It supports the full RGB range of colors in HEX format.
- Widgets Editor: This panel displays all the available and added widgets and from it, the BSS user can add or remove widgets, edit them, and drag and drop them to different positions. Please note that the data on the widgets are dummy and do not represent your actual data and metrics. These dummy data are utilized for assisting in the visualization of your changes.
Default Settings
A specific set of default settings is applied the first time the BSS user navigates to the Storefront Dashboard Configuration screen. These are the following:
| Dashboard Layout | Dashboard Colors | Dashboard Space - Default Widgets |
|---|---|---|
| Two columns |
|
|
Dashboard Layout
In the Dashboard layout section, the BSS user can define the layout of the Storefront Dashboard, by selecting one of the four available layouts from a set of “layout” buttons. Any changes applied to the layout are automatically saved without requiring the user to click on the Save Layout button.
Based on the above selection the following layouts will be displayed in the last section.
- One column: In BSS only one column is available to receive widgets. In Storefront, the dashboard consists of one column, where each widget is placed on top of another.
- Two columns: In BSS two equally sized columns are available to receive widgets. In Storefront, the dashboard consists of two equally sized columns, where equally sized widgets are placed next to or on top of each other.
- Left Sidebar: In BSS a left sidebar and the main window are available to receive widgets. In Storefront, the dashboard consists of a left sidebar and the main window, where widgets are placed next to/on top of each other. The size of the widgets varies based on where they are placed, on the left sidebar or on the main window.
- Right Sidebar: In BSS a right sidebar and the main window are available to receive widgets. In Storefront, the dashboard consists of a right sidebar and the main window, where widgets are placed next to/on top of each other. The size of the widgets varies based on where they are placed, on the right sidebar or on the main window.
Dashboard Colors
Below the Dashboard layout, a section named “Dashboard Colors” is where users can select the colors of the dashboard charts. A set of 6 colors is available, named Series A-F. The selected colors are used to depict the data in all the chart widgets that are included in the dashboard, to ensure a common color theme. In case the data or the data series are more than 6 then the colors will be repeated with a darkening effect.
By hovering the mouse on top of the title, the following message will appear:
Users can select the color in two ways:
- color text box: By entering the hex color code to the color text box next to each series. When the user enters the color code, the color picker box is filled in with the relevant color.
- color picker box: By clicking the color picker box, where a color palette appears with an opacity bar. When the user selects the color from the palette, the color text box is filled in with the relevant hex color code.
To save the new color selections, the Save Layout button must be clicked.
Add Widget
On the upright corner of each column (or sidebar/main window) a button will be placed named Add Widget. When the user clicks on the button, a new page appears named Add/Edit Widget.
This page, consist of the following parts:
- Content (drop-down menu): When the BSS user clicks on the arrow, a drop-down list appears with all the available widgets that can be added to the dashboard. For the direct customers the following widgets will appear:
- Title (text box): The BSS user can change the name of the widget with which it will be displayed on the Storefront Dashboard, by entering a new title in the text box. In case the user does not enter a new title, the name of the widget remains as is.
After the BSS user has entered all the necessary information in the Add/Edit Widget page and they have selected the Save button, the widget will be displayed on the corresponding column/sidebar/main window. On the upright corner of the widget, two link buttons are displayed: Edit and Delete.
Edit Widget
When the BSS user clicks on Edit, the Add/Edit Widget page appears, where they can edit the title of the existing widget.
Delete Widget
When the BSS user clicks on Delete a modal will appear on the screen with the text stating:
By clicking “ok”, the selected widget is deleted.
Any changes applied with the Add/Edit/Delete widget functionality are automatically saved without requiring the user to click on the Save Layout button.
Drag & Drop Functionality for Widgets
Furthermore, a drag functionality is available, which allows BSS users to change the position of the widgets by dragging them either on top or below of another widget or to another column/sidebar/main window. To save the new position after the dragging action, the Save Layout button must be clicked.
Direct Customer's Dashboard Widgets
An analysis of the direct customer's dashboard widgets is found on the Direct Customer's Dashboard Widgets page.