Skip to Content
Technical Articles
Author's profile photo Manjunatha Devadiga

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.

Assigned tags

      5 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Srinivas Sistu
      Srinivas Sistu

      Nice blog, Manjunatha. Its always good to see dynamic coding....

      Author's profile photo Manjunatha Devadiga
      Manjunatha Devadiga
      Blog Post Author

      Thank u

      Author's profile photo User Mouri
      User Mouri

      Nice blog. Informative.

      Author's profile photo Manjunatha Devadiga
      Manjunatha Devadiga
      Blog Post Author

      Thank you

      Author's profile photo Maciej Kaczmarek
      Maciej Kaczmarek

      Hi Manjunatha,

      many thanks for sharing this approach.

      I have two questions.

      • Do you know which elements can be used with the factory function?
      • Is the factory limited only to aggregation or it can be used as single?

      Thank you