How-to: Navigate the Syncfusion Dashboard Designer Interface

In this post, we will walk you through design interfaces and the options available in the Syncfusion Dashboard Designer for creating attractive dashboards. To watch the full video on this topic, visit our YouTube page.

The Dashboard Designer mainly contains three design views or surfaces:

  • Dashboard designer view
  • Data design view
  • Widget design view

Dashboard Designer view

The first one is the actual dashboard designer view. This is the landing page when you open the dashboard designer application:

Dashboard designer view

You have the design canvas in the middle, the toolbox at the left side, and various item containers on the right side. Basically, this is the region where you’ll be designing the dashboard.
The design canvas has a grid where you can drag widgets from the toolbox. By default, the design canvas has a snap-to-grid approach, which helps in laying out and aligning the widgets easily. You can resize the widgets and move them around in the empty region. You can also use your keyboard arrow keys to do the same.
The toolbox has widgets such as charts, grids, filter elements, and many more under different categories. You can also include your own custom widgets using the widget menu. In the menu, choose the Manage Custom Widgets option and include your custom widget by clicking Add Widget.

Including a custom widget

For more details regarding custom widgets, check out our video Introduction to Custom Widgets. The accompanying blog will be forthcoming.

On the right side of the design canvas, we have an array of containers that show various items such as dashboards, data sources, widgets, and linked dashboards that are used in the current instance. Each container has its own options, such as adding a new element, importing one from the server, duplicating one, and many more. Further, each item in the containers comes with a context menu that provides a few additional options, such as publishing and resetting the properties.

Dashboards, Data Sources, Widgets, and Linked Dashboards containers

And finally, the dashboard designer view contains a toolbar with buttons for adding data sources, managing filter actions, and more.

Dashboard designer view toolbar

These buttons are contextual, so whenever an item is selected, these buttons will change. In the previous image, the dashboard is selected, so the options related to the dashboard are shown. If a widget is selected, then the quick options for the widget are shown in the toolbar.

Data design view

The second design surface is the data design view. You see this when you add a data source, connect to a server, and choose your data. You can also open the data design view at any time from the data source container. You can double-click an item in it, or use the edit icon at the bottom of the container to open the data design view.