Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Joseph_BERTHE
Active Contributor

Purpose


The main goal of this blog is to show how to create a form based on OData service with two different entities. A general case would be a form with global informat such as personal data and address data. How to combine those two kind of data with low code.

Prerequisite


I'will suppose that you have a well level of UI5 development and you know well OData modeling. I will be theoritic with some concret example.

Context


Let's say we have an OData service V2 generated by the SEGW transaction, in ABAP On-Premise environement. This service has two entities : PersonalDataSet and AddressSet. An association between those to entities with a relation 1 to n. We will create an application UI5 based on this service.

The application will have an simple form which will be mapped to the service like this:


Context UI5


The submit button will generate the data structure to create an entry into the backend.

The UI5 application


To achieve this, you do not need another JSON model, you only need the OData model.

First, to make the model available for data typing, you have to set it as a two way binding in the manifest.json.
"sap.ui5": {
(...)
"models": {
"": {
"dataSource": "mainService",
"preload": true,
"settings": {"defaultBindingMode": "TwoWay"}
}
}
}

Then you have to create new context binding for each entity.
onInit: function() {
this.getOwnerComponent().getModel().metadataLoaded().then((event) => {
// Create a new entry in the OData model
let oContextPersonal = this.getOwnerComponent().getModel().createEntry("/PersonalDataSet");

// Bind the new entry to the form Personal
this.getView().byId("idFormPersonal").bindElement(oContextPersonal.getPath());
this._tContextElement.push(oContextPersonal);

// Create a new entry in the OData model
let oContextAddress = this.getOwnerComponent().getModel().createEntry("/AddressSet");

// Bind the new entry to the form Address
this.getView().byId("idFormAddress").bindElement(oContextAddress.getPath());
this._tContextElement.push(oContextAddress);

});
},

Behind the submitButton you have to create the deep structure before send it to the backend.
onSubmitData: function() {
var oData = {
d: this._tContextElement[0].getObject()
};
oData.d.toAddress = {
results: [this._tContextElement[1].getObject()]
};

// Clean up the oData from __metadata attribute
delete oData.d.__metadata;
delete oData.d.toAddress.results[0].__metadata;

// Call backend
this.getView().getModel().create("/PersonalDataSet", oData);
}

In that manner, you can use the OData model easily. Keep in mind the deep insert structure :

{
"d" : {
principal EntityType
"associationName" : { child EntityType },
"associationName" : {
"results" : [
{
child EntityType
},
{
child EntityType
}
]
}
}
}


Here is the exemple after submitting.



Conclusion


In some case, it is easier to use only one OData model to simplify your application. As I have show, few code permit to do a deep insertion.

 
10 Comments
Labels in this area