|
Test Case Title |
|
|
Goal |
As a any user I can
|
|
Prerequisites |
The user is registered and logged in the system Using a PC or Mobile with a web browser. Access to the Dashboard Builder. |
|
Expected successful result |
See changes performed on the modified dashboard. Your user account into the Dashboard Builder has been endowed of a number of dashboard for using them, changing them without problem for the system. See the created dashboard and play with them. |
|
Steps |
|
Example 1: Creating a City Dashboard
The creation of a dashboards has been strongly simplified with the implementation of a Wizard tool that assists and guides the users in matching data vs graphics representation, thus arriving at creating automatically the widget representing data.
You can start testing this requirement by following the sequence of actions:
- Enter in the Snap4City portal and log in the system
- Main --> dashboards
- On the left column main menu click on Dashboards item. The preview of the dashboards available for the user will be shown.
- The Dashboards page shows the preview of dashboards created by the user (identified as “My own”), public dashboards accessible only in view, private dashboards that the user can access since he has been delegated by the original dashboard owner, and also eventual dashboard someone that someone has delegated to you.
The new dashboard wizard helps the user to create easily a dashboard by using pre-formed templates.
The user has to insert the Dashboard title and select one of the available templates according to personal interest. Pre-defined dashboard models available are:
- Selector and POI, a list of services with a map showing the position of listed services
- Fully custom, to create a new empty dashboard from scratch
- Data and trends, a set of performance or status indicator of various nature, shown with a couple of widgets for each indicator, the first one showing last value, the latter showing value time trend
- Selector, POI, trend, a list of services with a map showing the position of the services listed. It is possible to see values associated with a single POI clicking the correspondent pin on the map: you can also (if data are available) see value time trend the widget below the map.
- Events vs Map, a list of events of interest (recreative events, city alarms, traffic events…) and their position on a map;
- Microapp and services, a list of microapplications shown on a map.
- IOT devices, a dashboard with actuators connected to new or existing IOT devices.
- Dashboard with IOT Application behind, a dashboard with widgets (both data visualizer and actuators) connected to IOT applications.
For example, select the model “Selector and POI” and write the title “My new Dashboard” as shown in the previous image. The system checks if the title has been yet used and confirm the possibility to use it via the message “Dashboard title OK”.
If the title has been yet used in another dashboard the message “Dashboard title already in use” is shown.
Click on the Data and widgets tab to continue in the dashboard creation.
A new view will be shown, showing the new interface that, according to the template selected, will show:
- Data compliant with the previous choice.
- If choosen dashboard template is of Preset widget choice type, widget icons aren’t shown
- If choosen dashboard template is of Manual widget choice type, widget icons are shown
Now the user has to search and select the services and data that he has the interest to be included in the selector widget. To simplify the search, the table allows to perform some filtering.
To select a service to be included in the selector, the user has to click on the service of interest that is marked in green background. Each time that the user click on a service in the list, the corresponding POI are shown on the map. Only pins included in the map area shown. The user can zoon in/zoom out the map using the scroll wheel of the mouse to restrict or enlarge the map area.
The Data sources table shows all the data available on the platform and help the user to select the data sources of interest thanks to the filter possibility and the search field below the table, on the right corner.
Each time the user clicks on a row in the “Data source” table, the selected source is added in the “Choosen data sources” list below.
Once completed the selection of the data sources and of the widget type (if possible), the user goes to the Check and summary tab, in which you can see:
- Summary: a synthesis of your choices and what is going to be created
- Check: Alerts about possible missing or wrong input that deny instantiation
The Confirm button (which triggers the creation of dashboard and widgets) is shown only if there are no warnings: new dashboard is created with predefined settings (colors, width, widgets’ dimensions, etc.).
After the confirmation the dashboard is opened in edit mode and the user is now able to modify settings, add or modify widgets.
A grid is present below as background to simplify the organization of the dashboard and the editing of the widgets.
Edit dashboard properties
In the following, the new dashboard editing features is described.
Click on the triangle icon on the top left corner of the dashboard. A contextual menu is shown providing options to modify and define dashboard color settings, as in the following image.
Click on the Header color item to open the color palette and to select the preferred color of the header. By changing the color in the palette, the header color changes accordingly so that the user can see immediately the result.
Once the user has selected a color, he must confirm the choice by clicking on the Apply button.
The selected color is added in the Last used color list. This facilitate the use of the same color in other context since the user find the same color replicated in all widget editing contextual menu.
Close the menu by clicking the Quit item in the contextual menu.
Click directly on the dashboard title to change it. Click the save icon to confirm the new title.
Below the dashboard title the following buttons are available:
- Properties, that open a popup with two tabs: Measures and Header
- Wizard, to add additional widgets on the dashboard by using the wizard as before;
- Add widget, to add a widget by using the old procedure
- Separator, to add a transparent separator to add space to separate widgets
- Embedding, to manage the dashboard embedding and to copy the code to embed the dashboard in external webpages
- Screenshot, to load a preview image of the dashboard that will be shown in the preview list
- Save, to save widget position after the widgets have been moved into the dashboard
- Preview, to see the dashboard in view mode.
Editing widgets
The procedure to edit and modify widgets has been simplified.
To change the dimension of a widget, the user has to play with the four arrows available on the top left of each widget.
For example, click on the down arrow of the Selector widget to fit the widget high with the map.
Before After
Click on the widget title to change it and click the Save button to confirm or the orange X to undo.
Click on the small triangle icon on the top right corner of a widget to open the widget editing contextual menu.
The menu items allow the user to:
- Hide/View the widget header
- Modify the widget header color
- Modify the widget title color of the text
- Modify the widget background color
- Modify the widget color of the border
- Open the advanced editing properties (Mode options)
- Delete the widget
- Quit to close the contextual menu
The More option item opens a pop up with the advanced editing properties of the widget.
