1. Home
  2. help
  3. How to Create a KPI Card Widget
  4. Adding Images to the KPI Card

Adding Images to the KPI Card

Now, I am going to configure image data for the KPI Card widget. I can add an image using several different methods that are outlined below.

In the “Assign Data” tab under the Image and Background Image boxes, I can bind an image field from my data source.

Image and Background Image Sections

In the “Properties” tab, I can browse images from my local system, bind a URL from my data, or build a parameterized URL.

Types of image uploading process

Now, I am going to bind an image field in the image box. I can see the image for the sales type “online” in my widget.

KPI card with Image

I can also add the image by using the “Properties” tab. Further, this option allows me to add an image to my widget even if I do not have it in my data source. So, let me see how this can be achieved.

When I scroll down the “Properties” window, I find the Image section. Here, the “Parameterized URL” image type was selected since we added the field in the Image section. In my data source, I have a single parameter for an image URL. Also, we can add multiple parameters by binding the proper image field with respect to the URL in the Image section.

Parameterized URL image type

Now, I am going to browse for an image from my local storage by selecting the image type “Local”. Selecting the “Show Image” option will allow me to display the selected image in my widget.

Local image type

KPI Card with local image

Now, I am going to choose the image type “URL”. Then, I will paste my URL in the text box, and my widget will show the image accordingly.

URL image type

KPI card with url image

The Background Image configuration is also the same as the image; thus, my widget will show the image in its background.

KPI Card with background image

Now my widget shows the percentage value of sales for which I have received payment with an interactive image.

Was this article helpful to you? Yes No