Primefaces,how to collapse layoutUnit with another

Question

I am using primefaces PrimeFaces-3.4 on Mojarra-2.1.10, my full page layout is something like this. How I can make a button in the top, that will collapse west layoutUnit?

Thanks for help.

PS, early assumed that can write something like this:

<layoutUnit position="west" widgetVar='westlayout'> ... </layoutUnit>

//button in the top
<button onlick="westlayout.collapse()"></button>

But unfortunately, widgetVar attribute not existing for layoutUnit.

UPDATE 1: Found similar question, tried. Didn't worked for me, problem was that button with update attribute cannot find text with such identifier, i tried in one layoutUnit, found identifier,but didn't work too.

Answer 1

According to the Layout Client Side API, you can toggle your layoutUnit through layout widgetWar:

<p:layout fullPage="true" widgetVar="layoutWdgt">
    <p:layoutUnit position="north" size="100" header="Top" resizable="true" closable="true" collapsible="true">
        <h:form>
            <p:commandButton value="Toggle" onclick="layoutWdgt.toggle('west')"/>
        </h:form>
    </p:layoutUnit>

    ....

    <p:layoutUnit position="west" size="200" header="Left" resizable="true" closable="true" collapsible="true">
        <h:form>
            <h:outputText value="West Layout unit"/>
        </h:form>
    </p:layoutUnit>
    <p:layoutUnit position="center">
        <h:outputText value="Center Layout unit"/>
    </p:layoutUnit>
</p:layout>

---

EDITED

Starting in PrimeFaces 4, id mapping is still supported but deprecated in favor of PF('XXX')

For PrimeFaces 5.0 and above, you will need to use PF widgetVar to call client side API. So instead of using layoutWdgt.toggle('west') to toggle west layout unit, you need to use PF('layoutWdgt').toggle('west')

Answer 2

Working with Primefaces 6.1:

<p:layout style="min-width:400px;min-height:200px;" widgetVar="layoutWdgt">
    <p:layoutUnit position="west" size="100" minSize="40" maxSize="200" collapsible="true">
        West
         <p:commandButton value="Collapse" onclick="PF('layoutWdgt').toggle('west')"/>
    </p:layoutUnit>
    <p:layoutUnit position="center">
        Center
    </p:layoutUnit>
</p:layout>