Steps to Enable File/Image Downloads in the Bold BI Grid Widget

This article provides step-by-step instructions on how to enable the downloading of images/files from a Bold BI widget using the URL linking feature, with two different solutions tailored to different needs.

Steps to Enable Downloading from links in Widget

Sample data:

Solution 1: Downloading from Embedded Widget

Step 1: Select the Grid Widget

• Navigate to the properties of the grid widget you wish to configure.
• Enable the Link option to allow for linking functionality.

Step 2: Append the Image Fields to the URL

• Identify the column in the grid that corresponds to the field you want to download.
• Append this column to the URL. For example, if you have an image field that you want to download, you can append them to the URL.
• To do this, double-click the field in the append column, and it will automatically be added to the URL column.

For Single Image Download:

• If you’re downloading just one image, double-click the corresponding image field in the append column. This action will automatically append the selected image field to the URL column.

  Example:

  • Let’s say the field you’re working with is image.png. After double-clicking, the URL column will display a link that includes this single image file.
    
    

For Multiple Images Download:

• If you need to download multiple images, repeat the process for each image field by double-clicking them. Each selected image will be added to the URL column.

  Example:

  • Suppose you have multiple images such as image1.png, image2.png, etc. Each of these fields, when double-clicked, will be appended to the URL, allowing you to download all the selected images.
    
    
    
    
    

Step 3: Embed the Dashboard

• Once the URL is configured, embed the dashboard in your application.
• Implement the beforeNavigateLinkingURL event in the JavaScript file and handle the download logic using the below function.

Here is a sample implementation:

beforeNavigateUrlLinking: function (args) {
    debugger;
    // Add your download logic here
}

• All the selected fields can be accessed through the args->linkInfo->parameterDetails object in your JavaScript code. This allows you to retrieve the necessary data for the download process.

Solution 2: Downloading from Bold BI server

Step 1: Prepare Your Images:

• Ensure that the images you want to compress are ready and accessible

Step 2: Compress Images:

• Use a compression tool to create a zip file containing the necessary images. This can typically be done by selecting the images, right-clicking, and choosing the option to compress or zip them.

Step 3: Construct the Download URL:

• To download the compressed images, you will need to append the appropriate column in the URL that corresponds to the field you wish to download. The URL format will look something like this:

Step 4: Initiate the Download:

• Clicking the constructed URL will initiate the download of the zip file directly to your device.
• The zip file contains image1 and image2.
  
  

Additional References

• Linking urls and dashboards rows
• How to Implement Dynamic URL Linking in Bold BI Dashboards