is part of our ongoing how-to series about using the Syncfusion
Dashboard Platform. In this
post, we’ll review how to use the Dashboard Platform’s image widget. On our
YouTube channel you’ll find a full video on this topic.
You can use the image widget to display static images like a company
logo as well as dynamic images like the image of a product or salesperson. With
the Syncfusion Dashboard Platform, many options are available, and this blog
post will demonstrate how to take advantage of them. Note that the information
in this post assumes that the Dashboard Designer is installed and up to date.
We’ll begin by adding a new data source by clicking the Add data source button. In the sample
data source, we have the sales details of a company in one table and the
employee details, including profile images, in another. Next, we create a
dashboard to display the sales performance of the employees, renaming the data
source "Sales details" and naming the dashboard "Sales
1: Adding a Data Source
The dashboard is now built and contains a number of details,
including total leads, converted leads, and the comparison between the current
month and previous month. We have included a combo box filter element, and by making
use of it we can choose one salesperson at a time and view the details specific
to that salesperson. We’re going to add an image widget in the left corner so
that when a salesperson is selected, the corresponding profile picture is
2: Adding the Image Widget
The image widget can be found in the Miscellaneous category of the toolbox. Once it’s dragged into
place, we can configure the image widget by clicking the Configure button. As mentioned previously, the image widget has the
ability to display both static and dynamic images. To display a static image, clear
the Bind from database option and
select an image using the file picker. Click the Set image button and select the desired image.
3: Setting a Static Image
The Bind from database
option allows us to load dynamic images. Images can be loaded from binary data
in our database and from web URLs. In our data source, we have profile pictures
as binary data in one of the fields. Returning to the image widget, in the data
section, we simply drag and drop the profile field to render the image as we
4: Setting a Dynamic Image
Back in the dashboard, clicking the Preview button allows us to check how our images are displayed in
the Dashboard Viewer. We can select other employees to see that images are
dynamically loaded based on the selected salesperson.
Now, let us take a look at the URL option. We can provide the web
URL of a desired image and load images dynamically. In our website, we have a
profile picture for each employee. As we can see, the URL contains a pattern:
the employee ID and the image name. These parameters change for every employee.
We can simply copy this link and paste it into the Pattern text box. Instead of providing
a static link, we’re going to replace both fields—that is, the employee ID and
the image name—with arguments so that the image can be dynamically changed and
the corresponding correct images will be loaded. We’ll edit this and replace
the field with arguments in curly braces.
5: Creating a Dynamic Link Formula
The dynamic link with the pattern is now constructed successfully.
In our database, we have the employee ID field as well as the image name in the
image link field. Returning to the image widget, we have to provide values for
the arguments in the Data section.
The first argument is the employee ID, so we can remove that and drag and drop
the employee ID field to the correct location. The second argument is the image
name. We have it in the image link field, so we can drag and drop it into place.
The image is now loaded successfully. Previewing the dashboard again, we can
see how our updated images are being rendered, even if we update the
6: Creating a Dynamic Link with a Pattern
If you have the complete hyperlink to the image in the database
itself, there is yet another way to display the image. Go to the image widget.
In the Pattern text box, provide an
empty argument. In the Data section,
we can directly add the hyperlink to the column. We can see the image is now
7: Adding an Image via Direct Hyperlink
With our images rendered properly, it’s time to publish the
dashboard. From the server menu, choose the Publish Dashboard option. Click the Publish button to publish the dashboard. To test the published dashboard,
we’ll set another salesperson and check how the image widget is rendered.
8: Publishing the Dashboard
The Dashboard Designer also provides customizations to modify the
image mode. There are several modes available:
- A default mode in which the image will be preserved in its
- A fill mode where the image will be stretched across the entire
- A uniform mode where the original aspect ratio of the image will
You can check out all the mode details in the documentation.
There is also an Ignore
filter actions option available. If your image is bound to the database and
you want or need to ignore filter actions, you can use this option. Be aware
that this may be ineffective if you are loading a static image using the Browse image option.
For more information about Dashboard Platform features, see our
documentation. If you have yet to use the Syncfusion Dashboard Platform, try it
out with a free,