Search code examples
htmljsfconditional-rendering

Conditionally render template text as bold

For my inbox page, in this page user will be able to see messages, message will have 2 types of state ( Not yet started, In_progress)..

dataTable where user will be able to see all messages will have 3 columns:

Data, title, actions

State of messages comes from services. My task is, to add BOLDED word "NEW" to the title of every message that user hadn't opened yet.

After opening, state will change to "in_progress" and bolded word "NEW" should disapear.

Or there is idea insted of NEW to use some kind of icon.

What I have done so far is :

<p:column headerText="#{msg.title}">
    <h:outputText value="#{task.properties.bpm_status=='Not Yet Started'?'New ':''}" />
    <h:outputText value="#{task.properties.bpm_description}" />
</p:column>

Problem is, I can't correctly add <b></b> to bold it or to add icon instead.

I've tried to add <b></b> arround 'New' but I get error in that case.

Solution

  • You can use <ui:fragment> to conditionally render template text.

    <ui:fragment rendered="#{task.properties.bpm_status eq 'Not Yet Started'}">
    <b>New</b>
</ui:fragment>

    Alternatively, apply a style class.

    <h:outputText value="New" styleClass="new" rendered="#{task.properties.bpm_status eq 'Not Yet Started'}" />

    .new {
    font-weight: bold;
}

    Using inline styles via style attribute is poor practice as it isn't abstract/reusable.