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 and permissions.
The simple view of the editor provides sufficient functionality to create simple dashboards by adding and configuring sheets/insights, 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 menu-footer consists of options to add new communication channels to the dashboard. Dashboard level properties can be configured by clicking on the Settings icon at the top right of the screen. The top bar also contains options to preview the dashboard, 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
The high-level settings applicable to the dashboard may be configured by clicking on the Settings icon in the top bar. The Dashboard settings pop-up shown below can be used to change the following.
- Name of the dashboard: This is the name that would appear at the top left corner of the screen.
- Auto-Fetch: Auto-fetch functionality for dashboard data may be switched on or off on this pop-up. Auto-Fetch =
Onimplies that data will be fetched as soon as the filters are selected. When Auto-Fetch is set to
Off, an “Apply” button will be displayed on the dashboard to fetch/refresh data based on selected filters.
- Auto Refresh Time: The Auto Refresh Time may also be set to automatically refresh the dashboard data at the specified intervals.
- No Padding: This feature may be used to remove the padding between sheets and the browser window on the dashboard.
- Full Screen: Enabling this feature allows you to view a larger version of the dashboard screen.
Sheets and Dashboards
Sheets and dashboards may be added as tiles to the dashboard being edited by clicking on the name of the sheet or dashboard on the “Insights” 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.
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 “Container” button indicated by a square icon in the menu footer.
Containers may be defined to have horizontal or vertical orientation by setting the “Tile Type” property of the container in Tile Settings. This will determine how other widgets will be positioned in the container.
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 Custom Widget” button in the menu footer indicated by an “A” icon. 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.
Custom widgets can also publish to channels so that clicking on specific content in the custom widget will result in a filter being applied corresponding to the channel. This can be achieved using HTML content in the custom widget with a “data-channel-details” attribute as shown in the following code snippet. Here “channel_462” is the name of the channel created for the column city.
<div style='color:blue'> <div data-channel-details=channel_462@Jefferson> Only for Jefferson </div><br> <div data-channel-details=channel_462@Anchorage> Only for Anchorage </div> </div>
This will result in two lines of text on the custom widget on the dashboard. Clicking on any of these will add the corresponding filter to the dashboard.
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 table-column name in the explorer on the “Filters” tab in the left bar. Filters can be created on the columns available in the dataset corresponding to any of the sheets included in the dashboard.
Other properties related to the appearance and behaviour of the dropdown may also be set on the settings screen for the widget as shown.
If the column selected for filter is of date datatype, the filter displayed will be suitable for selection of range of dates or a specific date/day in relation to current date. For example you can choose to view data for Today, Yesterday, Last n days, Before 2019, Q1 2020 and so on.
Avocado’s are special tiles that can be replicated in the dashboard. Avoado’s 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. Avocado tiles may be added by clicking on the Add Avocado Tile icon in the menu footer indicated by two overlapping squares. The Loop Range and Loop Variables need to be 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 Channels button in the menu footer (Available in advanced view). This will show a list of all existing named and pop-up channels on the dashboard. Click on the “New Channel” button to create a new channel. A pop-up channel may be configured as shown below
Following are the implications of the settings configured.
The Table, Column name indicates that the filter will be 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 or sheet 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 that should be passed from the main page to the pop-up. These will become filters that are applied to the popup dashboard and can be removed or de-selected like any other filters that are applied to dashboards.
The “Tiles” section specifies the available tiles that may be added as publishers or subscribers of the channel.
In general all components on the dashboard are called tiles that are arranged on the dashboard. Following functions are available to change the tiles layout and display.
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. This would allow you to edit display settings like title, height, width, margins, panel etc related to the tile. Other settings may also be configured depending on the type of tile.
The tile title may contain Markdown or HTML. It can also be used to publish to a channel on the dashboard by using the “data-channel-details” attribute in the title HTML as shown in the following code and screenshot.
<div data-channel-details=channel_462@Jefferson>Crimes for Jefferson</div>
This will publish the filter value “Jefferson” on the channel “channel_462”.
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.
The layout, content and data may be previewed by clicking on the “Preview” button in the top menu bar. Dashboards can be previewed without saving. This would show the dashboard exactly as it would appear on save/publish. On exiting the preview, control returns to the dashboard editor.
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.