Skip to Content
Jul 24, 2020 at 05:46 AM

Dynamically add UI5 Elements and read them all at once


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 :

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

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"

			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"

			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]
		deleteRows: function (oEvent) {
			var rowItemContainer = oEvent.getSource().getParent();

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,



capture.png (11.1 kB)