Rendering Attribute Values via Icons

Overview

Web Center supports rendering read-only attributes with a fixed set of values via icons.Each icon represents an attribute value.

We demonstrate how to use the renderer by means of a sample.

Attribute Risk Level

The user attribute risk level is set by the risk calculation algorithm to one of the values 0, 1, 2 and 3.

For display purposes, the numeric values are mapped to localized display values by localized proposal lists in folder cn=Risk Levels, cn=Nationalization, cn=Proposal Lists, cn=Customer Extensions, cn=Configuration, cn=domain.

The English display values are for example “No risk” (0), “Low” (1), “Medium” (2) and “High” (3).

Risk level checks can be activated or deactivated via the domain configuration flag “Risk check active”.

The LDAP attribute name for risk levels is dxrRskLevel (not dxrRiskLevel !)

Displaying the Risk Level in Web Center

Web Center displays the risk level on user summary pages, in user lists and many other pages.Assignment approval pages indicate that a user’s risk level will change to “High” should the assignment be approved.

Here’s a user list showing the default risk level icons:

Default risk level icons

You can see two additional icons:

  • risk levels with no value - indicates risk levels with no value at all (which means the risk level has not been calculated yet)

  • risk levels outside the supported value set - indicates risk levels outside the supported value set (0, 1, 2, and 3).

An alternative set of icons mimics traffic lights:

alternative set of icons mimicing traffic lights

Web Center displays risk levels only if risk level checks are enabled.For that reason, it makes the value of the domain configuration flag “Risk check active” available in the application-scoped Boolean attribute “com.siemens.webMgr.riskCheckEnabled”.

Configuring Web Center

Defining the Icon Renderers

The renderers are defined in file

WEB-INF/config/renderers-config.xml.

The Base Icon Renderer:

The renderer is based upon an HTML snippet for displaying an icon as HTML form field, and a Javascript snippet for diplaying an icon in a list column.

<renderer id="icon"
    className=
        "com.siemens.webMgr.taglib.view.renderers.IconRenderer"
    defURL="/WEB-INF/snippets/icon/icon.htm"
    jsURL="/WEB-INF/snippets/icon/icon.js">
    <renderer-property
        name="titleUndefined" value="icon.title.undefined"/>
    <renderer-property
        name="titleUnsupported" value="icon.title.unsupported"/>
    <renderer-property
        name="iconStyleClass" value="iconProperty"/>
</renderer>

The renderer specific properties are

  • folder – the name of the folder containing the icons. Specify the name relative to the application’s document root folder.

  • iconPrefix – the icon name prefix.

  • iconSuffix – the icon name suffix.

  • iconUnsupported – the name of the icon representing unsupported property values.

  • iconUndefined – the name of the icon representing properties with no value.

  • titleUnsupported – the tooltip for the icon representing unsupported property values.

  • titleUndefined – the tooltip for the icon representing properties with no value.

  • iconStyleClass – the CSS class name for the icons.

The base renderer defines just default tooltips and the CSS style sheet for the icons, but leaves all other properties unspecified.

The list renderer supports two special properties that control how to react on clicking an icon:

  • link:true – open the entry in the corresponding row

  • toggleSelection:true – toggle the selection state of the entry in the corresponding row

By default, a click will have no effect at all. Since the way how to react depends on the specific use case, the properties are usually set via an attribute of the risk level’s data property in the list configuration (see chapter “Configuring Forms” below for an example).

The Risk Level Renderer:

Renderer “riskLevel” extends the base icon renderer:

<renderer id="riskLevel" extends="icon">
    <renderer-property
        name="folder" value="resources/images/riskLevel/discs"/>
    <renderer-property name="iconPrefix"      value="level-"/>
    <renderer-property name="iconSuffix"      value=".png"/>
    <renderer-property name="iconUnsupported" value="unsupported.png"/>
    <renderer-property name="iconUndefined"   value="undefined.png"/>
    <renderer-property
        name="titleUndefined" value="icon.title.notCalculated"/>
</renderer>

The icons representing the risk level values are expected to be in folder resources/images/riskLevel/discs with names

  • level-0.png

  • level-1.png

  • level-2.png

  • level-3.png

  • unsupported.png

  • undefined.png

To activate the alternative traffic light icons, just change the value of renderer property “folder”:

<renderer-property
    name="folder" value="resources/images/riskLevel/trafficLights"/>

Setting the Default Renderer

The default renderers are defined in file

WEB-INF/config/defaultRenderer.properties.

Renderer “riskLevel” is assigned as default renderer to property “dxrRskLevel”:

dxrrsklevel = riskLevel

Adjusting the Icon Layout via CSS

CSS styles are defined per font size in file

resources/build/styles/fontSize/styles.css.

The icon layout is controlled by CSS class “iconProperty”. The class just sets the icon height to 18 pixels.

.iconProperty {
    height:18px;
}

Providing the Icons

Copy all icons with their proper names to the folder configured for the renderer. The icons are expected to be of height 18 pixels; otherwise they might look somehow distorted.

You can change the expected height by modifying CSS class “iconProperty” or by assigning your own CSS class to the icon renderer but you should check whether the result meets your expectations.

Configuring Forms

Form fields and table columns are configured in configuration files

WEB-INF/config/…/forms-config.xml.

Form Property

To display the risk level as an HTML form field, just add a corresponding form property to the form configuration.

<form-property
    name="dxrRskLevel"
    type="java.lang.String"
    readonly="true"
    visible=
        "${applicationScope['com.siemens.webMgr.riskCheckEnabled']}"
/>

The field is visible only if risk checks are enabled for the domain.

Data Property

To display the risk level in a list column, just add a corresponding data property to the list configuration.

<data-property
    name="dxrRskLevel"
    type="java.lang.String"
    align="center"
    width="1%"
    rendererProperties="link:true"
    visible=
        "${applicationScope['com.siemens.webMgr.riskCheckEnabled']}"
/>

Again, the column is visible only if risk checks are enabled for the domain. Clicking an icon will open the entry in the corresponding row since renderer property “link” is set to “true”.

Localizing Labels and Tooltips

The localized texts are defined per language in message file

WEB-INF/classes/resources/language/text.properties.

Icon Tooltips

The message keys are referenced in the icon renderer definition.

icon.title.undefined     = No value defined
icon.title.notCalculated = Not calculated
icon.title.unsupported   = Unsupported value: {0}

The argument {0} in the last message is replaced with the actual risk level value at runtime.

Labels

The label for attribute dxrRskLevel is assigned to the default message key for attribute labels:

ldap.attribute.dxrRskLevel = Risk