SAPUI5: Fundamental Factory Functions for Freshmen

Do you count among those who are just now becoming aware of Factory functions? Do not experience exclusion. Few people are familiar with this word. Everyone is growing and learning over time. We will learn about Factory Functions in this lesson and use Factory Functions in a practical practice.

Let us see what SAP has to say on factory functions.

We will utilize a factory function to produce different controls based on the data received at runtime, rather than hard-coding a single template control. This method displays complex or diverse data and is far more adaptable.

Allow me to simplify it for you. In general, a factory uses raw materials and produces finished goods from them.

Therefore, the same goal drives us here: provide our factory function with each model data set so that we may show or improve our controls depending on dynamic data.

A more potent method for generating controls from model data is the factory function. Every time an entry of a control’s aggregation is made, the factory function is called. The developer can choose to have the same control with a different set of attributes or even a different control for every entry.

It’s time to exercise!

Let’s put this theory section to rest and use this factory to make something.

Make a project by utilizing a template.

First, create a UI5 project using the template.

Choose the SAPui5 Application when creating a project using a template.

Enter view details.

Select “Finish” by clicking.

Step 2: Make an additional view.

STEP3: Configure routes, routing and target in manifest. json:

RootView :

Routing and target:

Step 4: Set up the data model

4.1 Produce an entry within the Model folder:

4.2 Set up the manifest for our model file.

as indicated below.

We will use my model name, m1, in view to display data because I given it to you. Let’s make some adjustments to the two views we have created:

root_view

page 1

This is how my root view looks like:

My page1 view looks like this.

Consequently, the output will be as I have set the route for the item.

Now use the factory function that is displayed:

This requires that the color of the quantity column be set according to the unit pricing value. Display Quantity as green if the unit price is less than 20, otherwise as red.

Something along these lines.

First step is to create style to highlight.

Make changes in View:

Path: Defines the aggregation binding path.

Factory:.Myfactoryfunction (add this function with two parameters to the controller of page 1)

Note: As you can see from lines 31 and down, we have commented our item bindings from View. Why?

due to the fact that our factory function will include the logic.

Let’s use the controller to call this function.

Use a debugger to see if our factory function is operational.

Salutations! It’s aiming for the top spot.

The factory function now contains a return parameter, which may cause an error. Keep in mind that the factory’s purpose is to create something useful out of raw materials.

Now let’s change the code in our controller’s Myfactory method, connect our data there, and observe how it verifies each record individually.

Change the controller :

We can compare the property value of the context parameter, which I have here, with another property or static value, such as the unit price, which I have used to be at least 20. The IF ELSE clause’s code above is self-explanatory.