Quick Start with Syncfusion Dashboard Platform

This is a quick walkthrough to get you started with Syncfusion Dashboard Platform.

Platform overview

Syncfusion Dashboard Platform has two essential components mainly for designing the dashboards and sharing the dashboards. (either internally or publicly).

Syncfusion Dashboard Designer

  • The Syncfusion Dashboard Designer application connects you to the data and visualizes them as dashboards by using the data visualization and filter widgets.

  • The dashboard designer with a preview engine is called as a dashboard viewer; it is used for quickly testing authored dashboards without publishing to a server.

  • The composed dashboard can be published or updated to the dashboard server to share within the designer application itself.

Syncfusion Dashboard Server

The Syncfusion Dashboard Server allows you to efficiently organize and share dashboards through a web interface.

Install and configure the Syncfusion Dashboard Designer

Download the required setup

You can download the Syncfusion Dashboard Platform products from here. Licensed customers can also download the install from the downloads section. You can download either as EXE file or as ZIP file and extract the EXE.

DashboardDesigner Download Page

Save it in the preferred location in your machine. Before installing the dashboard designer, please ensure the minimum system requirements from here.

Installing Dashboard Designer

Run the installer by double-clicking the EXE file from the saved location.

Installation window of dashboard designer

Read and accept the license terms and conditions by checking the option I agree to the License Terms and Conditions and click Next.

License terms

Browse to the location where you want to install the Dashboard Designer application, and then click Next.

Install location window

