Wednesday, February 9, 2011

Displaying different Images in ADF table based on some condition Part-I

If we want to display different image inside table then we can achieve that using af:switcher component.

Suppose we have a table in which we have a column as Status.
Let's say this table is the result table of any search Query.
After the search, in the Status column the values gets populated as "S" or "E".
S represents Success and E represents Error.
Below is the result table with the column Status having values "S" and "E":

We want to replace this "S" by a success logo and "E" by an error logo.
the final screen will look like this:


If we look into the code of the Status Column, it looks like this:

<af:column sortProperty="StatusFlag" sortable="true"
headerText="#{bindings.SerachResultVO1.hints.StatusFlag.label}"
id="c2">
<af:outputText value="#{row.StatusFlag}" id="ot8"/>
</af:column>

We need to use af:switcher to test the condition. so I have added Switcher and assigned  the value of StatusFlag into facetName. The switcher will render the facet matching "facetName".

<af:column sortProperty="StatusFlag" sortable="true"
headerText="#{bindings.SerachResultVO1.hints.StatusFlag.label}"
id="c2">
<af:switcher id="s11" facetName="#{row.StatusFlag}">
<f:facet name="S">
<af:image source="/images/success.gif" id="i1"/>
</f:facet>
<f:facet name="E">
<af:image source="/images/failure.gif" id="i2"/>
</f:facet>
</af:switcher>
</af:column>

Now when we run the code, images appears on the screen in place of S and E. :)

I would like to tell something about Tag af:switcher
The switcher component dynamically decides which facet component should be rendered. It has two properties. The switcher will render the facet matching "facetName"; however, if no such facet exists (or "facetName" is null), and "defaultFacet" has been set, then that facet will be used instead. (It's possible to achieve this same functionality by using a panelGroup and binding the "rendered" property of each child, but this component can be simpler. Ordinary children of the switcher component are not rendered at all.)
The switcher is a purely logical server-side component. It does not generate any content itself and has no client-side representation (no client component). Hence switching which facet of the switcher renders requires a server round-trip.













10 comments:

  1. Excelent post, it just helped me with an issue I had...
    Keep going
    Victor Velazco

    ReplyDelete
  2. i have a issue here, if say i want to display onle the S image and keep the other columns empty what should i do

    ReplyDelete