learning and evolving. In this tutorial, we would understand Factory Functions and perform a hands on exercise using Factory Functions.
Let check what SAP says about factory functions?
Instead of hard-codinga single template control, we will use a factory function to generate differentcontrols based on the data received at runtime. This approach is much more flexibleand allows complex or heterogeneous data to be displayed.
Let me make it simple for you….Factory in general terms, Consumes the raw material and Produces something good out of it.
So our main motive here is same …give our model data one byone to our factory function and thenbased on dynamic data we can display our controls or make our control moreappealing.
The factory function is a more powerful approach for creating controls from model data. The factory function is called for each entry of a control’s aggregation, and the developer can decide whether each entry shall be represented by the same control with different properties or even by a completely different control for each entry.
Let me consider a case where we want to display a table with one column where it will highlight the row or display some more control in same column.
The factory function comes with the parameters sId, which should be used as an ID for the new control, and oContext, which is for accessing the model data of the entry. The returned object must be of type sap.ui.core.Element.
Also Check : Free Video Tutorial on SAP OData End to End
Enough of theory part: let’s produce something out of this factory. ?
Create a project using template.
STEP1: Create UI5 Project from Template
Create project from template -> select SAPui5 Application.
Enter view details.
Click on finish.
STEP2: Create one more View.
STEP3: Configureroutes, routing and target in manifest. json:
Routing and target:
STEP4: Configuredata model:
4.1 Create a filein under Model folder:
4.2 configure ourmodel file in manifest.
As highlighted below.
Since I gave my model name m1 we will use it in view to display data.
Let’s make few changes in our two viewS which we have created:
My root_view lookslike this:
My page1 viewlooks like this.
So I have specified the path for item and the output willbe.
Now apply our factoryfunction in view:
The requirement here is set color in Quantity column based on Unit price value. If the Unit price is more than 20 then display Quantity as red otherwise display as green.
Something like this.
First step is to create style to highlight.
Make changes in View:
Path: Indicates the path for aggregation binding.
Factory: .Myfactoryfunction (create this function in page1’s controller with two parameters)
Note: Did you notice we have commented our Item bindings from View (lines 31 and below) … Why?
Because we will writethe logic in our factory function.
Lets call this function in controller.
Also Check:An ABAPer’s Second SAPUI5 App
Put a debugger to check whether our factory function is working or not.
Cheers!!! It is going for first record.
Now you might face an error because factory function has a return parameter ….remember I have said factory is meant to produce something good from raw material.
So lets modify our code in our Myfactoryfunction in controller, bind our data here and see how it checks for one by one record.
Change the controller :
Here I have the parameter Ocontext which holds property value and we can compare this with some other property or static value like I have used 20 or more for unit price. The code above in IF ELSE clause is self-explanatory.
Check the output:
Upload this full project of this factory function in your system and test it end to end.
If you want to have real time discussions and resolutions, do join our SAP Technical Telegram Group where we have more than 4745+ active SAP consultants from 6 Continents.
Please Note: You need to install Telegram App on your mobile first and then you can join the group using the above link.
Step by Step Tutorials on SAPUI5
- Journey to SAPUI5
- SAPUI5 Tutorial with WebIDE. Part I. How to Consume Custom OData in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part II. Routing and Navigation in SAPUI5 Application
- SAPUI5 Tutorial with WebIDE. Part III. Drop Down in SAPUI5 Applications (2 Methods)
- SAPUI5 Tutorial. Part IV with WebIDE. Routers and Routing in SAPUI5
- SAPUI5 Tutorial with WebIDE. Part V. Navigation in SAPUI5 without Routers
- SAPUI5 Tutorial with WebIDE. Part VI. Using Fragments in SAPUI5 Fiori Applications
- SAPUI5 Tutorial with WebIDE. Part VII. An ABAPer’s First SAPUI5 App in SAP WebIDE
- SAPUI5 Tutorial with WebIDE. Part VIII. Deploy my First SAPUI5 App in WebIDE
- SAPUI5 Tutorial with WebIDE. Part IX. Alternative to oModel.setSizeLimit()
- SAPUI5 Tutorial with WebIDE. Part X. Using Media Queries in UI5 Application
- SAPUI5 Tutorial with WebIDE. Part XI. An ABAPer’s Second SAPUI5 App
- SAPUI5 Tutorial with WebIDE. Part XII. SAPUI5 Basic Debugging for Beginners
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 1
- Routing and Navigation in SAP UI5 – Theoretical Explanation Part 2
- Add Delete & Save Multiple Records in SAPUI5. Part 1 – ADD
- Add Delete & Save Multiple Records in SAPUI5. Part 2 – DELETE
- Add Delete & Save Multiple Records in SAPUI5. Part 3 – SAVE
- Modularization and Large Scale Architecture in SAPUI5
- Expression Binding Overview in SAPUI5
- Use of Third Party (or) External Resources in SAPUI5. Part I – Overview
- Use of Third Party (or) External Resources in SAPUI5. Part II – Practical with Gauges
- SAPUI5 For ABAPers – Component Reuse with Real Time Example
- SAPUI5 for ABAPers – Consuming OData Service from SAPUI5 Application – CRUD Operations
- Trick to Send QR code or Barcode Data Remotely from Android to PC for SAPUI5 App
- Push Notification in SAP – ABAP Push Channel, ABAP Messaging Channel in SAPUI5 – a Real Time Interaction
- How to send e-mail in SAPUI5 Hybrid App?
- How to Get Weight from the Weigh Scale/Weigh Bridge Bluetooth Device using SAPUI5 Hybrid App?
- SAPUI5 – How to Change the Master List Item Selection Based on Changes in Hash Tag URL?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application? Approach 1
- SAPUI5 – How to change the background color of sap.m.Table’s cells of each row based on specific condition?
- SAPUI5 – How to Load a Full Screen and Navigate to Master-Detail Application – Approach 2
- SAPUI5 Binding Part 1- Aggregation Binding in Table Control
- SAPUI5 Binding Part 2 – Element Binding Approach 1
- SAPUI5 – Factory Functions for Beginners
- SAPUI5 Binding Part 3 – Element Binding Approach 2
- SAPUI5 Binding Part 4 – Expression Binding Approach 1
- SAPUI5 Binding Part 5 – Expression Binding Approach 2