Question

So I have a page that asks users to input peoples information that I will use to do a search within a database for more robust demographics. The issue I am having is that when then are adding people to look for in the search (via a ) I am adding new row to the Column.

The users are saying they don’t want vertical rendering of the array. They want Horizontal rendering, which means a new column for each parent object. And only the parent so the rest if the addRow work just fine for them, however they want to do side by side compares. I am lost on how to do this via jsf/jsp. Here is what I currently have:

<div style="overflow: auto; width: 1250px; height: 200px;">
<h:dataTable var="root" value="#{bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].values}" styleClass="MaxWidth" headerClass="ArrayHeader">
    <h:column>
        <f:facet name="header">
            <h:outputText styleClass="ArrayLabel" value="Persons"/>
        </f:facet>
    </h:column>
    <h:column>
        <f:facet name="header">
            <h:panelGrid columns="2" columnClasses="MaxWidth"> 
                <h:outputText value="" /> 
                <h:commandLink value="#{bundle['MSG_ARRAY_ADD_ENTRY']}" styleClass="NavigationLink" binding="#{commandLink.instance}"
disabled="#{!bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].addPossible}"
action="#{bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].addRow}"/>
            </h:panelGrid>
        </f:facet> 
        <h:panelGrid columns="2" styleClass="ArrayEntryHeader" columnClasses="MaxWidth">
            <h:outputText styleClass="ArrayLabel" value="Create Case Person" />
            <h:commandLink value="#{bundle['MSG_ARRAY_REMOVE_ENTRY']}"  styleClass="NavigationLink"
binding="#{commandLink.instance}"
disabled="#{!bcCreateMessageHandler.bcCreateInstance.inputValuesArray['/newParent/Persons[]/'].removePossible}"
action="#{root['~REMOVE~'].removeRow}"/>
        </h:panelGrid> 
        <h:outputText value=""/>
        <h:panelGrid columns="2">
            <h:outputText styleClass="ViewFieldLabel" value="PersonFirstName"/>
            <h:inputText id="PersonFirstName_ID" styleClass="ViewEntryField" value="#{root['PersonFirstName']}" required="false"/>
            <h:outputText styleClass="ViewFieldLabel" value="Person's Last Name"/>
            <h:inputText id="PersonLastName_ID" styleClass="ViewEntryField" value="#{root['PersonLastName']}" required="false"/>
            <h:outputText styleClass="ViewFieldLabel" value="Person's Middle Name"/>
            <h:inputText id="PersonMiddleName_ID" styleClass="ViewEntryField" value="#{root['PersonMiddleName']}" required="false"/>
            <h:outputText styleClass="ViewFieldLabel" value="Date of Birth"/>
            <h:panelGroup>
                <h:inputText id="DateOfBirth_ID" styleClass="ViewEntryField" value="#{root['DateOfBirth']}" required="false">
                    <hx:convertDateTime type="date"/>
                    <hx:inputHelperDatePicker/>
                </h:inputText>
                <h:message styleClass="errorDetailsValidation" for="DateOfBirth_ID"/>
            </h:panelGroup>
            <h:outputText styleClass="ViewFieldLabel" value="SUPER ID"/>
            <h:panelGroup>
                <h:inputText id="SUPERID_ID" styleClass="ViewEntryField" value="#{root['SUPERID']}" required="false">
                    <f:converter converterId="IntegerConverter"/>
                </h:inputText>
                <h:message styleClass="errorDetailsValidation" for="SUPERID_ID"/>
            </h:panelGroup>
        </h:panelGrid>  
        <h:outputText value=""/>
        <h:dataTable var="nested_1_1_1" value="#{root['OtherIDs[]/'].values}" styleClass="MaxWidth" headerClass="ArrayHeader">     
            <h:column>
                <f:facet name="header">
                    <h:outputText styleClass="ArrayLabel" value="OtherIDs"/>
                </f:facet>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:panelGrid columns="2" columnClasses="MaxWidth"> 
                        <h:outputText value="" /> 
                        <h:commandLink value="#{bundle['MSG_ARRAY_ADD_ENTRY']}" styleClass="NavigationLink"
binding="#{commandLink.instance}"
disabled="#{!root['OtherIDs[]/'].addPossible}"
action="#{root['OtherIDs[]/'].addRow}"/>
                    </h:panelGrid>
                </f:facet> 
                <h:panelGrid columns="2" styleClass="ArrayEntryHeader" columnClasses="MaxWidth">
                    <h:outputText styleClass="ArrayLabel" value="Other ID" />
                    <h:commandLink value="#{bundle['MSG_ARRAY_REMOVE_ENTRY']}"  styleClass="NavigationLink"
