How to add HTML tag in Primefaces <p:panel> header attribute?

Question

I have draw a Primefaces Web page using following code

<p:outputPanel id="TitlePanel">
    <p:outputLabel escape="false" value="#{pageTitle}"/>
</p:outputPanel>

I want now transform this <p:outputPanel> in a toggleable panel using following code.

<p:panel id="TitlePanel" 
         toggleable="true" 
         closable="true"
         >
    <p:outputLabel escape="false" value="#{pageTitle}"/>
    ...
</p:panel>

But this don't work because #{pageTitle} is displayed after header of first panel !

I have tried following code

<p:panel id="TitlePanel" 
         toggleable="true" 
         closable="true"
         header="#{pageTitle}"
         >
    ...
</p:panel>

But this don't work because HTML tag returned by#{pageTitle}are escaped and displayed in title that is not very readable :-)

How can I add HTML tag in 'header' attribute ?

My question is distint from jsf primefaces add p:inputText to p:panel 's header because I search to display output text with specific formatting and the linked question search to insert an input widget in header. The answer is same but the question is different.

Possible duplicate of jsf primefaces add p:inputText to p:panel 's header — Kukeltje

schlebe schlebe · Accepted Answer · 2018-07-10T14:41:03

This can be solved by simply adding following <f:facet name="header"> bloc.

<p:panel id="TitlePanel" 
             toggleable="true" 
             closable="true"
             >
    <f:facet name="header">
        <p:outputLabel value="#{pageTitle}" escape="false"/>
    </f:facet>
    ...
</p:panel>

This solution works for many other PrimeFaces components as well.

How to add HTML tag in Primefaces <p:panel> header attribute?

1 Answers