Dashboard Builder

As a developper, you just integrate one single script inside your codebase! You leave the visualization and layout configuration to your non-techy colleagues!

Self Service Vizualiastion

Want to offer a Self Service Vizualisation Experience to your end-users with a brand new editor for data neophytes?

Have a look here!

Current Limitations

As it’s still under development, there’s some limitations right now.

For stories, following elements aren’t available:

  • Additional Panel: Settings Requesters tab
  • Additional Panel: Comment tab

For the edition/creation workflow:

  • Can’t edit data-storytelling elements

Why is it powerful ?

The Dashboard Builder is:

  • Embedded Stories & Tiles Editor
  • Easy layout configuration through drag&drop and resize
  • Responsive Layout

Two Grid System

To help you answer all kind of use cases, we offer you two different grid systems:

Simple Grid

A 4 columns grid useful for large screens. Responsiveness is handled by reducing the number of columns according to the window’s width.

  • 4 columns: container’s width >= 1072px
  • 3 columns: container’s width < 1072px and >= 728px
  • 2 columns: container’s width < 728px and >=384px
  • 1 column: container’s width < 384px
Dashboard Builder Simple Grid

Dashboard Builder Simple Grid

Advanced Grid

A 12 columns grid (also known as the 960 System) is more flexible and precise (both in widths and heights). Responsiveness is handled by resizing the content widths while keeping the same number of columns. If the container width is less than 384px, the grid will be displayed only on 1 column.

Dashboard Builder Advanced Grid

Dashboard Builder Advanced Grid

Dashboard Filters Templating

You can use the value of Dashboard Filters with templating using the following synthax:

<%= filters['filter_ID'].column_name %>

You can find a Dashboard Filter ID in its configuration form under the section “Other options”, in the fiedl “ID”.

Deep Customization

Using the web component integration, you are able to target the DOM of our Dashboard Builder and make massive changes on the style of it: change colors of border, radius of grid items, etc… Be careful when adapting colors or other class to fit to your own application. We’ve made some research to apply the best guidelines for understanding and readability. You will be responsible of the css applied on your application.

Warning

CSS classes can change during the product’s life

Follow the link to see a live example

Workflow creation

You have now a new “Embed” section inside your toolbar that allows you to discover a new universe dedicated to emeddedable dashboards.

Toolbar Access

Toolbar Access

Here you are! You can see previously created embedded dashboards and create a new one!

Dashboard Builder Home

Dashboard Builder Home

We can now begin our journey to create a beautiful dashboard! You can use all the stories that you have created on your small app!

Note

Don’t forget to publish your stories and/or home tiles to be able to use them on your dashboard.

Dashboard Builder Empty

Dashboard Builder Empty

Click on “insert a row” to add a story or a tile!

Dashboard Builder Choose Content

Dashboard Builder Choose Content

There you are, your first dashboards’s tile! You can add content directly from the empty placeholders!

Dashboard Builder First Tile

Dashboard Builder First Tile

If you’ve got contribute rights, you can also edit in-place your tile!

Dashboard Builder Content Editor

Dashboard Builder Content Editor

Now give an appealing name to your dashboard!

Dashboard Builder Rename Button

Dashboard Builder Rename Button

Dashboard Builder Rename Input

Dashboard Builder Rename Input

Now you can publish it to show your work to everyone!

Dashboard Builder Publish

Dashboard Builder Publish

And there you go, you can now export it! You will be able to work again on your dashboard even when it’s integrated in your app!

Dashboard Builder Export

Dashboard Builder Export

Workflow Layout edition

You can easily resize, drag & drop or remove your stories and tiles from your Dashboard Builder!

Worfklow End User

Here is an example of what it will look like for your end users who don’t have edition rights. Looks pretty, right ?