UI5

This was a little command that had me stumped for while.  Like I mentioned in my previous posts, I was building a detail screen.  I had the data, and I dynamically built a table and I was able to bind it and get my model displaying in it.  Seemed like I was home free.  However, when I would back out and select another entry in my table to see the details, my tables were not refreshing.  They continued to show the same data, over and over again.  I searched the blogs and finally figured out what I was missing.

list.getModel().destroy();

list.bindAggregation(“items”, “/”, colIt);

list.setModel(oModelTab);

I needed to perform these 3 commands (I was missing the destroy for a while).

List is my table, colIt was my column list item that I created earlier.  Once I executed all three of these commands, my table is refreshing exactly like I needed.

Thanks for reading,

This one was fun…  Like I mentioned yesterday, I was calling a separate OData service for my details.  Because the list could be long, I didn’t want to call this service for every item on the list.  Instead I chose to run it on-demand.  The trick was that I needed to be creative in my call of this service.  It had multiple expands, a filter and of course I didn’t want it to display the detail page until the service was complete.  So, here is what I did:

var mParameters = { var mParameters = {
filters: oFilters,
urlParameters: {
“$expand”: “Exp1,Exp2,Exp3…,Expn” },
success: function(oData, oResponse) {
oNotDet.setData(oData);
oView.setBusy(false);
sap.ui.getCore().setModel(oNotDet, “notdet”);
var bReplace = Device.system.phone ? false : true;
that.getRouter().navTo(“object”, {
objectId: oItem.getBindingContext().getProperty(“Qmnum”)
}, bReplace);
},
error: function(oError) {
jQuery.sap.log.info(“Odata Error occured”);
oView.setBusy(false);
}
};
oView.setBusy(true);
oModel.read(“NotHdr”, mParameters);

The big things to notice here:

Populate your filters before adding them to the parameters (this just makes it cleaner)
Enter in your urlParameters
Success function will navigate to the new view.  This makes sure the data has been received before the new view is displayed.  In my case this was required because the fields displayed were dependent on the data of the detail service.
Finally, I set the view to busy before calling the read statement, then the sucess/failure will change the setBusy to false.

Hope this is useful.  Thanks for reading,

Here was my scenario: I had a UI5 table that called a model.  The model had a list of notifications along with some additional information.  If you click on one of the lines, it would bring up another view, that showed all the details of the model.  The OData service for the details was a different call than for the table.  So for the new view, I needed to set a new model.  I was able to pull the data into my view within the components, but making it available on the XML was another story.  Here is what I finally did:

1. On the detail view I added the following to a routine that gets called every visit to the view (do not put this in OnInit, or it will only be called the first time).
   1. var oViewModel = sap.ui.getCore().getModel(“notdet”);
   2. this.setModel(oViewModel);
2. Then in the XML, I was able to use the following syntax:  {/results/0/NotifNo}
   1. for me, it was treated like an array with only one value coming back.  so I explicitly set it to 0.

I hope this can save some headaches for someone else.  I won’t soon be forgetting this.

Thanks for reading,

Sapphire had some good information this year.  In type fashion for a big conference, you notice some buzz words drilled into every presentation.  Among those were Machine Learning, Leonardo and S/4 Cloud.  The good news is that if you dig through the hype, you could get some good bits of information.  One of those pieces I got in a presentation that talked about the challenges and wins of building mobile apps in UI5/Fiori (whatever you like to call it).

I can’t lie, I felt a good hearing that other larger organization had many of the same challenges I encountered trying to build a hybrid app.  Keep in mind, when I say hybrid, it simply means that it works within the web browser and more importantly on any mobile device (Apple, andriod, etc.).  SAP provided a Hybrid Application Toolkit(HAT) that was an incredible challenge to get installed and use.  I struggled with version mismatches for days.  This presentation talked about the exact same challenge, and happily SAP is listening.  The newer versions of the Web IDE will include the full installation of the HAT in the cloud, eliminating the hassle of installing it yourself.  In addition, they are promising faster compile times.

This still won’t solve for doing anything more complex, like I usually try to do 🙂  but it will get you much closer to a usable system.  I’m not sure what version of the Web IDE will include these changes.  I’m hoping it will be included for any SAP version that can handle the HCP connection.  Certainly, I’ll be trying again soon, just to see 🙂

Thanks for reading,

Here was the next challenge I ran into with UI5.  I decided to make the sap.m.table work for my model.  The problem was that my table was “wide”.  So it contained a lot of columns, and all the columns cannot fit into a single screen.  So that meant one of two things, either, all my columns were very narrow, or it went off the screen with no way of seeing the other columns.  I finally spent some time googling to find a solution.  The post that finally got me on the right track was here.

Happily, the solution was pretty easy.  It involved adding an element to put the table into:

var oScrollContainer = new sap.m.ScrollContainer({
height: “90%”,
vertical: true,
focusable: true,
content: [oNotTab]
});
oTableHdr.placeAt(selPage);
oScrollContainer.placeAt(selPage);

A couple of words of advise.  If you attempt to use multiple select, using the header table will cause issues, since it presents a check all box, that checks nothing.  Also, make the header blank for the table contents causes some strange column widths that did not match the width of the column in the header.  So, this means you would need to manually set the width for both column in both places to ensure it is identical.  I have currently opted to avoid this, and only have the toolbar outside of the scrollcontainer.  If you have a different experience, I’d love to hear about it.

thanks for reading,

Well, I’m back in UI5 world lately, and my hurdle today was to get rid of a bunch of leading zeros from my table worklist.  I wanted a way to clean all my text records within the table.  With a little help from google, here’s what I found.

I created a formatter function:

leadZero : function (sValue) {
sValue = sValue.replace(/^0+/, “”);
return sValue;
}

I’m no expert, but the code inside of the replace statement works great 🙂

then, I called it within my addcell method.

var txtNAME = new sap.m.Text(Field, {
text: {
path: Field,
formatter: formatter.leadZero
}
});
colItems.addCell(txtNAME);

Notice, in my example: path does NOT have the curly brackets {}

Hope this might help,

Well, I’ve been trying to spend a little free time working in UI5 again.  I recently ran into an issue that stumped me for a while.  I created a worklist application using the template and everything worked great, it connected to my service, I could even add some buttons and features.  Then comes the fun part.  I wanted to add the dynamic features into my table.  Well, for some reason when you code up a table in the xml view everything works great, but when you create it within the controller, you can’t just call the method.  Special thanks to SCN and this blog post to finally get me over the hump.

I defined a button and originally it looked like this:

var oButtRefresh = new sap.m.Button({
id: “BtRefresh”,
type: “Transparent”,
press: “onRefresh”,
icon: “sap-icon://refresh”
});

However, when I would push the button, I’d get errors.  I tried with quotes, without quotes, with (), without ().  All to no avail.  The trick that I needed to do, was first:  at the top of the onInit method, I added the following line:

self = this;

then I changed my button to look like this:

var oButtRefresh = new sap.m.Button({
id: “BtRefresh”,
type: “Transparent”,
press: function() {
self.onRefresh();
},
icon: “sap-icon://refresh”
});

What I came to realize is that “this” inside of a function no longer sees the original controller.  Even though it works fine from the XML version, when you build it in the controller, you need to be very aware of your “context”.  In this case, I needed to give it a specific variable that wouldn’t change based on where it was called from.    Hope this can save you some time in your UI5 adventure.

Thanks for reading,