title: Dynamically adding new rows in JSF
body: <p>I have the following code that allows a user enter some data:</p>
  
  <pre><code>&lt;h:panelGrid columns="2" cellspacing="5"&gt;
      &lt;h:outputLabel value="#{msg.FrequencyOfSpending}" /&gt;
  
      &lt;h:selectOneMenu id="ruleFrequencyOptions" value="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelected}" styleClass="commonSelect"&gt;
          &lt;f:selectItems value="#{Rule.ruleControls.ControlOne.controlParams.Period.validValues}" itemLabelEscaped="true" /&gt;
          &lt;f:ajax event="valueChange" listener="#{Rule.ruleControls.ControlOne.controlParams.Period.valueSelectedChange}" onerror="handleAjaxError" render="rulesGroup" /&gt;
      &lt;/h:selectOneMenu&gt;
  &lt;/h:panelGrid&gt;
  
  &lt;h:panelGroup id="rulesGroup"&gt;
      &lt;a4j:repeat value="#{Rule.ruleParams.Action.properties}" var="RuleParamProperty" id="budgetRuleIterator"&gt;
  
          &lt;h:panelGrid columns="4" cellspacing="5" columnClasses="ruleParamCheckbox, ruleParamAction, ruleParamActionFrequency, ruleParamActionInput"&gt;
  
          &lt;h:selectBooleanCheckbox value="#{RuleParamProperty.selected}" immediate="true"&gt;
              &lt;a4j:ajax event="click" listener="#{RuleParamProperty.selectedChange}"  onerror="handleAjaxError" /&gt;
          &lt;/h:selectBooleanCheckbox&gt;
  
          &lt;h:outputText value="#{msg[RuleParamProperty.name]}" /&gt;
  
          &lt;h:panelGrid columns="3"&gt;
              &lt;h:outputText value="#{msg.Action_1}" /&gt;
              &lt;h:outputText value="#{msg[Rule.ruleControls.ControlOne.controlParams.Period.valueSelected]}" class="italic-text" /&gt;   
              &lt;h:outputText value="#{msg.Action_3}" /&gt;
          &lt;/h:panelGrid&gt;
  
          &lt;h:inputText value="#{RuleParamProperty.inputValue}" /&gt;
  
          &lt;/h:panelGrid&gt;
  
      &lt;/a4j:repeat&gt;
  &lt;/h:panelGroup&gt;
  
  &lt;!--******* Link here to generate row with exact same format as all code above ***--&gt;
  &lt;h:panelGrid columns="2"&gt;
      &lt;img id="AddIcon" src="#{facesContext.externalContext.requestContextPath}/images/icons/add.png" alt="#{msg.addControl}" /&gt;
      &lt;h:link value="#{msg.addControl}" /&gt;
  &lt;/h:panelGrid&gt;
  </code></pre>
  
  <p>I need to add a link to allow them add different variations of this data i.e. user clicks add new control link and a new row appears that allows them enter more data (of the exact same format). They should be able to add multiple rows of the same data.</p>
  
  <p>What is the best way to approach this with JSF2 and Richfaces4?
  Should I put my panelGroups within a table?</p>
  
  <p>Thanks</p>