Skip to Content
avatar image
Former Member

How to add Dynamic form consisting radio button, textbox and a button during application runtime?

I have a UI5 application in XML view where i need to add a form consisting of radio button, text box and button. I need to add this form 'n' times on press of a button and also a button to remove the same forms one by one.

Please help me to achieve this functionality.

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • May 22, 2017 at 08:07 PM

    just new and add....

    what is troubling u?

    Add comment
    10|10000 characters needed characters exceeded

  • May 23, 2017 at 07:18 AM

    Simply use the aggregation binding to do that. If you know how sap.m.Table displays multiple rows(columnListItem) then it is very easy for you to clone similar data multiple times.

    (Hint: you have to use aggregation binding with a json model data and if you add any item to json model data, a new item will be added, if you delete it the mail item will also be deleted.)

    Put the radio button, button and controls in the simple forms form container and use the aggregation binding to repeat the content. If it is form container you need to aggreation binding on form elements, if it is simple form you need to use aggreation binding on "content".

    Best Regards,

    Add comment
    10|10000 characters needed characters exceeded

    • Former Member


      i have added the below code in View.xml file:

      <l:content> <Button text="No Findings" press="P2" width="100px" id="__button2"/>

      <Button text="Add Findings" press="OnPress" ariaDescribedBy="defaultButton" width="100px" id="__button6"/> </l:content>

      <App> <pages> <Page id="oPage"> <Panel id="oPanel" width="auto"> <content> <l:Grid defaultSpan="L12 M12 S12" hSpacing="2" width="auto"> <l:content> <f:Form id="FormDisplay354" editable="true"> <f:layout> <f:ResponsiveGridLayout labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2" columnsL="1" columnsM="1" /> </f:layout> <f:formContainers> <f:FormContainer> <f:formElements> <f:FormElement label="Findings"> </f:FormElement> <f:FormElement id="oSubjectElement" > <f:fields> <Label text="Add Finding"/> <TextArea /> <Label text="Immediate Action taken" /> <RadioButtonGroup columns="5" selectedIndex="4" select="open"> <buttons> <RadioButton id="RB3-1" text="No"/> <RadioButton id="RB3-2" text="Yes"/> </buttons> </RadioButtonGroup> <Button icon="sap-icon://add" press="onFindingAdd" /> </f:fields> <f:fields> <TextArea /> </f:fields> </f:FormElement> </f:formElements> </f:FormContainer> </f:formContainers> </f:Form> </l:content> </l:Grid> </content> </Panel> </Page> </pages> </App>

      In Controller.js File i have added the below code to add this page "oPage" on runtime on press of "Add findings" button.

      OnPress: function(ocontrolEvent) { var oPage = this.getView().byId("oPage"); var oLength = oPage.getContent().length; var oPanel = this.getView().byId("oPanel"); // var oPanelCopy = oPanel.clone(); var oFormContent = oPanel.getContent()[0].getContent()[0]; var oFormContainer = oFormContent.getFormContainers()[0]; var oFormElements = oFormContainer.getFormElements(); if (oFormElements.length > 1) { oFormElements.slice(0, 2); var oElements = oFormElements; oFormContainer.removeAllFormElements(); oFormContainer.insertFormElement(oElements[1]); oFormContainer.insertFormElement(oElements[0]); } // oFormElements[0].getFields()[0].setValue(""); // oFormElements[1].getFields()[0].setValue(""); // oFormElements[1].getFields()[1].setValue(""); // oFormElements[1].getFields()[2].setValue(""); //var oPage = this.getView().byId("oPage"); oPage.insertContent(oPanel, oLength + 1); }, onFindingAdd: function(ocontrolEvent) { var oForm = ocontrolEvent.getSource().getParent().getParent().getParent(); var oFormContainer = oForm.getFormContainers()[0]; var oLength = oFormContainer.getFormElements().length; var oSubjectElement = this.getView().byId("oSubjectElement"); //var oSubjectElementCopy = oSubjectElement.clone(); // oSubjectElementCopy.getFields[0].updateValue(""); //oSubjectElementCopy.getFields[1].updateValue(""); //oSubjectElementCopy.getFields[2].updateValue(""); oFormContainer.insertFormElement(oSubjectElement, oLength + 1); }

      I need to add (form id="FormDisplay354") on press of <Button icon="sap-icon://add" press="onFindingAdd" /> during runtime and 'n' number of times.

      Please help as i dont know where i am missing the functionality.



  • avatar image
    Former Member
    May 25, 2017 at 09:50 AM


    i am taking reference from the below example which some around fits the requirement but after implementing the sam in my project the functionality does not run.


    Appreciate help from experts.


    Add comment
    10|10000 characters needed characters exceeded