Collapse or expand p:accordionPanel programmatically

jsf-2.2primefaces

What I am trying to achieve is?

  • After Load Button Clicked, If any one of the textfield is set, So in result the "accordion panel" filter should expand.

  • After Load Button Clicked, If all text fields are not set, So in result the "accordion panel" filter should collapse.

I have gone through accordion panel primefaces documentation but could not found it helpful.
http://www.primefaces.org/docs/vdl/3.5/primefaces-p/accordionPanel.html

I have gone through previously asked question on stackoverflow, the answer to this question also could not satisfy me to achieve my required result.

Expanding Accordion Panel in PrimeFaces with a RadioButton click

ManagedBean


    package com.pk.test;

    import javax.faces.bean.ManagedBean;

    @ManagedBean(name="testBean")
    public class AccordionTestBean {

        private String name;

        private String semester;

        private String age;

        private Boolean checkNameTextField = false;

        public void save(){
            System.out.println("Close Filter If any one field of form is set");
            System.out.println("Name: "+getName());
            System.out.println("Age: "+getAge());
            System.out.println("Semester: "+getSemester());
            if(getName()!= null){
                setCheckNameTextField(true);
    //if name textfield is set to a value, on save click filter will not collapse or close
            }
            else
                setCheckNameTextField(false);
    //if name textfield is set to a value, on save click filter will collapse

        }

        public String getName() {
            return name;
        }

        public void setName(String name) {
            this.name = name;
        }

        public String getSemester() {
            return semester;
        }

        public void setSemester(String semester) {
            this.semester = semester;
        }

        public String getAge() {
            return age;
        }

        public void setAge(String age) {
            this.age = age;
        }

        public Boolean getCheckNameTextField() {
            return checkNameTextField;
        }

        public void setCheckNameTextField(Boolean checkNameTextField) {
            this.checkNameTextField = checkNameTextField;
        }
    }

FrontEnd File

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:c="http://java.sun.com/jsp/jstl/core"
    xmlns:p="http://primefaces.org/ui">
<h:head>

</h:head>
<body>
    <h:form id="formId">
        <p:accordionPanel id="accordion" cache="false" activeIndex="-1"
            style="margin-bottom:20px;width:330px;" widgetVar="acc">
            <p:ajax event="tabClose" listener="#{testBean.checkNameTextField}" />

            <p:tab title="Filter:"
                titleStyle="width:330px;background-color:#DAEDF4">
                <h:panelGrid columns="2">
                    <h:outputLabel value="Name" />
                    <h:inputText value="#{testBean.name}" />

                    <h:outputLabel value="Age" />
                    <h:inputText value="#{testBean.age}" />

                    <h:outputLabel value="Semester" />
                    <h:inputText value="#{testBean.semester}" />

                </h:panelGrid>
                <p:commandButton icon="ui-icon-save" value="Save"
                    action="#{testBean.save}"
                    onclick="PF('formId:accordion').hide();" />
            </p:tab>
        </p:accordionPanel>
    </h:form>

</body>
</html>

Best Answer

I did'n understand what you are trying to do, but to expand/colapse an accordion panel you can use this

expand: PF('accordian-widgetVar').select(index)

collapse: PF('accordian-widgetVar').unselect(index)

where accordian-widgetVar is the value of the property widgetVar of your accordionPanel and index is the index of the tab that you want to expand/collapse

also you can execute that from a bean like this RequestContext.getCurrentInstance().execute("PF('accordian-widgetVar').unselect(index)");

Related Topic