Articles in this section
Category / Section

Updating Image Widgets Across Multiple Dashboards Simultaneously

Published:

In scenarios where the same image, such as a company logo, is used across multiple dashboards, it can be tedious to update each image widget individually when a change is needed. This article explains how to update all image widgets across your dashboards simultaneously by storing the image URL in a data source and linking it to the image widget.

Step 1: Create a Database with an Image Column

Start by creating a database table that will store the image URL. This URL will be used across your dashboards to display the image in the image widgets. In this article we provided an example using PostgreSQL database for data source connection, user can perform the same with any datasources of their choice.

Example

Create a table named ImagesTable with a column ImageData that stores the image URL:

CREATE TABLE ImagesTable (
    ImageData VARCHAR
);

INSERT INTO ImagesTable (ImageData) VALUES 
('https://www.itqlick.com/Graphics/Modules/Products/Logos/17300.jpg');

Step 2: Create a Data Source with the Image Table

Next, create a data source in your dashboarding tool that pulls data from the ImagesTable you created.

Step 3: Configure the Image Widget in Each Dashboard

For each dashboard that contains an image widget you want to update:

  1. Open the dashboard and navigate to the Properties panel of the image widget.
  2. Select Parameterized URL from the Image Source dropdown.
  3. Choose your preferred display mode (e.g., Uniform).
    image.png
  4. Add the data source created in Step 2 and assign it to the image widget.
  5. Drag and drop the ImageData column to bind the image widget to the URL stored in the database.
    image.png

Repeat this process for each dashboard containing an image widget.

Step 4: Update the Image in the Database

When you need to change the image across all dashboards, simply update the ImageData column in the ImagesTable with the new image URL.

Example

Update the image URL in the database:

UPDATE ImagesTable
SET ImageData = 'https://logo.clearbit.com/https://www.syncfusion.com';

When the dashboards are loaded, they will automatically reflect the updated image, provided that the data source is in Live Mode. If the data source is in Extract Mode, you will need to refresh the data to see the change.
Refer to the article to know about the difference between live and extract data sources.

UpdateImageWidgetDataFromDataBase.gif

Scenario Example

If a dashboard is presented using a specific company logo in the image widget, and there is a need to present the same dashboard with a different logo, instead of updating each image widget individually, simply update the image URL in the database. All dashboards will automatically display the new logo, saving time and ensuring consistency.

Additional References

Was this article useful?
Like
Dislike
Help us improve this page
Please provide feedback or comments
DS
Written by Deepikasri Sathiyakandhan
Updated:
Comments (0)
Please  to leave a comment
Access denied
Access denied