title: SAP UI5: Addition of formContainers dynamically to form
body: <p>Requirement is to add an existing formcontainer (in form) if the checkbox (Add Terminal) is checked. Note the same set of inputs are to be added in another container. So, its basically an copy of container already added in form.Tried using addFormContainer() and insertFormContainer(), but none of this seemed to work.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>   &lt;form:Form id="terminalForm" width="100%" editable="true" visible="true"&gt;
      &lt;form:title&gt;
       &lt;core:Title text="Terminals and Materials" level="H3"/&gt;
      &lt;/form:title&gt;
      &lt;form:formContainers&gt;
       &lt;form:FormContainer id="terminalContainer" visible="true"&gt;
        &lt;form:formElements&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="HiddenLabel" visible="false" design="Standard" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;RadioButtonGroup
            id="sap_Responsive_Page_0-c813e6e4e80e22220f88a12c2_S2-content-build_simple_form_Form-1522924154302-formContainers-build_simple_form_FormContainer-1-formElements-build_simple_form_FormElement-1-fields-sap_m_RadioButtonGroup-1522924315063"
            columns="8" selectedIndex="0" valueState="None" width="auto" editable="true" enabled="true" textDirection="Inherit"
            select="_onRadioButtonGroupSelect5"&gt;
            &lt;buttons&gt;
             &lt;RadioButton text="Primary Terminal" editable="true" enabled="true" visible="true" width="auto" valueState="None" selected="false"/&gt;
             &lt;RadioButton text="Secondary terminal (s)" editable="true" enabled="true" visible="true" width="auto" valueState="None" selected="false"/&gt;
            &lt;/buttons&gt;
           &lt;/RadioButtonGroup&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Planned Plant" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;RadioButtonGroup
            id="sap_Responsive_Page_0-c813e6e4e80e22220f88a12c2_S2-content-build_simple_form_Form-1522924154302-formContainers-build_simple_form_FormContainer-1-formElements-build_simple_form_FormElement-3-fields-sap_m_RadioButtonGroup-1522924501452"
            columns="8" selectedIndex="0" valueState="None" width="auto" editable="true" enabled="true" textDirection="Inherit"
            select="_onRadioButtonGroupSelect7"&gt;
            &lt;buttons&gt;
             &lt;RadioButton text="Yes" editable="true" enabled="true" visible="true" width="auto" valueState="None" selected="false"/&gt;
             &lt;RadioButton text="No" editable="true" enabled="true" visible="true" width="auto" valueState="None" selected="false"/&gt;
            &lt;/buttons&gt;
           &lt;/RadioButtonGroup&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="State" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None"
            maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="AL" enabled="true" key="AL"/&gt;
             &lt;core:Item text="CT" enabled="true" key="CT"/&gt;
             &lt;core:Item text="CA" enabled="true" key="CA"/&gt;
             &lt;core:Item text="DE" enabled="true" key="DE"/&gt;
             &lt;core:Item text="FL" enabled="true" key="FL"/&gt;
             &lt;core:Item text="GA" enabled="true" key="GA"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Terminal Location" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"
            items="{path:'/TerminalServiceSet'}"&gt;
            &lt;core:Item text="{Terminals}" enabled="true" key="{Plant}"/&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Material 1" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="Please Select one" enabled="true" key="Item"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Material 2" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="Please Select one" enabled="true" key="Item"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Material 3" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="Please Select one" enabled="true" key="Item"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Material 4" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="Please Select one" enabled="true" key="Item"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Material 5" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="Please Select one" enabled="true" key="Item"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Material 6" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="Please Select one" enabled="true" key="Item"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Material 7" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;ComboBox placeholder="Select one" editable="true" enabled="true" visible="true" width="400px" valueState="None" maxWidth="100%"&gt;
            &lt;items&gt;
             &lt;core:Item text="Please Select one" enabled="true" key="Item"/&gt;
            &lt;/items&gt;
           &lt;/ComboBox&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="HiddenLabel" visible="false" design="Standard" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;Table id="carrierTable" width="800px" noDataText="No data" mode="None" showSeparators="All" growing="true" growingThreshold="5"
            growingScrollToLoad="true" backgroundDesign="Solid" class="sapUiSmallMarginTopBottom"&gt;
            &lt;columns&gt;
             &lt;Column width="auto" hAlign="Center" vAlign="Top" minScreenWidth="Phone" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false"&gt;
              &lt;header&gt;
               &lt;Text text="Carriers" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/&gt;
              &lt;/header&gt;
             &lt;/Column&gt;
             &lt;Column width="auto" hAlign="Center" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false"&gt;
              &lt;header&gt;
               &lt;Text text="FEIN Number" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/&gt;
              &lt;/header&gt;
             &lt;/Column&gt;
             &lt;Column width="auto" hAlign="Center" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false"&gt;
              &lt;header&gt;
               &lt;Text text="SCAC Number" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/&gt;
              &lt;/header&gt;
             &lt;/Column&gt;
             &lt;Column width="auto" hAlign="Center" vAlign="Top" minScreenWidth="Tablet" demandPopin="true" popinDisplay="Inline" mergeDuplicates="false"&gt;
              &lt;header&gt;
               &lt;Text text="Vendor Number" width="auto" maxLines="1" wrapping="false" textAlign="Begin" textDirection="Inherit"/&gt;
              &lt;/header&gt;
             &lt;/Column&gt;
            &lt;/columns&gt;
            &lt;items&gt;
             &lt;ColumnListItem id="carrierTableRow" type="Active"&gt;
              &lt;cells&gt;
               &lt;Input id="cell1" type="Text" showValueHelp="true" valueHelpRequest="handleValueHelpCarrier" enabled="true" visible="true" width="auto"
                valueHelpOnly="false" maxLength="0" value="{Name1}"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0" value="{Lifnr}"/&gt;
              &lt;/cells&gt;
             &lt;/ColumnListItem&gt;
             &lt;ColumnListItem type="Active"&gt;
              &lt;cells&gt;
               &lt;Input type="Text" showValueHelp="true" valueHelpRequest="handleValueHelpCarrier" enabled="true" visible="true" width="auto"
                valueHelpOnly="false" maxLength="0" value="{Name1}"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0" value="{Lifnr}"/&gt;
              &lt;/cells&gt;
             &lt;/ColumnListItem&gt;
             &lt;ColumnListItem type="Active"&gt;
              &lt;cells&gt;
               &lt;Input type="Text" showValueHelp="true" valueHelpRequest="handleValueHelpCarrier" enabled="true" visible="true" width="auto"
                valueHelpOnly="false" maxLength="0" value="{Name1}"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0"/&gt;
               &lt;Input type="Text" showValueHelp="false" enabled="true" visible="true" width="auto" valueHelpOnly="false" maxLength="0" value="{Lifnr}"/&gt;
              &lt;/cells&gt;
             &lt;/ColumnListItem&gt;
            &lt;/items&gt;
           &lt;/Table&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="Additional Products" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;TextArea rows="2" cols="5" maxLength="0" wrapping="None" visible="true" width="700px"/&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
         &lt;form:FormElement visible="true"&gt;
          &lt;form:label&gt;
           &lt;Label text="HiddenLabel" visible="false" design="Bold" width="100%" required="false" textAlign="Begin" textDirection="Inherit"/&gt;
          &lt;/form:label&gt;
          &lt;form:fields&gt;
           &lt;CheckBox id="addterminal" text="Add Terminal" selected="false" editable="true" enabled="true" visible="true" width="auto"
            textDirection="Inherit" select="onAddTerminalChecked"/&gt;
          &lt;/form:fields&gt;
         &lt;/form:FormElement&gt;
        &lt;/form:formElements&gt;
        &lt;form:title/&gt;
       &lt;/form:FormContainer&gt;
      &lt;/form:formContainers&gt;
      &lt;form:layout&gt;
       &lt;form:ResponsiveGridLayout adjustLabelSpan="false" columnsL="1" labelSpanL="3" columnsM="1" labelSpanM="2" labelSpanS="12"/&gt;
      &lt;/form:layout&gt;
     &lt;/form:Form&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><a href="https://i.stack.imgur.com/i8xk3.png" rel="nofollow noreferrer">Existing Form and its element screenshot</a></p>