Skip to Content
0

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

May 22, 2017 at 07:02 PM

93

avatar image
Former Member

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

3 Answers

Jun Wu May 22, 2017 at 08:07 PM
0

just new and add....

what is troubling u?

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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

0
Former Member

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.

0
Mahesh kumar palavalli May 23, 2017 at 07:18 AM
0

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

Show 2 Share
10 |10000 characters needed characters left characters exceeded
Former Member

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

0
Former Member

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

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

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.

Show 1 Share
10 |10000 characters needed characters left characters exceeded

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

0