Test Case Title
As a any user I can
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 the created dashboard and play with them.
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.
- 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”.
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.).
Edit dashboard properties
In the following, the new dashboard editing features is described.
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.
The procedure to edit and modify widgets has been simplified.
Click on the widget title to change it and click the Save button to confirm or the orange X to undo.
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.