Adding Form Container and Form Elements Dynamically in UI5

[mantrishekar]

Hi All,

Am trying to create a form using below lines of code.

var proposalLayout = new sap.ui.layout.form.GridLayout("L2"); var proposalForm = new sap.ui.layout.form.Form("proposalForm",{ editable: true, layout: proposalLayout, formContainers: [ new sap.ui.layout.form.FormContainer({ //title: "Proposed Solution", formElements: [ new sap.ui.layout.form.FormElement({ label: "Solution Name", fields: [new sap.m.Input("solNameInput",{layoutData: new sap.ui.layout.form.GridElementData({hCells: "13"})})] }), new sap.ui.layout.form.FormElement({ label: "Prepared by", fields: [new sap.m.Input("preparedByInput",{ layoutData: new sap.ui.layout.form.GridElementData({hCells: "13"})})] }) ] }), new sap.ui.layout.form.FormContainer({ title: "Case Benefits", formElements: [ new sap.ui.layout.form.FormElement({ label: new sap.m.Label({text: "Cost"}), fields: [new sap.m.Input("costInput",{layoutData: new sap.ui.layout.form.GridElementData({hCells: "1"})})] }) ], layoutData: new sap.ui.layout.form.GridContainerData({halfGrid: true}) }), new sap.ui.layout.form.FormContainer({ formElements: [ new sap.ui.layout.form.FormElement({ label: new sap.m.Label({text: "Benefits"}), fields: [new sap.m.Input("benefitsInput",{layoutData: new sap.ui.layout.form.GridElementData({hCells: "1"})})] }) ], layoutData: new sap.ui.layout.form.GridContainerData({halfGrid: true}) }), ] });

Now again i need to regenerate the same form when i click on a Button.

Could any body please help me to acheive this functionality

[former_member236088]

Hello,

This code works for me fine ("recordDetailContainer" - this is FormContainer object):

var formElement = new sap.ui.layout.form.FormElement(

{

"label": "Атрибут 1",

"fields": [

new sap.m.Input({

"value": "",

"type": "Text",

"placeholder": "Класс МТР"

})

]

}

);

var recordDetailContainer = this.getView().byId("recordDetailContainer");

recordDetailContainer.addFormElement(formElement);

[516195]

This worked for me, was able to add the new element to my form, THX!

[former_member505084]

I too want to do the same thing. Did you found the solution? If yes,Let me Know.

Thanks

[benlim]

I'm having this requirement as well. Any solution for this?

[former_member17337]

did you found the solution..??? Let me Know

[mantrishekar]

Hi Junwu,

When i click on PLUS Button again i need to get the below form need to be added on this page.

Regards,

Shekar.

[ThorstenHoefer]

I haven't tried this, but maybe this will be helpful?

onCreate: function(oEvent){
  var _formElementCtx = this.getModel().createEntity("myListSet", {properties: {Name:"newName", Value: ""}};
  var _formElement = this.getView().byId("tmpElement").clone();

  _formElement.bindElement(_formElementCtx)
  this.getView().byId("idFormContainer").addFormElement(_formElement);
}

    <f:Form id="FormChange354" editable="true">
      <f:formContainers>
        <f:FormContainer id="idFormContainer" formElements="{/myListSet}">

          <f:formElements >
            <f:FormElement label="{Name}" id="tmpElement">
              <f:fields>
                <Input value="{Value}"/>
              </f:fields>
            </f:FormElement>
          </f:formElements>
        </f:FormContainer>
      </f:formContainers>
    </f:Form>

[junwu]

what's your problem?