Dynamically add UI5 Elements and read them all at once

[former_member374496]

Dear UI5 Expertise,

I need your help on the below requirement :

I have to provide a option to user to add & remove the multiple Email Address as below :

User can add any number of Email type, when i click on Add email it should add whole new set of row ,

I can able to achieve adding and removing but i am facing an issue while reading all the elements at once when i submit,

my adding and removing code is as follows :

view.xml :

	<!--Email-->
	<m:VBox>
		<m:Title text="{i18n>Email}"></m:Title>
		<f:SimpleForm id="contactInformationEmailForm">
			<f:content>
				<m:Panel id="contactInformationEmPanel">
					<m:VBox>
						<l:Grid>
							<l:content>
								<m:Label text="{i18n>EmailType}">
									<m:layoutData>
										<l:GridData span="XL2 L6 M6 S6"/>
									</m:layoutData>
								</m:Label>
								<m:Label text="{i18n>EmailAddress}"/>
								<m:Label ></m:Label>
								<m:Label ></m:Label>
							</l:content>
						</l:Grid>
						<l:Grid >
							<m:Select selectedKey="{Country}" width="100%">
								<m:layoutData>
									<l:GridData span="XL2 L6 M6 S6"/>
								</m:layoutData>
								<m:items>
									<core:Item text="Office" key="office"/>
									<core:Item text="Home" key="home"/>
								</m:items>
							</m:Select>
							<m:Input type="Email"/>
							<m:ToggleButton text="{i18n>SetasPrimary}" press="onPressSetPrimary">
								<m:layoutData>
									<l:GridData span="XL2 L6 M6 S6"/>
								</m:layoutData>
							</m:ToggleButton>
							<!--	<core:Icon src="sap-icon://delete" size="20px" color="#0854A1" class="icon-del" decorative="true" useIconTooltip="true" press="deleteRows"></core:Icon>-->
						</l:Grid>
					</m:VBox>
				</m:Panel>
			</f:content>
		</f:SimpleForm>
		<m:Panel>
			<m:VBox>
				<l:Grid>
					<m:Button type="Emphasized" text="{i18n>AddEmail}" press="onPressAddEmail" class="eMailBtnAlign"></m:Button>
					<!--	<m:Button type="Emphasized" text="getData" press="onPressgetData" class="eMailBtnAlign"></m:Button>-->
				</l:Grid>
			</m:VBox>
		</m:Panel>

Controller :

	onPressAddEmail: function () {
			var that = this;
			var oPanel = this.byId("contactInformationPanel");


			var selectModel = new JSONModel({
				"EmailType": [{
					"type": "Home"
				}, {
					"type": "Office"
				}]
			});


			var oItemSelectTemplate = new sap.ui.core.Item({
				key: "{type}",
				text: "{type}"
			});


			var oSelect = new sap.m.Select({
				layoutData: new sap.ui.layout.GridData({
					span: "XL2 L6 M6 S6"
				})
			}).addStyleClass("selectStyleCss");


			oSelect.setModel(selectModel); // set model to Select element
			oSelect.bindAggregation("items", "/EmailType", oItemSelectTemplate);


			var oInput = new sap.m.Input();


			var delIcon = new sap.ui.core.Icon({
				src: "sap-icon://delete",
				press: that.deleteRows,
				size: "20px",
				color: "#0854A1"
			}).addStyleClass("icon-del");


			var oBtn = new sap.m.ToggleButton({
				layoutData: new sap.ui.layout.GridData({
					span: "XL1 L6 M6 S6"
				}),
				text: that.getText("SetasPrimary"),
				press: that.onPressSetPrimary
			});


			var oGridLayout = new sap.ui.layout.Grid({
				content: [oSelect, oInput, oBtn, delIcon]
			});
			oPanel.addContent(oGridLayout);
		},
		
		deleteRows: function (oEvent) {
			var rowItemContainer = oEvent.getSource().getParent();
			rowItemContainer.destroy();
		},

But problem is when i submit then reading all the elements where i am facing an issue, any help would be much appreciated and it would be great help.

thanks in advance,

Pradeep

[ama_touzani13]

Hello ,

Where do you read the elements and do the submit ? , and what is the issue/error you are facing ?.

Regards.