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
- 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
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.
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
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.