Optional UI Components

Any UI component on a web page can be made optional. ‘optional’ means two things here:

• Depending on some application logic, the component is displayed or not. Example: When a user checks a checkbox ‘Additional Data Entry’, more input fields are displayed and available for input.
• In web application A, a UI component of a web page is displayed, whereas in a web application B, that UI component is not displayed.

Modeling

In the model you can make individual UI components being optional. You can also make all components of a section of a web page being optional by setting set Optional = true; on the ‘display’ level.

layout PersonView {
    link Children = PersonData, AdditionalPersonData;
}

display PersonData {

    component Input1 : TextField;

    component Input2 : TextField {
        set Optional = true;
    }

    ...
}

display AdditionalPersonData {

    set Optional = true;

    component Input3 : TextField;

    ...
}

Generated Code in Web Fragment

The following code fragments are related to the above example model.

In PersonViewBean.java you find the following:

private boolean renderedInput1PersonData = true;

private boolean renderedAdditionalPersonData = true;

...

public boolean isRenderedInput1PersonData() {
    ...
}

public boolean isRenderedAdditionalPersonData() {
    ...
}

In PersonViewBeanCustomization.java you find the same kind of code, which has the purpose of setting a default value and allowing to override that default setting from a web application.

private boolean renderedInput1PersonData = true;

private boolean renderedAdditionalPersonData = true;

...

public boolean isRenderedInput1PersonData() {
    ...
}

public boolean isRenderedAdditionalPersonData() {
    ...
}

In personView_generated.xhtml you find the following code that uses the above methods. Please note that some code has been left out and a few line breaks are added here to make the sample code more readable.

...
<p:panelGrid
    id="mainForm_personDataPanelGrid">
    ...
    <p:outputLabel 
        id="personDataPanelGrid_Input1Label"
        for="personDataPanelGrid_input1"
        ...
        rendered="#{personViewBeanCustomization.isRenderedInput1PersonData()
                    and
                    personViewBean.renderedInput1PersonData}"/>
    <p:inputText
        id="personDataPanelGrid_input1"
        ...
        rendered="#{personViewBeanCustomization.isRenderedInput1PersonData()
                    and
                    personViewBean.renderedInput1PersonData}"/>
    ...
</p:panelGrid>
...
<p:panelGrid
    id="mainForm_additionalPersonDataPanelGrid"
    ...
    rendered="#{personViewBeanCustomization.isRenderedAdditionalPersonData()
                and
                personViewBean.renderedAdditionalPersonData}">
    ...
</p:panelGrid>

If the isRendered...() method in the PersonViewBeanCustomization class returns false, then the corresponding UI component is not displayed. Customize the code in that class when you want a UI component not being displayed by default. If you want a UI component being displayed depending on application logic, then set the field rendered... in PersonViewBean class. Finally, if you want to overwrite the default setting for the rendering of a UI component, you have to manually write code in classes that are generated by the web application generator.

Note

The visibility of a label that is related to an optional UI component is automatically controlled with the same logic as the UI component itself. No additional modeling or coding is required to get that.

Generated Code in Web Application

The web application contains a generated Java class AppPersonViewBeanCustomization. That class has the following code:

public Boolean isRenderedInput1PersonData() {
    return null;
}

public Boolean isRenderedAdditionalPersonData() {
    return null;
}

By default these methods return null. When you want a UI component not being displayed at all, then let the corresponding method return false (return Boolean.FALSE;).