This blog is part of a blog series about my UI5con presentation about the UI5 Advanced Programming Model at Walldorf in 2019:
In the previous part of this blog series, I’ve extended a basic UI5 app with a service layer and model layer for adapting complex features. The app is still read only with a master to show a list of persons and a detail page with the details of that person and a list of the skills. Behind the detail page is much more than just an OData service. It contains the different layers which make it open for implementing the next features. To show you the power of these layers, I’m going to implement a create Person with Skills function. This requires a create deep entity which is not supported by the OData model v2.
This is the structure behind the app (mostly for the detail view):
Let’s implement the possibility to create a person with skills in the same app using the same view. First, I create a function “createPerson” in the “PersonState”. This function will create an empty person object, add an empty skill to the person and make the view editable. Because this person object is stored in the data object, which is part of the JSONModel, it will update the view on the “updateModel” function:
In the “Detail” controller, I will check if it receives an object id of a selected person or if the route parameter contains “NEW”. “NEW” means that the end user didn’t select a person but clicked on the “add” button. In that case, it should open the detail view with empty fields in edit mode. Therefore, it should call the “createPerson” function in the “PersonState”:
Add the “Add” button in the “Master” view
Create the eventhandler in the “Master” controller to navigate to the detail page with the parameter “NEW”:
Add a form to the detail page for creating a new person and an editable table for adding skills:
https://github.com/lemaiwo/UI5Con2019/blob/master/webapp/view/Detail.view.xml
The app will look like this after clicking on the “Add” button:
The detail view is able to fill in a new person with skills. Next, we need to save the data. For this, I created a new function in the “PersonService” which will trigger a POST OData request. Assuming that it receives the “Person” object as parameter, we can just use the function “getJSON” to get the full object in the format that the OData service expects it.
In the “PersonState” I added a function that will use the “createPerson” of the “PersonService” and pass the “Person” object. The state contains the service object but also the data in the JSONModel. The JSONModel in his turn has all the data from the view.
In the detail view, I enable the footer to add the “Save” button:
Add the “Save” button:
In the eventhandler of the “Save” button, I can now call the function “newPerson” of the “PersonState” which handle everything. Once the person is created, it will navigate to the detail view of the saved person.
Now the app looks like this with the possibility to view and create persons:
I can still only add one skill… In the next blog I’m going to use reactive programming for adding more skills: https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-make-it-reactive-ui5con-2019
You can find the full demo project on GitHub:
https://github.com/lemaiwo/UI5Con2019
| Overview | https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-overview-ui5con-2019 |
| Implementing the Service layer | https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-service-layer-ui5con-2019 |
| Implementing the model layer | https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-model-layer-ui5con-2019 |
| Implement Create | https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-create-ui5con-2019 |
| Make it Reactive | https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-make-it-reactive-ui5con-2019 |
| GitHub project | https://github.com/lemaiwo/UI5Con2019 |
In the previous part of this blog series, I’ve extended a basic UI5 app with a service layer and model layer for adapting complex features. The app is still read only with a master to show a list of persons and a detail page with the details of that person and a list of the skills. Behind the detail page is much more than just an OData service. It contains the different layers which make it open for implementing the next features. To show you the power of these layers, I’m going to implement a create Person with Skills function. This requires a create deep entity which is not supported by the OData model v2.
This is the structure behind the app (mostly for the detail view):
Let’s implement the possibility to create a person with skills in the same app using the same view. First, I create a function “createPerson” in the “PersonState”. This function will create an empty person object, add an empty skill to the person and make the view editable. Because this person object is stored in the data object, which is part of the JSONModel, it will update the view on the “updateModel” function:
In the “Detail” controller, I will check if it receives an object id of a selected person or if the route parameter contains “NEW”. “NEW” means that the end user didn’t select a person but clicked on the “add” button. In that case, it should open the detail view with empty fields in edit mode. Therefore, it should call the “createPerson” function in the “PersonState”:
Add the “Add” button in the “Master” view
Create the eventhandler in the “Master” controller to navigate to the detail page with the parameter “NEW”:
Add a form to the detail page for creating a new person and an editable table for adding skills:
https://github.com/lemaiwo/UI5Con2019/blob/master/webapp/view/Detail.view.xml
The app will look like this after clicking on the “Add” button:
The detail view is able to fill in a new person with skills. Next, we need to save the data. For this, I created a new function in the “PersonService” which will trigger a POST OData request. Assuming that it receives the “Person” object as parameter, we can just use the function “getJSON” to get the full object in the format that the OData service expects it.
In the “PersonState” I added a function that will use the “createPerson” of the “PersonService” and pass the “Person” object. The state contains the service object but also the data in the JSONModel. The JSONModel in his turn has all the data from the view.
In the detail view, I enable the footer to add the “Save” button:
Add the “Save” button:
In the eventhandler of the “Save” button, I can now call the function “newPerson” of the “PersonState” which handle everything. Once the person is created, it will navigate to the detail view of the saved person.
Now the app looks like this with the possibility to view and create persons:
I can still only add one skill… In the next blog I’m going to use reactive programming for adding more skills: https://blogs.sap.com/2019/12/27/ui5-advanced-programming-model-make-it-reactive-ui5con-2019
You can find the full demo project on GitHub:
https://github.com/lemaiwo/UI5Con2019
- SAP Managed Tags:
