Add Image in Form and Dashboard

Author: Kepion Product Team

You can insert images in your Forms and Dashboards by using display properties.

 

To add images, you will need the following:

 

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

 

 

 

Create Image Link Attribute

1. Download the image files to use in your Application.

 

Tip: Avoid holding your images in the Kepion install folder path.

 

2. In the Modeler, go to the Attribute node of your target Dimension(s).

 

 

3. Select Add  to create a Dimension Attribute. 

4. Select String as the Type and configure the other fields as desired. 

 

 

5. Click Save. 

 

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.

 

Product Dimension

 

Entity Dimension

 

6. Create and define a Form with Dimensions containing the image URL.

 

Add Image in Form

1. Go to Properties > Row and click Add. 

 

 

Tip: You can also add images to the columns and Filters. 

 

2. Select [Image Link] and click Add. 

 

 

3. Under Attribute for Link, select Image Link. You can also configure the Image Stretch property to determine how the image is rendered.

 

 

Go to the Main tab to view the Form. You should see your images displayed.

 

 

Add Image to Dashboard

1. Go to Properties > Filter and click Add. 

2. Select the [Image Link] property for the Entity Dimension. 

 

 

3. Go to the Dashboard Editor, right-click the workspace, and select Add Form. Select the Form configured in the previous steps.

4. Right-click and 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.

 

 

5. Click and go to Behavior. 

6. Select Image Link from the Type drop-down, and select an appropriate Stretch setting from the Image Stretch drop-down.

 

 

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