One of the problems I am starting to see frequently is that developers need to get the information of the currently logged in user. This is documented in the UserAPI (SAP HANA Cloud Platform) on the HCP Platform documentation.
It is not clear however how to do this from a UI5 application and also how to do it via HCPms. We will create a JSON model and have the JSON model load the data from the service then display it on the screen as a data-bound control.
So lets get cracking and create a simple UI5 application from WebIDE. Go ahead and open WebIDE and create a new project from a template
Choose the SAPUI5 Application Template and click "Next".
For this example I am going to create an application called UserInfo
Click Next and we will add a javascript view to the project as well.
You could of course add an XML view which is just as trivial since we will be using data-binding but for our purposes the javascript view is the simplest to show on the screen.
Name the view "UserInfoView" and make sure the view type is set to JavaScript. Click the Finish button to complete the creation of the application.
With the application now completed you can now run it and it should do nothing because this is just a stock template for a UI5 application.
Open the neo-app.json file and as documented in the userapi documentation add the userapi route which I have hilited below.
Remember to take care to include the leading comma since this is an array of route objects we are adding a new route to.
Now save the neo-app.json file.
Next we will setup the user interface by creating a set of labels that will be bound to the returned json values from the userapi service.
Open the UserInfoView.controller.js in the webapp/controller folder and add the code between the comments in the createContent method.
And the code as text so its easy to copy....
createContent: function(oController) {
var oPage = new sap.m.Page({
title: "{i18n>title}",
content: [
/* Bind the model attributes */
new sap.ui.commons.Label({wrapping: true,width: "100%",text: "JSON: {/json}"}),
new sap.ui.commons.Label({wrapping: false,width: "100%",text: "STATUS: {/status}"}),
new sap.ui.commons.Label({wrapping: false,width: "100%",text: "Name: {/name}"}),
new sap.ui.commons.Label({wrapping: false,width: "100%",text: "Firstname: {/firstName}"}),
new sap.ui.commons.Label({wrapping: false,width: "100%",text: "Lastname: {/lastName}"}),
new sap.ui.commons.Label({wrapping: false,width: "100%",text: "Displayname: {/displayName}"}),
new sap.ui.commons.Label({wrapping: false,width: "100%",text: "Email: {/email}"})
/* End Attribute Binding */
]
});
var app = new sap.m.App("myApp", {
initialPage: "oPage"
});
app.addPage(oPage);
return app;
}The code between the comments is the new code that was added. These are straightforward label objects inside a page bound to a model.
We will now do the hard part and create the model...
Open the "UserInfoView.controller.js" in the controllers folder and add the code below to the onInit function as below..
The text code is also included to make it easier to use....
return Controller.extend("UserInfo.controller.UserInfoView", {
onInit : function () {
/* Create the model */
var oModel = new sap.ui.model.json.JSONModel();
/* Assign the model to the view */
this.getView().setModel(oModel);
/* Load the data */
oModel.loadData("/services/userapi/currentUser");
/* Add a completion handler to log the json and any errors*/
oModel.attachRequestCompleted(function onCompleted(oEvent) {
if (oEvent.getParameter("success")) {
this.setData({"json" : this.getJSON(), "status": "Success"}, true);
} else {
var msg = oEvent.getParameter("errorObject").textStatus;
if (msg) {
this.setData("status", msg);
} else {
this.setData("status", "Unknown error retrieving user info");
}
}
});
/* End model creation and loading*/
}
});All the code inside of the onInit function needs to be included.
The new code code first creates a JSON model and assigns it to the view so the data bindings can take effect. The next line of code makes an HTTP call and loads the model from the service we specified in the neo-app.json file - /services/userapi/currentuser.
Finally we add a completion handler to the model so that when the data is loaded we can add some more details by adding in the rest of the variables that are bound to the model. In this case we take the returned JSON, convert it to a string and then add it back to the model as the "json" property. We also add a status property to inform us if the call failed or not.
Save all the changes and run the application.
As you can see the JSON is shown on the screen which is the raw json from the backend userAPI as well as the status of the call and of course the remainder of the bound variables as parsed from the returned JSON.
In the next installment we will take the application and show how we can use this from a mobile application/HCPms which is another common requirement.
- SAP Managed Tags:
5 Comments