Read and accept the Consent the install CefSharp binaries and Dependencies and ` click NEXT.

IMPORTANT

cefSharp is a lightweight .NET wrapper around the Chromium Embedded Framework (CEF) for WPF and WinForms web browser control implementations. CefSharp is BSD licensed, so it can be used in both proprietary and free/open source applications. However, additional non-BSD dependencies may be needed. CefSharp binaries and their dependencies are mandatory to render the dashboard widgets in the designer surface.

Cef sharp agree window

Read and accept the Consent to deploy PhantomJS Webkit, and then click Install.

IMPORTANT

PhantomJS is a headless WebKit script-able with JavaScript. This is a free software/open source, and it may contain MIT,BSD,LGPL or GPL, or other similar licenses that contain third-party code. This executable file is necessary to achieve Image and PDF export functionalities in Dashboard and widgets. Without this file, the image and PDF export options in the Dashboard and widgets will no longer be available. If you choose to download PhantomJS, must accept all terms and conditions if you want to use it with Syncfusion’s products.

NOTE

If you have any problem with internet connection, unselect the PhantomJS download option and continue to install.

phantomJS agree window

Now, the installation begins. You can cancel the installation at anytime by pressing Cancel.

Installing window

After the dashboard designer application installation has been completed, the above screen will appear. Click Finish to close the installation wizard and run the newly installed dashboard designer. You can also run the application later through unchecking the option Run Dashboard Designer.

Installation complete

Install and configure the Syncfusion Dashboard Server

This topic describes about the steps required to install the dashboard server.

Latest Syncfusion Dashboard Server comes with a User Management Server which is a separate application for managing your users and the applications. To know more about User Management Server click here.

NOTE

Latest User Management Server is mandatory to run Syncfusion Dashboard Server version 3.2

To learn about the system requirements needed to deploy the dashboard server along with the user management server in your business environment, refer System Requirements.

Download the required setup

You can download the Syncfusion Dashboard Platform products from here. Licensed customers can also download the install from the downloads section. You can download either as EXE file or as ZIP file and extract the EXE.

Dashboard server download page

Run the dashboard server installer

Run the dashboard server installer.

installing dashboard server

Type in the credentials of your Syncfusion account to unlock the setup.

Server credentails

You can alternatively type in the unlock key that has been sent to your registered e-mail address to unlock the setup by selecting the Install with product key.

Product key

You can check the license agreement of the dashboard server by clicking I agree to the License Terms and Conditions.
After reading the license agreement, click the Next to select the installation server type, location, and the port number on which the dashboard server and user management server has to be hosted.

The dashboard server to be hosted provides the following two web server types:

  • IIS Express
  • IIS

IIS Express

Installation Location and IIS Port Changes

Install User Management Server option will install the User Management Server in mentioned port number.

Installation User Management Server IIS Express

Connect to User Management Server on a different machine option will able to connect Dashboard Server to the latest User Management on another machine. You can find how to connect to User Management Server here.

Connect User Management Server IIS Express

IIS

Need to provide the Port number, Location and Site Name to host the Dashboard Server and User Management Server into the IIS.

Installation Location, IIS Port Changes and Site Name

Install User Management Server option will host the User Management Server in mentioned port number.

Installation User Management Server IIS

Connect to User Management Server on a different machine option will able to connect Dashboard Server to the latest User Management on another machine. You can find how to connect to User Management Server here.

Connect User Management Server IIS

After completing the installation, you can start the dashboard server by checking the Start Dashboard Server in the last screen and click Finish.

Installing dashboard server

Installation complete

Or you can also start the dashboard server through the shortcuts available in the desktop.

Desktop shortcuts will be provided to start and stop the dashboard server and for the dashboard designer.

Dashboard server startup and user creation

After successful installation of Dashboard Server and User Management Server. Start the Dashboard Server.

To configure Dashboard Server, you must configure the User Management Server first.

CONFIGURE UMS

Configure User Management Server by providing Storage Options, Storage System and System Administrator details and click proceed
After successful configuration of User Management Server, it will be redirected Dashboard Server startup.

You can find the details on How to configure User Management Server here

NOTE

An application of type Dashboard Server will be created automatically in User Management Server and System administrator group for Dashboard server will be created in User Management Server.

Use same database credentials of UMS option will use the same database credentials of User Management Server except the database name.

USE SAME DATABASE CREDENTIALS

Configure Dashboard Server by providing Storage Options, Storage System.

You can find the details on How to configure Dashboard Server here

Choose option to startup with or without including the sample resources and click proceed.

INCLUDE SAMPLES

After successful configuration of Dashboard Server, it will be redirected to login page.

DASHBOARD SERVER LOGIN PAGE

NOTE

Dashboard Server system administrator will be automatically added from User Management Server.

Authoring your first dashboard using dashboard designer

This section explains about creating your first dashboard using the dashboard designer application.

Open Syncfusion Dashboard Designer using desktop shortcut or through windows search option.

Dashboard designer

Adding the data source

The first step is to add a valid data source into the dashboard report. Click Add and select the data source type and required data source name to create the data source.

Add data source

In this example, the SQLITE connection type data source is used. Click the connect to create a new data source.

SQLITE data source

Now, the data source will be created and the data design view tab will be opened as shown in the below screenshot:

Data design page

If the data source contains only one table, then it will be automatically added to the table canvas.

Data source toolbar provides you option for changing to query view, Joining tables, Applying data filters,Adding expressions, Refreshing the connection , Editing the data connection ,Executing the parameters etc.

Data source tool bar

You can add any number of data sources to the dashboard report, and the added data sources will be listed in the data source container box.

Data source container

The data source container box allows you to rename the data source, edit the data source, publish the data source, delete the data source, duplicate the data source, import the already saved data sources, exporting the current data sources to local, etc.

Configuring the widgets

After the data source is added, you can add widgets into the design canvas. Wide range of pre-defined widgets are available in the toolbox of the dashboard designer tab.

Widgets panel

Drag and drop the widget from the toolbox into the design canvas. Resize the widget as desired.

Drop widget

Resize widget

Next, you should assign the data for the widget shown. Click Assign Data available in the tool bar.

Assign data button

Now, the corresponding widget tab will be opened.

The widget tab shows the preview of the widget and two internal tabs called Data and Properties which respectively allows you to assign the data and customize the properties of the widget. The drop-down box near the internal tabs is used to select the data source by which you can configure the widget.

Data tab in control designer

Drag and drop the fields into the required section.

Drop field

You can also right-click the field and use the option from the context menu.

Right click option of schemas

You can preview the widget in the widget tab, the widget will be refreshed based on the changes in the data/properties tab.

Widget preview page

Go to the properties tab of the widget to customize the properties of widgets.

Properties tab

Provide meaningful title and description to the widget for better visualization.

Title of widget

Similarly, you can add the other required widgets to the layout. The following image shows the completed dashboard:

Dashboard page

Set the meaningful title and description to the dashboard by using the edit option in the dashboard tab toolbar.

Title edit option

Saving the dashboard report

Now, you can save the first dashboard report into your machine.

Save dashboard

The dashboard report files are saved with the extension SYDX.

save dashboard in local

Preview the dashboard

You can preview the dashboard in your local browser by clicking the preview.

Preview option

The dashboard will be rendered in your browser with the help of built-in dashboard viewer control. You can interact with the dashboard like applying the filters, exporting the dashboards into PDF, Excel, image formats, etc., using the dashboard viewer.

Preview in browser

Publishing your first dashboard

You can publish the created dashboard into the dashboard server to share with other users.

Log in to dashboard server account

For publishing the dashboard designer, you must log in to your dashboard server account. Click the user icon shown in the below screenshot to open the log in window.

Login option

Enter the valid server URL and credentials to log in to your server account.

Login window

Now, the logged in user name will be shown in the icon.

User details

Click the publish dashboard which is available in the server menu.

Publish dashboard option

Enter the details and click next to proceed.

Publish window

Click publish to complete the publishing.

Publishing options

After the successful completion, the following message will be shown. To view the dashboard on server, click yes, otherwise click no.

Successful message

Previewing the published dashboard from the dashboard server

Go to the dashboard server page in your web browser.

Dashboard view in server

Now, click the expand option (>>) to view all your dashboards.

View all dashboards

The published dashboard will be listed in the All Categories tab.

All categories

Click the dashboard to render the dashboard report in the server.

Select dashboard

Syncfusion dashboard designer allows different types of permission for a same dashboard to different users based on their log in. Refer here for managing the permission for different users in the dashboard server.

Refer the other sections of the help documentation to get more detailed information about the features of dashboard designer, server, and SDK platforms.

Create a support incident

If you are still not able to find the information that you are looking for the self-help resources mentioned above, please contact us by creating a support ticket.