Category Archives: UI5

How to access UI5 model data

Posted on by

Old habits are not easily dying and replaced by best practices and general recommendations. In the early days, when UI5 started to gain traction, people discovered it, tried it out, wrote apps, made them somehow work. Everybody was learning, and things we can do today were not possible or known then. Changes to the documentation, API and recommendations are simply the result of lessons learned.

As UI5 apps are based around a model, its data, representation and manipulation, a lot of questions around UI5 development are about the model: how to access data, change, update or delete it. A good thing of UI5 is that it is following semantic versioning, and code written for UI5 1.1x or 1.2x will still work with latest versions like 1.5x. It doesn’t mean that you, as a developer, should simply copy & paste example code found somewhere.

Example

After loading the model, be it JSON or OData, you may have to access a specific property in you code. What you can find in the Internet is code like:

oData

var oData = this.getView().getModel().oData;
var firstname oModel.getModel().oData[entity].firstname;
var name = oData[entity].name;

JSON

var oData = this.getView().getModel(“device”).oData;
var osname = oModel.oData.os.name;
var osname = this.getView().getModel().getData().os.name;

First line will give you the model data object, 2nd and 3rd line the property osname of the model. The 3rd line is partly correct, as the access to the data is done through a method, but access to property name is done directly. You can work with the data object now directly, but you shouldn’t. What you want is not to work with the raw data that defines your model, but with properties.

Use access methods

Data binding is important when developing an UI5 app. You update properties, and you want to have the UI elements automatically be updated too. When accessing the properties directly, you have to check if the change is correctly propagated. Using access methods, UI5 will for sure take care of this. The method to access properties of your data model are getData, getProperty or getObject. Applying this to above code:

JSON

var oData = this.getView().getModel().getData();
var osname = this.getView().getModel(“device”).getProperty(“/os/name”);

OData

var entity = this.getView().getModel().getObject("/"+key);
var property = this.getView().getModel().getProperty("/"+key+"/Depth");

This is now only using the methods to access data. To alter the property, use the setProperty method.

OData

this.getView().getModel().setProperty("/"+key+"/Depth", 11.111)

JSON

this.getView().getModel("device").setProperty("/os/name", "windows")

The above examples may not be perfect. They show that UI5 offers methods to access model data. Using these methods your code will continue to work in the future and is guaranteed to work in future releases of UI5. Direct access to the model data is done at your own risk. In case you work on a UI5 app, use the access methods. If you work on an older app that uses direct access to the model, try to refactor the app. The change from oModel.oData to oModel.getData() is as simple as executing a find and replace.

 

Let the world know

SAP UI5 VIZ charts in Chrome

Posted on by

I was preparing a demo showing how to visualize data from an IoT service using SAP UI5 VisFrame charts. To play around with VizFrame, I used the sample from SAPUI5 SDK. It was working perfectly on the online version, but while running the UI5 app and Chrome, I got an error message.

Googling for the error message revealed that with Chrome 50 a known error exists which makes it impossible to use a VizFrame chart. Luckily I found the solution on SCN. All it takes is to implement the function as a prototype and the chart will work.

SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };

I`ve put the code in my views controller init() function:

onInit : function (evt) {
  SVGElement.prototype.getTransformToElement = SVGElement.prototype.getTransformToElement || function(elem) { return elem.getScreenCTM().inverse().multiply(this.getScreenCTM()); };
  oVizFrame = this.oVizFrame = this.getView().byId("idVizFrame");

Result

Now, this works magically when I access the online SDK, but is broken when using it locally. I guess SAP did some magic either in the SDK or in the UI5 library that my SAPUI5 version does not include. Either way, the above trick solves the problem.

Let the world know

Docker images for OpenUI5

Posted on by

I created a set of Docker images that contain the OpenUI5 runtime library. They are available for download at Docker hub.

Why

Developing UI5 apps means to try out things and to support the final app. You may have the challenge to find out up to which library version your app works or when it is broken. For this, it is necessary to have a range of versions of the UI5 library available. OpenUI5 makes the latest supported version of their library available for download and there is also a CDN with a list of older releases. The CDN is the way to go when you have to do some backward testing as it also contains the SDK. To make use of an older UI5 version, just point to it. Example for 1.28.6: https://openui5.hana.ondemand.com/1.28.6/resources/sap-ui-core.js

To make use of the older releases, you must have internet access. That may not always be the case. In that case, you`ll have to download the resources. From the OpenUI5 project home you can right now download the latest version of 1.26, 1.28, 1.30 and 1.32. You can either download the SDK or runtime version or use the online version. But you`ll depend on what UI5 is offering online. This causes a problem when you have to do offline testing or the library version you need is not made available for download by OpenUI5. Having the libraries on CDN implies that you can access the CDN. Good luck for your CI builds or automated testing when you are behind a corporate proxy. Some CI setups also do DevOps, and when you have to reflect some operational configuration in your web server setup, you`ll have to set up somehow your own OpenUI5 environment. Something a CDN only supports partly.

What to do when you want to have the libraries available locally, in your intranet, on a computer without internet access or for your CI build? Easy: just download the files and host them on a web server like apache. This gives you still just one version of OpenUI5. Repeat this for each new version of OpenUI5 and over the years you`ll get a nice archive. To get a OpenUI5 library repository with all released version, you can make use of the fact that the project is open source and hosted on GitHub. And all versions tagged. It`s easy to build each historic version out of the git repository. Build it, put it into an apache www directory, and you can access it via a browser. This is easy, but takes some time.

