Add Image in Form and Dashboard

Author: Kepion Product Team

Introduction

You can integrate images inside your Forms and Dashboards by using display properties. To configure for this scenario, you will need the following:

1. PNG or JPEG image files accessible via the browser
2. A Dimension Attribute of type “string” to store the URL of the PNG/JPEG files
3. A Form with row/column/filter properties
4. A Dashboard with a Filter Display configured

Example

First, ensure you have image files available to use in your application. For best practice, avoid using the Kepion install folder path as a location for your image files. Then, create a Dimension Attribute of type string to store the image URLs. In the example below, we have an image URL for each member of the Product and Entity Dimensions.

Note: Make sure your Kepion URL and the location of the image files are using the same service schema (i.e., HTTP or HTTPS). If your Kepion application is configured under HTTPS, you'll also need to upload the image files to a location with the HTTPS schema.

Next, define a Form with Dimensions that contain the image URL. In the example below, we've configured the Image Link Attribute as the display property for ROW, and checked the Image Link check-box to indicate that this should be displayed as an image. You can also configure the Image Stretch property to determine how the image is rendered.

Now check the Form, and you should see your images displayed.

Next, we'll need to configure the filter property to include an image URL for use in a Dashboard. The rest of the configuration will be done in the Dashboard, all we need to do here is specify the attribute under PROPERTIES -> FILTER.

Now in a Dashboard, add the Form that was configured in the previous steps. Add a Filter and Filter Display to the Dashboard, as well. In the example below, we have a Form Filter for the Entity dimension, and also a Filter Display that is configured with the Entity’s Image Link Attribute.

Now let’s configure the Image Link Filter Display as an image. Click on the  settings icon. Configure the Mode as Image Link and select an appropriate Stretch setting.

Now when you change the Form filter, the linked Filter Display will automatically update based on the selected member.