How to Add an Image in Widgets from a Database in Bold BI

In Bold BI, you can add images to your widgets directly from your database. This can be done by connecting to your SQL server data source and adding a custom column to your query for the image column. Here are the steps to do this:

Adding Images from Designer View

1. Drag and drop the image widget into the Canvas.
   

   

2. Click the Data source button in the configuration panel.
   

   

3. Click the create new button to launch a new connection from the connection type panel.
   

   

4. In the connection type panel, click any one (Here, the Microsoft Excel Connection type is selected for demonstration) of the listed connection type button shown.
   

   

5. In the new data source configuration panel, fill the connection type and related details. Click the Preview & Connect button.
   

   

6. Drag your preferred table or view from the left pane from the data design view, click the Save button.
   

   

7. Click the Properties button in the configuration panel. Now, the property pane opens and then clicking the assign data button.
   

   

8. Drag and drop image column from the dimension section to Column section.
   

   

9. In the properties panel, under Basic settings, select the options in the Image Source drop down. if you choose local, You can browse the image from your local system. if you choose URL, You can give the URL of the image which must be a valid URL. if you choose parameterized URL, Parameterized URL option allows the user to pick an image from the data source field to the image widget.
   Through the column section in the assigned data, we can add N number of fields. The fields can be represented using the {N-1} parameter, starting from {0}.
   

   

10. The image will now be displayed in the widget.
    

    

Adding Images from Code View

1. Connect to your SQL server data source.
2. Switch to Code view mode.
   
   
3. Enter your query. Additionally, add the following custom column to your query for the image column:
   Syntax:

cast('' as xml).value('xs:base64Binary(sql:column("tablename.imagecolumnname"))', 'varchar(max)' ) AS [aliasname]

4. Click the Run button.
   
   
5. Save the data source.
6. Drag and drop the image widget onto your dashboard.
   
   
7. Assign the newly added column to the image widget.
   
   
8. Click on the properties panel of the image widget.
9. In the properties panel, under Basic settings, select the options in the Image Source drop down. Enter the following text in the Pattern textbox:

data:image/jpeg;base64,{0}

10. The image will now be displayed in the widget.

By following these steps, you can easily add images to your widgets directly from your database, enhancing the visual appeal and effectiveness of your dashboards.