How to get input field data without using ID in UI5 Controls

  In this blog post, we will get to know how to get data from the control’s without using ID’s

Introduction:-

By using two  Model’s we are going to get the data from the simple form control’s and assigning the data to table controls without using ID.

In this example, I am using JSON Model to fetch the data from the Control’s and assign the data to the Table controls.

Controller

• In the controller, I have created two named model one  to get the data from the simple form( model Name=” emp”)
• And another to display the data in the table(model Name =” employees”), 

	onInit: function () {

	this.getOwnerComponent().setModel(new sap.ui.model.json.JSONModel(),"emp");
	this.getOwnerComponent().setModel(new sap.ui.model.json.JSONModel(),"employees");

			},

View

• So, In this view, I have binded the simple form controls with model “emp” with respective Properties of the entity.

<form:SimpleForm editable="true">
	<form:content>
		<Label text="Name"></Label>
		<Input value="{emp>/name}" ></Input>
		<Label text="Age"></Label>
		<Input value="{emp>/age}"></Input>
		<Label text="Dob"></Label>
		<DatePicker value="{emp>/dob}"/>
		<Label/>
		<Button press="onSubmit"  type="Accept" text="Submit"/>
	</form:content>
</form:SimpleForm>

• For the table, I have used the other model “employees” with respective Properties of the entity.

• As you can see I have used the same properties of the simple form to eliminate the naming confusion which will not be possible if we have used id’s to fetch and display the data.

• In model binding, we can use the same properties in different models.

<tab:Table rows="{employees>/empList}" >
	<tab:columns>
		<tab:Column >
			<tab:label><Label text="Name"></Label></tab:label>
			<tab:template><Label text="{employees>name}"/></tab:template>
			</tab:Column>

			<tab:Column >
			<tab:label><Label text="Age"></Label></tab:label>
			<tab:template><Label text="{employees>age}"/></tab:template>
			</tab:Column>

			<tab:Column >
			<tab:label><Label text="Dob"></Label></tab:label>
			<tab:template><Label text="{employees>dob}"/></tab:template>
			</tab:Column>
                </tab:columns>
</tab:Table>

Controller

•  I have declared a global array “empArray” to store the data which we will be update whenever we enter new data of the employee’s,
• And by using model name and property name I am getting the particular control data and storing it in a local variable after getting all the properties data in the same way,
• I am assigning all the properties in a single object entity and pushing that object into “empArray”.
• Assigning “empArray” to a JSON object and updating the “employees” model with that JSON object.
• As we know JSON model is a two-way binding so when we update the JSON model, the Model will automatically update the table data with the new data which we added to the model.
• Once we update the table model we can remove the values from the simple form controls just by updating the simple form model with an empty JSON object.
• So that it will allow us to add the next employee details. In a single go 

empArray:[],
onSubmit:function(){
				
	var name= this.getOwnerComponent().getModel("emp").getProperty("/name");
	var age= this.getOwnerComponent().getModel("emp").getProperty("/age");
	var dob= this.getOwnerComponent().getModel("emp").getProperty("/dob");

	var jObject={
	        name:name,
	        age:age,
	        dob:dob
		}
	this.empArray.push(jObject)

	this.getOwnerComponent().setModel(new 
         sap.ui.model.json.JSONModel({
         empList:this.empArray
         }),"employees");
	this.getOwnerComponent().setModel(new 
        sap.ui.model.json.JSONModel(),"emp");
	
}

 Conclusion:-

Whenever we are having a Form that needs to filled by the user to get the user filled data in input, combo box, and multi combo box we mostly use ID, But giving individual id for every Control is a bit painful and create ’s confusion in long run and if we have n number of fields we might go out of name’s and we might end up with an error when we use the same id name for multiple controls, And we need to remember the id’s to fetch the data in the controller.

So, to solve this problem we can use model binding, By using model binding we can get the multiple data entered by the user using model name and property name compare to when we use id’s to fetch the data from the controls using property names will be easy and we don’t need to remember the id’s just using property names we can get the data of the controls. And we can assign the same property names which we give for the entity to store the data and we can use the same property names in multiple controls just by changing the model. Each model will be unique so we can use the same properties in multiple models.

Thanks & Regards

Lokesh Kumar