Generating dynamic controls using factory functions in SAP UI5

Introduction:

As name indicates factory is the place where something good will be produced  by consuming the raw material.In the same way factory function is used to produce the controls in UI5.The objective of this blog is to explain the usage of factory function in easy way with example.

Factory function is the most powerful approach for creating the controls dynamically by using model data in UI5.

Instead of hard coding the control in view we can dynamically generate the ui5 controls in controller according to data we got from the backend system.Factory function will be looped for each and every item in the array and controls can be created accordingly.

It has 2 parameters.

1)sId : This will be used as id for the newly created control.

2)oContext : This parameter can be used to access the model data which we got from backend system.Each row’s context value can be read and control will be created according to the model value.

Example:

In this example we will create  the rows for sap.m.table dynamically.

We will use a JSON array with properties name,city and amount to bind to our table.

onInit: function(){
var arr = [{
			"Name":"a",
			"City":"w",
			"Amount":10,
		},
		{
			"Name":"b",
			"City":"x",
			"Amount":2,
		},
		{
			"Name":"c",
			"City":"y",
			"Amount":0,
		},
		{
			"Name":"d",
			"City":"z",
			"Amount":0,
		},];
var demoModel =  new sap.ui.model.json.JSONModel({
	"results": arr
});
this.getView().byId("ID_DEMO").setModel(demoModel,"demoModel");
}

Our view code will be as below

<Table visible="true" id="ID_DEMO"                                   
items="{ path:'demoModel>/results',factory:'.myFactory'}">
<columns>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Name" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="City" />
</Column>
<Column minScreenWidth="Tablet" demandPopin="true">
<Text text="Amount" />
</Column>
</columns> 
</Table>

In this example  we will create dynamic control to show amount field based on the data from the model. If amount value is greater than 0 we will create Text control otherwise we will create Input control for showing amount  field.

Our factory function with 2 parameters will be as below.

myFactory :function(sId,oContext){
		var Value = oContext.getProperty("Amount");
		var element;
		if(Value > 0){
			 element = new sap.m.Text({
				text:"{demoModel>Amount}"
			});	
		}
		else{
			element = new sap.m.Input({
				value:"{demoModel>Amount}"
			});
		}
		
		return new sap.m.ColumnListItem({
			cells:[new sap.m.Text({
				text:"{demoModel>Name}"
			}),
			new sap.m.Text({
				text:"{demoModel>City}"
			}),
			element
			]
		});
	}, 

The resultant table will be created as below.

Conclusion:

By using factory functions we can make our UI more dynamic.We can decide which control to use by reading the back end data create our control accordingly.