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

[former_member196814]

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.

[former_member196814]

Hi

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.

Example: http://embed.plnkr.co/bPkqgbaeIlUtW4zBY9dX/

Appreciate help from experts.

Thanks.

[maheshpalavalli]

This blog has code written similar to your requirement.

https://blogs.sap.com/2017/05/24/dynamic-data-binding-for-sap.ui.layout.grid/

Best Regards,
Mahesh

[maheshpalavalli]

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,
Mahesh

[former_member196814]

Hi Mahesh,

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.

Regards

Rahul

[former_member196814]

Hi,

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.

Regards

Rahul

[junwu]

just new and add....

what is troubling u?

[former_member196814]

Hi Jun Wu,

Thanks for your reply.

It would be helpful if you can share some example for reference.

I am trying to add a "simple Form" with radio button and text area inside the form.

Appreciate your help.

BR

[former_member196814]

Hi

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.

Example: http://embed.plnkr.co/bPkqgbaeIlUtW4zBY9dX/

Appreciate your help.

Thanks.