Thursday 25 August 2016

Naming your Models in UI5


Once again, I'm indebted to the ABAP community for their generosity of spirit and sharing. This post explains really succinctly how you can mix and mash up your models by naming them as you set them. 

http://scn.sap.com/thread/3948723

The biggest learning point for me was that the setModel method, which I'd thought indicated "Set the Model for the View" (i.e. you can only have one...)

this.getView().setModel(oSTModel,"TableModel")

Actually you can do this multiple times, setting several Models against the view. This is great, as we're now at the point where we need to draw data from several different places, and have them consolidated on the front end.

The named models can then be referred to by the XML view : 

<core:ListItem text="{TableModel>Description}" additionalText="{TableModel>Key}" />




Tuesday 23 August 2016

view.byID

So I'd seen code examples all over the place referring to "view.byID"
When I coded them in, they never worked.

It's because the view variable needs to be declared.

Once that's been done, you can re-use the variable over and over.

Really simple, but if no-one's told you, it's not apparent!

How to loop around a JSON result...

Okay, I spent ages looking for how to do this. The tricky part I found was marrying up the data in the response from the server, and the labels that people were giving different parts of the request... Soooooo I'm going to add to the noise, and hopefully help a few people out.

First up - the address of my service that's providing the JSON data:

/sap/opu/odata/sap/ZPD_RR_SRV/RepairActivitySet

Although clearly, that's the oData, so with the JSON tag on the end:

/sap/opu/odata/sap/ZPD_RR_SRV/RepairActivitySet?$format=json

This returns a list of Repair Activities (viewed from Gateway):




Note that it has the structure d/results/{Rakey/Radesc}

This is what I wanted to loop around in my UI5 javascript application, in one of my ViewControllers.

Here's the complete code that reads the lot: 

var NRAModel = new sap.ui.model.json.JSONModel();
NRAModel.loadData("/sap/opu/odata/sap/ZPD_RR_SRV/RepairActivitySet", null, false); 
var NRAModelArray = NRAModel.getData();


var myResults = [];

myResults = NRAModelArray.d.results;
console.log(myResults.length);

for( i = 0; i < myResults.length; i++) {
     var obj = myResults[i];
      console.log(myResults[i]);
      console.log(myResults[i].Rakey );
      console.log(myResults[i].Radesc);

}


The thing to note here, is that myResults is declared as an Array, and is populated by passing the d.results content from the original NRAModel.getData

d.results, you'll notice, is the same path as that provided by my Service, in the first screenshot.

Using console.log as you go along really helps with understanding what each of the variables are doing.





Wednesday 17 August 2016

UI5 Deep Entities

Surprisingly, it's not possible to just pass a table of data (or an Array, if we're talking JavaScript) into an ABAP FM.
This was a little disappointing, given my oData experience so far went from 


  • messing around with the DPC_EXT methods (where you had to do a bit of work to read the contents of the message from the frontend) 
to
  • just cloning the FM interface out to an oData structure (where you didn't have to do any work...


I think you can guess which one I preferred... 

So when you need to populate lots of stuff into a function module (e.g. you're creating a Sales Order, and you need to pass header data and several lines of line Item data)

you need to use a "Deep Entity". This immediately makes me think that the entity is sitting around contemplating the meaning of life, questioning it's own existence, etc etc.

The setting up of a deep entity call is described in detail here:

http://scn.sap.com/community/gateway/blog/2014/04/27/step-by-step-development-guide-for-createdeepentity-operation

and the corresponding front-end call is described here: 

https://scn.sap.com/thread/3557655

I'm about to go through these; if there's anything notable about them, I'll blog in some additions below. Peace.