For you UI5 experts, I’m sure this is old hat. But to me, this was pretty damn cool. One of the biggest challenges I never got with the iOS applications was being able to dynamically read my configuration tables and display only what I wanted to see. Now don’t get me wrong, I’m sure it was possible, but I wasn’t willing to spend the extra money for the feature when I didn’t have much of a customer base. When you do things yourself, you have the luxury of wasting more time to figure it out instead of paying a higher price tag 🙂
Anyway, I had a list of fields in a particular sequence, so I created a service in the gateway to return all the visible fields in the correct sequence. The next step was to read it into my application. Now I wanted to also store this locally, so the code includes some additional features to read in the local data first, and if it isn’t available, then call the service. (I apologize for the format, cut and paste doesn’t work so well in a blog, but you’ll get the idea).
// first, I get the model either from storage or
var oConfig = new sap.ui.model.json.JSONModel();
jQuery.sap.require(“jquery.sap.storage”);
//Check if there is data in the Storage
var urlCon = “Config”;
var oStorage = jQuery.sap.storage(jQuery.sap.storage.Type.local);
if (oStorage.get(“cfgData”)) {
var oDataConfig = oStorage.get(“cfgData”);
oConfig.setData(oDataConfig);
// once I have the data, I check to make sure there is something in there to avoid errors, so I check for undefined or blank
// if it’s initial or blank, I read the service to populate it.
if (typeof oConfig.getProperty(“/results/0/Field”) === “undefined” ||
oConfig.getProperty(“/results/0/Field”) === null){
oStorage.remove(“cfgData”);
oModel.read(urlCon, null, null, false, function(oData, oResponse) {
oConfig.setData(oData);
}, null);
}
} else {
oModel.read(urlCon, null, null, false, function(oData, oResponse) {
oConfig.setData(oData);
}, null);
}
// after all the checking and reading, I put the results into storage and into my model for the app
var oDataConfig = oConfig.getData();
oConfig.refresh(true);
oStorage.put(“cfgData”, oDataConfig);
this.setModel(oConfig, “config”);
Now I had a json model that holds all my config values. (I include an option to refresh configuration within the app, but in general, this doesn’t change often enough, so why read it more than you have to).
Next up, I added a function to populate all the fields (for me they were going into a list on an icontab
// start by reading in the model and checking it has some data
var oModel = this.getView().getModel(“config”).getProperty(“/results”);
if (oModel.length > 0) {
var field = sap.ui.getCore().byId(“SelFields”);
// next, check to see if the list within the tab exists, if not, create it and the associated pieces
if (typeof field === “undefined” || field === null) {
var oLayout = new sap.ui.layout.Grid(“SelFields”);
var oLayout2 = new sap.ui.layout.Grid(“SelDateFields”);
// finally, look through the model. for me, I’m checking for certain types of fields to determine if they belong on this tab
// also to determine if they are input fields, or just display
for(var i = 0; i < oModel.length; i++) {
if (oModel[i].GWField !== “”) {
if (oModel[i].Grpnam === “OM01”){
oLayout.addContent(new sap.m.Label({text:oModel[i].Descr}));
oLayout.addContent(new sap.m.Input({
maxLength: 20,
id: oModel[i].Field,
value: oModel[i].Value
})
);
}
if (oModel[i].Grpnam === “OM02”){
oLayout2.addContent(new sap.m.Label({text:oModel[i].Descr}));
oLayout2.addContent(new sap.m.Input({
maxLength: 20,
id: oModel[i].Field,
value: oModel[i].Value
})
);
}
}
}
// //Attach the panel to the page
var selGrid = this.getView().byId(“SelTab”);
oLayout.placeAt(selGrid);
var selDateGrid = this.getView().byId(“SelDateTab”);
oLayout2.placeAt(selDateGrid);
}
// finally, fill the new fields with values (notice it is outside the big if statement checking if they exist
// either way, this look will always run
var val;
for(var j = 0; j < oModel.length; j++) {
if (oModel[j].Grpnam === “OM01” || oModel[j].Grpnam === “OM02”) {
val = oModel[j].Value;
if(val !== “”) {
sap.ui.getCore().byId(oModel[j].Field).setValue(val);
}
}
}
}
Hope this helps and thanks for reading,
As always, thanks for reading and don't forget to check out our SAP Service Management Products at my other company JaveLLin Solutions,Mike