What's New

Images in Form and Dashboard

By - Apr 16, 2015

You can integrate images inside your form and dashboard 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 filter display configured

Dashboard with Images

First ensure you have some 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. Once your PNG files are defined, create a dimension attribute of type string to store the image URL. In the example below, we have an image URL for each member of the Product and Entity dimension.

Please make sure your Kepion URL and the location of the image files are using the same service schema (HTTP, or HTTPS).  If your Kepion application is configured under HTTPS (e.g. https://your_kepion_url), you need to upload the image files to a location also with the HTTPS schema.

Entity Dimension with Image URL Attribute

Product Dimension with Image URL Attribute

Next, define your form with the dimensions that contains the image URL. In the example below, we configure the “Logo Link” attribute as the display property, and we check the “Image Link” checkbox 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.

Configure Image in Form

Once configured, your form will display the property as an image.

Form with Images

Next, let’s configure the filter property to include an image URL property so that we can use it on the dashboard.

Configure Image in Filter

From a dashboard, add the form that was configured in the previous steps. Also, add a filter and a filter display to the dashboard. In the example below, we have a form filter for Entity dimension, and also a filter display that is configured with Entity’s “Region Image” attribute. Let’s configure the “Region Image” filter display as an image.

Add Form to Dashboard

Click on the settings icon. Configure the Mode as “Image Link” and select an appropriate Stretch setting.

Configure Image in Filter Display

Now, when you change the form filter, the linked filter display will automatically update based on the selected member.

Dashboard with Images