How to design Dropdown filter with images

Published:

A combo box widget enables users to select a predefined value in the dropdown list. We can customize the dropdown list item with images, and it can be used to make selecting an option easier and more visually appealing. For example, a website may use a dropdown filter with images to allow users to select a product from a list of products, each represented by an image.

The following are steps to achieve the requirement "Dropdown Filter with images":

Step 1: Prepare a sample data source with fields such as an image and an equivalent value field.

NOTE: We can set the image source as a base64 string or a URL link.

Step 2: Configure the datasource in BoldBI.

Step 3: Use the CONCAT function to create a template expression with an image field as follows:

CONCAT('<div style="float: left;margin-right: 10px;"><img src=', [Image URL], ' alt=', [Social Media], ' style="width:20px;height: 18px;"></div>', [Social Media])

Step 4: Bind the field to the filter widget as follows.

Step 4: You can see the dropdown list rendered with images.

We do not recommend binding the HTML to the Bold BI due to potential security concerns. HTML code can be manipulated by attackers to inject harmful code into webpages, introducing XSS (Cross-Site Scripting) attacks, which can lead to performance issues in the dashboard. To mitigate this risk, it is necessary to remove or neutralize any potentially harmful code within HTML, thereby ensuring that only safe and intended content is displayed on web pages.

Was this article useful?

Dislike

Written by Rajendran Murugan

Updated

Comments (0)

How to design Dropdown filter with images

Access denied