binding="#{commandLink.instance}"
disabled="#{!root['OtherIDs[]/'].removePossible}"
action="#{nested_1_1_1['~REMOVE~'].removeRow}"/>
                </h:panelGrid>
                <h:outputText value=""/>
                <h:panelGrid columns="2">
                    <h:outputText styleClass="ViewFieldLabel" value="ID"/>
                    <h:inputText id="ID_ID" styleClass="ViewEntryField" value="#{nested_1_1_1['ID']}" required="false"/>
                    <h:outputText styleClass="ViewFieldLabel" value="Source System of Other ID"/>
                    <h:selectOneMenu styleClass="ViewEntryField" value="#{nested_1_1_1['IdType']}">
                        <f:selectItem itemValue="TYPE1" itemLabel="TYPE1"/>
                        <f:selectItem itemValue="TYPE2" itemLabel="TYPE2"/>
                    </h:selectOneMenu>
                </h:panelGrid>
            </h:column>
        </h:dataTable>
        <h:outputText value=""/>
        <h:panelGrid columns="2">
            <h:outputText styleClass="ViewFieldLabel" value="Gender"/>
            <h:selectOneMenu styleClass="ViewEntryField" value="#{root['Gender']}">
                <f:selectItem itemValue="M" itemLabel="M"/>
                <f:selectItem itemValue="F" itemLabel="F"/>
                <f:selectItem itemValue="U" itemLabel="U"/>
            </h:selectOneMenu>
        </h:panelGrid>  
        <h:outputText value=""/>
        <h:dataTable var="nested_1_2_1" value="#{root['AliasNames[]/'].values}" styleClass="MaxWidth" headerClass="ArrayHeader">     
            <h:column>
                <f:facet name="header">
                    <h:outputText styleClass="ArrayLabel" value="AliasNames"/>
                </f:facet>
            </h:column>
            <h:column>
                <f:facet name="header">
                    <h:panelGrid columns="2" columnClasses="MaxWidth"> 
                        <h:outputText value="" /> 
                        <h:commandLink value="#{bundle['MSG_ARRAY_ADD_ENTRY']}" styleClass="NavigationLink"
binding="#{commandLink.instance}"
disabled="#{!root['AliasNames[]/'].addPossible}"
action="#{root['AliasNames[]/'].addRow}"/>
                    </h:panelGrid>
                </f:facet> 
                <h:panelGrid columns="2" styleClass="ArrayEntryHeader" columnClasses="MaxWidth">
                    <h:outputText styleClass="ArrayLabel" value="aliasNames" />
                    <h:commandLink value="#{bundle['MSG_ARRAY_REMOVE_ENTRY']}"  styleClass="NavigationLink"
binding="#{commandLink.instance}"
disabled="#{!root['AliasNames[]/'].removePossible}"
action="#{nested_1_2_1['~REMOVE~'].removeRow}"/>
                </h:panelGrid>
                <h:outputText value=""/>
                <h:panelGrid columns="2">
                    <h:outputText styleClass="ViewFieldLabel" value="Last Name"/>
                    <h:inputText id="LastName_ID" styleClass="ViewEntryField" value="#{nested_1_2_1['LastName']}" required="false"/>
                    <h:outputText styleClass="ViewFieldLabel" value="First Name"/>
                    <h:inputText id="FirstName_ID" styleClass="ViewEntryField" value="#{nested_1_2_1['FirstName']}" required="false"/>
                    <h:outputText styleClass="ViewFieldLabel" value="Middle Name"/>
                    <h:inputText id="Middle_ID" styleClass="ViewEntryField" value="#{nested_1_2_1['Middle']}" required="false"/>
                </h:panelGrid>
            </h:column>
        </h:dataTable>
        <h:outputText value=""/>
        <h:panelGrid columns="2">
            <h:outputText styleClass="ViewFieldLabel" value="Date Person Expired"/>
            <h:panelGroup>
                <h:inputText id="DateExpired_ID" styleClass="ViewEntryField" value="#{root['DateExpired']}" required="false">
                    <hx:convertDateTime type="date"/>
                    <hx:inputHelperDatePicker/>
                </h:inputText>
                <h:message styleClass="errorDetailsValidation" for="DateExpired_ID"/>
            </h:panelGroup>
        </h:panelGrid>
    </h:column>
</h:dataTable>

Answer 1

So if you want to add columns dynamically to your dataTable you can do it in two ways, binding your dataTable to your backing bean OR using a third party component library like RichFaces which enables you to have powered data tables where you can define a columns tag to dynamically create them. Choose one of them, integrating Richfaces implies adding the corresponding libraries to your classpath and configuring them.