Introduction
Modelers can add images to forms and dashboards. In the example below, we replaced the names of car companies with images of their logos and added a flag that changes to match the selected Entity dimension member.
This article explains how to add images to your forms and dashboards.
Before you start
You will need:
- Image files accessible with your browser.
- A string dimension attribute to store the URL of the image files.
- A form with row/column/filter properties.
- A dashboard with a filter display configured.
Create string attribute
First, you must create and configure a dimension attribute to store the image URLs.
1. Download the images to use in your application.
Tip: Avoid holding your images in the Kepion install folder path.
2. In the Modeler, go to the Attributes 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. Select OK.
In the example below, we have an image URL for each member of the Product and Entity dimensions.
Note: Ensure your Kepion URL and the location of the image files are using the same service schema (HTTP or HTTPS). If your application is configured under HTTPS, you must also upload the image files to a location with the HTTPS schema.
Product Dimension
Entity Dimension
6. Create and define a form using the dimensions containing the image URLs.
We will add the images of the car brands to the form and the images of the flags to the dashboard. Jump to the article section that addresses your needs:
Add image to form
Let's replace the car brands on the form's rows with their associated logos.
1. In the Modeler, go to a form and select Edit.
2. Go to Properties > Row and select Add.
Tip: You can also add images to the columns and filters.
3. Select [Image Link] and then OK.
4. Under Attribute for Link, select Image Link. You can also configure the Image property to determine how the image is rendered.
Go to the General tab to view the form. You should see your images displayed.
Add image to dashboard
Let's work on adding images to the dashboard. We'll add a filter display component to the dashboard to show the flag matching each Entity dimension member.
1. Go to a form and select Edit.
2. Go to Properties > Filter and select Add.
3. Select the [Image Link] property.
4. Go to your dashboard, right-click the page, and select Add Filter Display.
5. Select the form and filter display property.
In the example below, we have an Entity filter and a filter display configured with the Entity’s Image Link attribute.
6. Select the filter display icon ().
7. Go to Behavior and select Image from the Type dropdown and an appropriate Image Stretch setting.
When you select a different entity, the flag (linked filter display) will automatically update.