There are various situations when you may prefer to display an image icon rather than the actual value of a data item. If the value has a number of predefined values, such as a Status field, then you can dynamically display an image instead.
There are broadly two types of approach to implementing this capability:
For either of these approaches, the first step is to ensure that your images that are required are loaded into the webapp repository.
In this example create a sub-directory in the ..\repository\webapp\images directory for your project in the repository.
This will contain the images to be used for each status value.
Attached to this FAQ is a zip with a folder and images that can be used to test out the approach.
The second step is to ensure that your field is configured correctly and has the correct data bindings defined, to ensure it maps to an element with an appropriate value.
Using Conditional Styling for Outputs
For this approach we would recommend that a field is added to the form and set as an output field.
The next step is to add a new CSS file to the page or application details on the Application Map screen. You can cut and paste the content below and add it to the new CSS file as an example.
This particular example is using a "sprite", which is one large image with all the individual images embedded or tiled vertically. The various CSS styles described above will re-position up/down the image to display the appropriate value.
For this approach each image is exactly the same size on the sprite background. Each individual image is 24x24 pixels vertically tiled.
Note: You can create your own sprites within any size required, but remeber the rep-positioning and initial height/width will need to be changed.
Alternatively, rather than using one sprite image and re-positioning, each of the styles could just have its own individual image. We have provided examples, but the CSS above does not reflect this approach. Rather than re-positioning, you would simply reference the required background-image in each of the date element value class names. The background-image in the initial class could be a default value or removed completely.
The next stage is to set the details on the Field Details screen. Move to the Field Style Details section for the field:
The final stage is to go to the Data Bindings screen and configure the Dynamic Element Style bindings for the field.
There are two bindings required here, one to indicate when the conditional styling should be applied, and one to indicate where to get the name of the class to apply.
In this case we can set both of these to the same value as we want to apply the style if there is a status value, and we also want to use this status value as the class name.
It is likely that this will be the same binding as the existing Field Value entry.
At this point the actual image displayed should change if the data binding element value matches the style name used in the CSS (normal, readonly, noversion, +?+?-? in the example CSS above).
The main value of this approach is if the names of the actual images are not necassarily aligned with the data element values. For example, the data element might have a value of 1,2,3,etc., but your images are called: ..._checked, ..._modified, ...readonly, etc.
Note: We would recommend this first approach is the optimum for flexibility and performance, although the second approach is simpler.
Using Dynamic Data Bindings for Images
This second approach relies on a relative relationship between the data element values and the names of the actual images in the webapp. For example, the images provided are constructed as follows: file_status_checked.png, file_status_modified.png, etc.
The attached directory contains a series of example individual Status images.
With this approach you define the control to be used as an image, and then set its Location (URL) to a "dynamic" binding on the Field Details screen.
The final stage is to go to the Data Bindings screen and drag the element from the data that contains the status value onto the Field Value binding.
But, the xpath binding will need to be manually enhanced to perform an xpath function known as "concat".
This function will allow you to concatenate some string values and the xpath data element value together in order to construct the URL location of the image required for each status value (relative or absolute).
The concat function is a series of strings or xpath values separated with commas, and enclosed in round brackets. In this example it is constructing a relative URL location within the webapp, where the image files have been placed:
concat('images/file_status_icons/file_status_',/mvc:eForm/mvc :D ata/mvc:formData/mvc:file_status,'.png')
This statement will dynamically determine the exact location of the image to be used based on the value from the data element. Clearly you need to ensure that you have an image for each status value for your data element.
There are broadly two types of approach to implementing this capability:
- Using Conditional Styling to dynamically change the CSS class used for an Output field (or other field if required e.g. Hyperlink) [/*]
- Using dynamic data bindings for Images to construct an image location based on a data value [/*]
For either of these approaches, the first step is to ensure that your images that are required are loaded into the webapp repository.
In this example create a sub-directory in the ..\repository\webapp\images directory for your project in the repository.
This will contain the images to be used for each status value.
Attached to this FAQ is a zip with a folder and images that can be used to test out the approach.
The second step is to ensure that your field is configured correctly and has the correct data bindings defined, to ensure it maps to an element with an appropriate value.
Using Conditional Styling for Outputs
For this approach we would recommend that a field is added to the form and set as an output field.
The next step is to add a new CSS file to the page or application details on the Application Map screen. You can cut and paste the content below and add it to the new CSS file as an example.
.sprite_file_status
{
display: inline-block;
background: url(../images/file_status_icons/sprite_file_status.png);
background-position: 0px 0px;
background-repeat: no-repeat;
height: 24px;
width: 24px;
}
/* NOTE: As the style names are on the same element in the HTML, there should not be a space between the class names below */
.sprite_file_status.normal
{
background-position: 0px -0px !IMPORTANT;
}
.sprite_file_status.readonly
{
background-position: 0px -24px !IMPORTANT;
}
.sprite_file_status.noversion
{
background-position: 0px -48px !IMPORTANT;
}
.sprite_file_status.checked
{
background-position: 0px -72px !IMPORTANT;
}
.sprite_file_status.modified
{
background-position: 0px -96px !IMPORTANT;
}
.sprite_file_status.locked
{
background-position: 0px -120px !IMPORTANT;
}
.sprite_file_status.deleted
{
background-position: 0px -144px !IMPORTANT;
} This particular example is using a "sprite", which is one large image with all the individual images embedded or tiled vertically. The various CSS styles described above will re-position up/down the image to display the appropriate value.
For this approach each image is exactly the same size on the sprite background. Each individual image is 24x24 pixels vertically tiled.
Note: You can create your own sprites within any size required, but remeber the rep-positioning and initial height/width will need to be changed.
Alternatively, rather than using one sprite image and re-positioning, each of the styles could just have its own individual image. We have provided examples, but the CSS above does not reflect this approach. Rather than re-positioning, you would simply reference the required background-image in each of the date element value class names. The background-image in the initial class could be a default value or removed completely.
The next stage is to set the details on the Field Details screen. Move to the Field Style Details section for the field:
- Control Style (class) - Add the class name for the sprite image e.g. sprite_file_status [/*]
- Click on the Add Conditional Control Styling button to add an entry and tick the "dynamic" option.[/*]
The final stage is to go to the Data Bindings screen and configure the Dynamic Element Style bindings for the field.
There are two bindings required here, one to indicate when the conditional styling should be applied, and one to indicate where to get the name of the class to apply.
In this case we can set both of these to the same value as we want to apply the style if there is a status value, and we also want to use this status value as the class name.
It is likely that this will be the same binding as the existing Field Value entry.
At this point the actual image displayed should change if the data binding element value matches the style name used in the CSS (normal, readonly, noversion, +?+?-? in the example CSS above).
The main value of this approach is if the names of the actual images are not necassarily aligned with the data element values. For example, the data element might have a value of 1,2,3,etc., but your images are called: ..._checked, ..._modified, ...readonly, etc.
Note: We would recommend this first approach is the optimum for flexibility and performance, although the second approach is simpler.
Using Dynamic Data Bindings for Images
This second approach relies on a relative relationship between the data element values and the names of the actual images in the webapp. For example, the images provided are constructed as follows: file_status_checked.png, file_status_modified.png, etc.
The attached directory contains a series of example individual Status images.
With this approach you define the control to be used as an image, and then set its Location (URL) to a "dynamic" binding on the Field Details screen.
The final stage is to go to the Data Bindings screen and drag the element from the data that contains the status value onto the Field Value binding.
But, the xpath binding will need to be manually enhanced to perform an xpath function known as "concat".
This function will allow you to concatenate some string values and the xpath data element value together in order to construct the URL location of the image required for each status value (relative or absolute).
The concat function is a series of strings or xpath values separated with commas, and enclosed in round brackets. In this example it is constructing a relative URL location within the webapp, where the image files have been placed:
concat('images/file_status_icons/file_status_',/mvc:eForm/mvc :D ata/mvc:formData/mvc:file_status,'.png')
This statement will dynamically determine the exact location of the image to be used based on the value from the data element. Clearly you need to ensure that you have an image for each status value for your data element.
Attachment