The visual editor for Bipp dashboards is a WYSIWYG editor that enables quick creation of dashboards. The editor modifies the underlying Ding model depending on user actions on the editor. If you are not familiar with Ding syntax, you can use this editor to not only edit the dashboard, but also simultaneously refer to the changes to the Ding model file.
The editor includes features to add and configure tiles, sheets, child-dashboards and filters to any dashboard with a few clicks. It comes in two possible views and you can use one of the following views depending on your requirements
The simple view of the editor provides sufficient functionality to create simple dashboards by adding and configuring sheets, static content and filters. This is a subset of the functionality provided in the advanced view.
The advanced view of the editor supports all Ding features by providing the full set of visual elements to edit the corresponding Ding model file.
In both cases the left side of the screen consists of options to add new elements like sheets, dashboards and filters. The top bar consists of options to add new widgets to the dashboard and configure dashboard level properties. The top bar also contains options to save the dashboard and toggle between the advanced and simple views of the editor.
Let us now explore dashboard editor functionality and features in details
Configure Dashboard Settings
The high-level settings applicable to the dashboard may be configured by clicking on the “Dashboard” button in the top bar.
The Dashboard settings pop-up shown below can be used to change the name of the dashboard. Auto-Fetch functionality for the dashboard may be switched on or off on this pop-up. Auto-Fetch =
On implies that data will be fetched as soon as the filters are selected. When Auto-Fetch is set to
Off, a “Fetch” button will be displayed on the dashboard to fetch/refresh data.
Add Sheets and Dashboards
Sheets and dashboards may be added as tiles to the dashboard being edited by clicking on the ”+” next to the name of the sheet or dashboard on the “Add Tile” tab in the left bar. You can search for specific sheets/dashboards by keying in a few characters from their name in the search bar.
Tile Tree and Tile Settings
You can explore the layout of existing tiles on the dashboard and access their configuration settings using the tile tree. This represents the layout of the dashboard in a tree structure with the outermost container tile as the root. Settings corresponding to each of the tiles may be accessed by clicking on the “Settings” icon next to the tile. This would allow you to edit display settings like height, width, margins, panel etc related to the tile. Other settings may also be configured depending on the type of tile. The tile settings may also be accessed by selecting the tile in the layout section and clicking on the settings icon.
Add a Container
Container tiles may be added to the root tile of the dashboard to hold other tiles or widgets. To add a container, select the parent tile/container and click on the “New Container” button in the top bar. This option is also available on click of the ”+” button at the top-right of the parent tile.
Containers may be defined to have horizontal or vertical orientation by setting the “Tile Type” property of the container. This will determine how other widgets will be positioned in the container. The tile tree reflects the hierarchy of a dashboard with containers and tiles added to the container as shown.
Add a Custom Widget
Custom widgets can be used when you wish to include custom content on a dashboard for example logos, static text and hero-images. Custom widgets may be added to the dashboard by clicking on the “New Widget” button in the top bar or in the ”+” menu of the parent tile. Content inside custom widgets is static and can be defined using a combination of Markdown and HTML tags. Custom HTML and CSS may be used and combined with images and links to achieve the desired user interface. This can be defined in the “Content” tab of the widget settings as shown.
Add a Filter Widget
Filter widgets provide functionality to filter the other data on the dashboard. A filter widget is basically a dropdown that will be added to the dashboard and populated with values from a specific column in the source dataset. Values selected in the filter will be applied to other tiles to filter the data when the dashboard is being used. Filter widgets may be added to the dashboard by clicking on the “New Filter” button in the top bar or in the ”+” menu of the parent tile. Filter widgets may also be added by clicking on the table-column name in the explorer on the “Add Filter” tab in the left bar. Filters can be created on the columns available in dataset corresponding to any of the sheets included in the dashboard. Other properties related to the appearance of the dropdown may also be set on the settings screen for the widget as shown.
Add an Avocado
Avocadoes are special tiles that can be replicated in the dashboard. Avoadoes may be used with sheets to apply filters on a sheet in such a way that the sheet gets replicated for different values of specific parameters. The Loop Range and Loop Variables need to specified on the “Settings” for creation of Avocado tiles. The sheet to be replicated should also be selected on the sheet tab under Loop Range.
This will create 3 tiles on the dashboard with data corresponding to “India”, “China” and “Japan”.
Channels allow individual tiles on the dashboard to communicate with each other. Channels provide a mechanism for capturing click events on tile/sheet data and passing the selected value to other tiles or pop-ups for enhanced visualization or drilldown. An unnamed channel exists for every table-column pair on the dashboard. Additionally named channels and pop-up channels may be created using the dashboard editor. Channels can be created by clicking on the Filters button in the top menu bar (Available in advanced view). This will show a list of all existing named/pop-up channels on the dashboard. Click on the “New Channel” button to create a new channel. A channel may be configured as shown below
Following are the implications of the settings configured.
The Table, Column name indicates that the filter will triggered when that particular table-column is clicked on any of the tiles listed in the Publishers section.
The popups section should be included only when a pop-up is required to visualize the drill-down data based on the filter. In this case the pop-up would consume the published filter. This should specify the following
- Resource - Name of the dashboard that should be shown in the pop-up
- Condition - An optional condition specifying for what specific values the pop-up should be shown. Multiple pop-ups may be included for the same channel with different conditions.
- Config - Allows you to specify how and where the pop-up should be shown (in a new window or in the same window)
- Hide Filter - Specify if an option should be shown to filter the parent page instead of viewing the pop-up.
- Params - Specify what parameters should be passed from the main page to the pop-up.
The “Tiles” section specifies the available tiles that may be added as publishers or subscribers of the channel.
Different settings are applicable to different types of tiles and these may be edited by selecting the tile and clicking on the “Settings” icon at the top-right corner of the tile. Settings applicable to the tile will be displayed and may be edited in the pop-up window.
The tabs shown in the pop-up will depend on the type of tile and if you are using the simple or advanced view of the editor. The visual settings as shown above are applicable to all types of tiles.
Tiles may be removed from the dashboard by clicking on the “Delete” icon at the top-right corner of the tile.
Saving the Dashboard
All changes made in the editor will be saved and committed only on click of the “Save” button in the top menu bar. A commit message or comment is required when saving the dashboard. An error message will be displayed if there are any incorrect values provided in the settings. A new version of the dashboard model is created on successful save and the latest dashboard is shown in view mode.