How to render one panel and stop rendering another panel using selectOneMenu in jsf

Question

I Have following code:

<h:panelGroup rendered="#{UserAccessHandler.isAitfCompany}">
    <!-- For the dropdown sensorlist -->
    <h:outputLabel value="#{labelBundle.device}"
        style="font-weight:bold; padding-right:15px;" />
    <h:selectOneMenu id="testing"
        value="#{SystemHealthPageModel.selectedSensorId}"
        styleClass="facility_dropDown_list">
        <f:selectItem itemValue="----" /> 
        <f:selectItems
            value="#{SystemHealthPageModel.childFacilitySelectionList}" />
        <a4j:ajax event="valueChange" execute="@this"
            render="systemHealthAlert" />
    </h:selectOneMenu>


</h:panelGroup>

<rich:panel id="allSystemHealthAlert">
<alert:system_health_alert alertList="#{SystemHealthPageModel.allSystemAlerts}"
                numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
                displayAssetRelatedData="true"
                moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
</rich:panel>

<rich:panel id="systemHealthAlert">
<alert:system_health_alert alertList="#{SystemHealthPageModel.systemAlerts}"
                numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
                displayAssetRelatedData="true"
                moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
</rich:panel> 

Actually I have two panels. When I will render "systemHealthAlert" panel using selectOneMenu at that time I want to stop render other panel named as "allsystemHealthAlert". For you information "allsystemHealthAlert" is automatically loaded during initial page load. I dont want to render this panel when I will render "systemHealthAlert" panel using selectOneMenu. Is there any way to do that.

Thanks

Answer 1

Wrap your panels in a wider container and point it from your <h:selectOneMenu /> instead. Then, perform a conditional rendering of <rich:panel /> elements depending on #{SystemHealthPageModel.selectedSensorId} value.

<h:selectOneMenu id="testing"
    value="#{SystemHealthPageModel.selectedSensorId}">
    <f:selectItem itemValue="----" /> 
    <f:selectItems
        value="#{SystemHealthPageModel.childFacilitySelectionList}" />
    <a4j:ajax event="valueChange" execute="@this"
        render="grouperPanel" />
</h:selectOneMenu>

<h:panelGroup id="grouperPanel">
    <rich:panel id="allSystemHealthAlert" rendered="#{empty SystemHealthPageModel.selectedSensorId}">
        <alert:system_health_alert alertList="#{SystemHealthPageModel.allSystemAlerts}"
            numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
            displayAssetRelatedData="true"
            moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
    </rich:panel>

    <rich:panel id="systemHealthAlert" rendered="#{not empty SystemHealthPageModel.selectedSensorId}">
        <alert:system_health_alert alertList="#{SystemHealthPageModel.systemAlerts}"
            numberOfRows="#{SystemHealthPageModel.numberOfAlertsToDisplayOnOnePage}"
            displayAssetRelatedData="true"
            moreThanOnePageOfResults="#{SystemHealthPageModel.showMoreThan1PageOfAlerts}"/>
    </rich:panel> 
</h:panelGroup>

Answer 2

We will achieve this using a listener method then rerendering the components.

(1) Code

Your xhtml page :

<h:panelGroup id="panels">
    <rich:panel rendered="#{managedBean.showAllSystem}">
        <h:outputText value="ONEONE" />
    </rich:panel>
    <rich:panel rendered="#{not managedBean.showAllSystem}">
        <h:outputText value="TWOTWO" />
    </rich:panel>
</h:panelGroup>

And

<a4j:ajax listener="#{managedBean.menuValueChanged}" render="panels" />

Your managed bean :

int selectedSensorId;
boolean showAllSystem;

// getters and setters

public void menuValueChanged() {
    // business logic    
    // for example
    if(selectedSensorId == 0) {
        showAllSystem = true;
    } else {
        showAllSystem = false;
    }
}

(2) Workflow

1- First, in order to update a component using AJAX, you should be able to call it by its client id. in case the component is sometimes not rendered, it will be getting a generated client id that you won't be knowing beforehand. One solution is to encapsulate the to-be-rendered components with an always rendered component (Better explained here)

2- in your managed bean you will create a toggle flag, let's call it showAllSystem, if it is true it will show allSystemHealthAlert and hide systemHealthAlert. this flag will be used by the panels' rendered attributes.

3- you will then create the listener method, let's call it menuValueChanged() that will set the showAllSystem flag depending on the selectedSensorId and will be called by the listener in your a4j:ajax tag