To help you out with your OpenUI5 CI projects (or bug hunting, compatibility checks, etc), I created some Docker images. These images contain a set of OpenUI5 libraries and can be used in your CI setup or to try out OpenUI5 in a simple and easy way without having to install something besides Docker.

Docker image: openui5

Contains the latest released OpenUI5 library. The image is automatically build using my Docker file hosted on GitHub.

  • Size: 212 MB
  • Get image: docker pull tobiashofmann/openui5
  • Start container: docker run –d –p 50000:80 –t tobiashofmann/openui5 /usr/sbin/apache2ctl –D FOREGROUND
  • Access to libraries:
    • 1.32.9 (latest): http://<your docker server>:50000/resources
    • 1.30.11: http://<your docker server>:50000/1.30.11/resources
    • 1.28.25: http://<your docker server>:50000/1.28.25/resources
    • 1.26.16: http://<your docker server>:50000/1.26.16/resources

Docker image: openui5-sdk

Contains the latest OpenUI5 SDK. Compared to the above image, you get also the documentation, samples, etc, as well as the latest stable library.

  • Size: 165 MB
  • Get image: docker pull tobiashofmann/openui5-sdk
  • Start container: docker run –d –p 50000:80 –t tobiashofmann/openui5-sdk /usr/sbin/apache2ctl –D FOREGROUND
  • Access to libraries:

Docker image: openui5-rt.

Contains all openui5 library versions. The images is automatically build using my Docker file hosted on GitHub. Contains ALL OpenUI5 versions. You get >70 versions accessible via Apache. Each version is hosted under /<version>/resources. Example: /1.34.2/resources.

I had to face some Docker hub build restrictions, which impaired me to offer just one image. Right now I have one image for each minor tagged version (1.26, 1.28 -> 1.34). The images are cumulative. 1.26 gives you the version from 1.25 to 1.26, while 1.34 comes with all version from 1.25 up to 1.34. I guess in the near future I`ll also create images that only contain the versions of each minor release (only 1.28.*, but not 1.26.*).

  • Size: 1.34: 877 MB
  • Get image: docker pull tobiashofmann/openui5-rt:<tag>
  • Start container: docker run –d –p 50000:80 –t tobiashofmann/openui5-rt
  • Access to libraries:
    • 1.32.9 (latest): http://<your docker server>:50000/1.32.9/resources
    • 1.32.8: http://<your docker server>:50000/1.32.8/resources
    • 1.32.7: http://<your docker server>:50000/1.32.7/resources
    • You get the idea.
    • Oldest version: 1.25.0
Let the world know

Upgrade SAPUI component

Posted on by

There is at least one SAPUI component in an ABAP system that you can “easily” upgrade without having to upgrade almost your entire ERP system: SAPUI. An upgrade of that component is necessary to gain the lateset and greatest in SAP UI5. To upgrade that component from SP12 to SP13 do the following steps:

A pre-requirement of SP13 is to have an updated SPAM version. Make sure to have the latest one available for your system.

Extract the SAR file and copy the PAT to the server and import them.

Check the package content to see if the pre-requirements are fulfilled. Select “New Support Package” in the Directory section and then “Display”.

The dependencies should be marked as OK.

Select the component and click on calculate queue: Confirm the queue.

Click OK

Confirm the dialog with no.

The queue is now listed in the main screen.

To start the installation, go to the top menu -> Support Package and select “Import queue”.

Confirm the following message.

Click on OK to start the process.

To see the status of the import, check the messages in the status bar.

After the import (be prepared, can take some while). In case everything went through without problems, you should see the following message

The final step is to confirm this. Go to the menu and “Support Package” > “Confirm”.

Inform if you want help SAP to improve the process or not.

Check if SP13 is now installed.

Congratulation, you have now SP13 of SAPUI installed.

Let the world know

Trailing whitespaces in Eclipse

Posted on by

SonarQube is not only good in telling you that you have a tab indentation problem, but also shows that you have a lot of white spaces that make no sense: trailing white spaces at the end of a line.

How do you get rid of these in Eclipse?

You can configure Eclipse to delete trailing white spaces when you save the file.

Go to Windows -> Preferences -> Javascript -> Editor -> Save Actions

Activate “Perform the selected actions on save” and then “Additional actions” and select “Configure…”

Switch to tab “Code Organizing”

Confirm your choices by clicking OK. Afterwards the additional actions sections contains your selected save actions:

Every time you now click on save in a Javascript file, these actions will be executed.

Let the world know

Tab and white spaces in Eclipse

Posted on by

When you decide to analyze your source code with a quality tool like SonarQube, sooner or later you will get messages about trailing white spaces or to replace tab with white spaces. The severity is minor and if you now use tab or white space for indentation has no effect whatsoever on my final code. At the end I run grunt and uglify over the code and unnecessary spaces are eliminated. But you may get into other problems with space / tab:

  • Git code review
  • Changes between operating systems (Linux, Windows)
  • Unreadable code when opened in Wordpad / Notepad / vim
  • Tab is normally 4 white spaces, but when defined differently on a computer, code gets really unreadable
  • Angry developers in endless flame wars

Now, what do to when SonarQube is showing minor problems caused by tabs?

This is caused that by default Eclipse is using tabs to indent code. You cannot change the default profile, but you can define your own. To do so, follow these steps:

  1. Create a new profile

    Windows -> Preferences

    Click on New…

    Inform a nice profile name.

  2. Alter indentation

    Change the tab and white space setting.

    Change tab policy to spaces only

To apply the new profile to an already edited file, you can open the file and re-format it (CTRL+SHIT+F). Running a new SonarQube analysis eliminates the white space errors:

Let the world know