Repeating tables often display output related data for navigation or editing purposes. In many situations it is desirable to suppress the display of the raw data, but convert the data to an associated image or style instead.
A common example, could be displaying a ticked checkbox icon if a value is set for a boolean (true/false, 0/1, yes/no, etc).
The stages to implement this feature are:
However, it is likely that you need to add a predicate option (filter) to the xpath, so that the style is only applied if a particular value is present. The simplest approach is to add a predicate at the end of the xpath name e.g. [. = 'yes']. This predicate says that if the current field value ('.') is equal to 'yes' then apply the style.
If you generate the page and preview or test the application, then you should now see that the column is empty by default, and contains a ticked checkbox image if the value is 'yes'.
Note: It is possible to repeat the steps above and define a number of different styles containing images that could be displayed for a field value. A common example of this method is if the requirement needs to have a number of different images associated with the status value of a field e.g. An account is active, disabled or being setup. Simply create a number of conditional styling options for each style and associated image required.
There are other approaches for dynamically constructing an image filename for an image control that may be more applicable for this scenario.
A common example, could be displaying a ticked checkbox icon if a value is set for a boolean (true/false, 0/1, yes/no, etc).
The stages to implement this feature are:
- Visit the 'Field Details' tab in FormMaker and change the field 'Value is' from 'dynamic binding' to 'static'. This will mean that the actual value of the field will no longer be displayed in the column.
[/*] - Open up the 'Field Style Details' section and click on the 'Add Conditional Control Styling'. This will open a field where the class name 'checkboxTrue' should be added. This value defines a particular style in the demo.css that contains the image to be displayed. You can change the image associated with the style, or create other style names for similar purposes.
[/*] - The final step is to go to the 'Data Bindings' tab for the Field. A 'Apply 'checkboxTrue' Element Style If ...' binding will have appeared. This binding needs to contain the xpath check for the field that decides if the style is applied. You can initially drag on a field from the right hand panel into the xpath field. This means that if there is a value in the field then apply the style.[/*]
However, it is likely that you need to add a predicate option (filter) to the xpath, so that the style is only applied if a particular value is present. The simplest approach is to add a predicate at the end of the xpath name e.g. [. = 'yes']. This predicate says that if the current field value ('.') is equal to 'yes' then apply the style.
If you generate the page and preview or test the application, then you should now see that the column is empty by default, and contains a ticked checkbox image if the value is 'yes'.
Note: It is possible to repeat the steps above and define a number of different styles containing images that could be displayed for a field value. A common example of this method is if the requirement needs to have a number of different images associated with the status value of a field e.g. An account is active, disabled or being setup. Simply create a number of conditional styling options for each style and associated image required.
There are other approaches for dynamically constructing an image filename for an image control that may be more applicable for this scenario.