Supercharge your Dashboard with SAP Design Studio!

Make your Dashboards more intuitive with SAP Design Studio

Read in [est_time]

SAP BusinessObjects Design Studio enables you to create analysis applications and dashboards. The product offers a design tool that allows you to create applications with a WYSIWYG editor without the need for native HTML and iPad UI programming skills. Visualization components like charts and tables and interaction components like filters and dropdowns can be positioned on the screen using drag and drop. The logic for user interaction and events is scripted in the BI Action Language (BIAL), a subset of the JavaScript standard. You can also develop third-party components with the Design Studio SDK to extend the default feature set that Design Studio provides.

View Component

To cover complex dashboard requirements at multiple projects, Just-BI has developed the so-called View Component. This is a custom component that enables you to create any type of component; charts, tables, date pickers, geo maps, anything is possible. It acts like a container to which any HTML, JavaScript and CSS can be added.
It’s a very useful solution for requirements that cannot be built with default components provided with a standard Design Studio installation. Below is a non-exhaustive list of feature examples for which Just-BI leveraged the View Component.

Date range picker

  • Use a single component to select a date range
  • Allow selection of timestamps, not just dates
  • Restrict the earliest start date, latest end date, and maximum span between start and end date
  • Add a list of predefined date ranges

Dropdown

  • Use a single dropdown that can be configured for single or multi select
  • Include a search field to filter the dropdown items
  • Display a placeholder text when no item has been selected yet
  • Display a message when no date could be retrieved

Table

  • Make use of group headers
  • Filter the grid with various options
  • Export the data as CSV/Excel
  • Format rows based on cell contents
  • Include traffic lights
  • Show the grid in full screen

Chart

  • Format texts in the axes, titles, tooltips, labels etc.
  • Apply drill down functionality
  • Display the chart in full screen
  • Configure what to display in the tooltip

Geo Map

  • Style shapes and bubbles just the way you want
  • Configure what to display in the tooltip
  • Configure how the legend should be displayed
  • Show the map in full screen
  • Display the geographic coordinates of your cursor position

Data Component

Another interesting feature is that multiple data sources can be used in a single view component. To consume data in a view component, a data source is first bound to a data component. This is an additional custom component used to pass data from a data source to a view component. It can also be used to store mockup data, e.g. in case the backend build is still in while designing the dashboard needs to start already.

By default, an SDK component can only bound to a single data source. The data component acts like a separate layer in-between data source and SDK component. Multiple data components – and thus multiple data sources – can be connected to a single view component.  This can be useful when each data source represents a single chart series or geo map layer. It can also be used to let one data source act as a configurator and another to display actual data.

Templates

When the view component is used to create multiple components of the same type, e.g. numerous custom dropdowns, it’s of course undesirable to create each new custom component from scratch. To tackle this problem, we created templates that resemble complete components like date range pickers, dropdowns, charts etc. Every time a new view component is dragged on the layout, you can choose from a list of templates that the view component should represent. This gives you a head start and avoids creating the component from the ground up.

Templates can include references to dependencies like JavaScript files and CSS files. This helps to keep a centralized code base and allows to greatly extend the functionality.

Configuration Panel

The templates also come with a configuration panel that allows you to fully customize the component without having to delve into code. These customization options are comparable in operation to the properties from the standard components, but of course extend the default possibilities. All the properties that are set in the configuration panel can also be dynamically updated using DS BIAL Script.

Developer Panel

If you don’t select an initial template, you can also create your own custom visualization or interaction component by switching to the developer panel. In this panel, you have editors for HTML, JavaScript and CSS at your disposal. This panel is also used to create Configuration Panels for the custom component.  To access this panel, you will first have to provide a developer key. The developer panel is locked by default to prevent unwanted component code changes.

The developer panel is also used to create new templates. When a specific state of a view component needs to be saved for later use, you can simply export all the code and save it as a new template. Existing templates can also be updated this way.

Summary

The view component is a custom component that acts like a container to which any HTML, JavaScript and CSS can be added. This provides a very flexible way to create any type of component with just one type of SDK component. You can bind multiple data sources to a single view component separate Data Components. With predefined templates, you can easily convert and configure a view component to specific ready-to-use components like date range pickers, drop-down lists, charts or tables. Additionally, it contains a panel to allow for custom editing of HTML, JavaScript and CSS.

There is far more to tell and we have some very nice full-fledged interactive demos to show you. If you are interested, please don’t hesitate to contact us!

This article belongs to
Tags
  • chart
  • Component
  • Dashboards
  • datasource
  • daterangepicker
  • Design Studio
  • dropdown
  • GeoMap
  • grid
  • SAP
  • SDK
  • table
Author
  • Michiel Pors