My experiences with: UI5 development calling back-end through Gateway services and Google Map integration

I recently started getting into UI5 – for that purpose I decided to create a small DesktopProject where I wanted to be able to call back-end to get data for my Google map integration. I wanted to maintain locations in back-end and be able to read them from my App, and post the locations on Google map.

At some point I also want to be able to post (create) new data in beack-end.

One of the very first challenges I ran into was getting an idea of in what order the diffferent parts of the App were called (available) so that I could create the content I needed at the right time.

NOTE Panels created with collapsed: true is not rendered until the first time the user click the collapse icon. So if you want to change some elements of your panels or views you either have to wait until they have been rendered the first time or create the Panel with collapsed: false and then programatiically collapse it.

This caused me some problems at first in regards to my Google map integration. I wanted to create a Panel with an area for my Google map, but wanted the Panel to be collapsed from the beginning. No matter how I coded my map integration I always ended up with an error – until I realized that my code was ok – but the element I wanted to put the map into was non-existing at the time. When I started to trace the different parts of my App, I found out what parts of my App was called and when.

This lead me to the following:

[LOAD] it_lunch_misc.js

[LOAD] it_lunch_model.js

[LOAD] it_lunch_map.js

[LOAD] LunchDesktopMainView.view.js

[LOAD] LunchDesktopMainView.controller.js











[LOAD] LunchDesktopLocView.view.js

[LOAD] LunchDesktopLocView.controller.js
















    doSetMarkers([object Object])




Ofcourse your App begins in your index.html. after that all your scripts specified in your head are loaded in the order specified. Your views or the script files for each oif your views are then loaded in the order they are created:

var viewMain = sap.ui.view({id:“idLunchDesktopMainView”, viewName:“lunchdesktopproject.LunchDesktopMainView”, type:sap.ui.core.mvc.ViewType.JS});


var viewLoc = sap.ui.view({id:“idLunchDesktopLocView”, viewName:“lunchdesktopproject.LunchDesktopLocView”, type:sap.ui.core.mvc.ViewType.JS});


For each view the main view.js is loaded first then the controller.js. If any global methods are called in your main view.js they are called before the onInit event is called.

NOTE Even though your content is created in your main view.js, it is not rendered if your panel is collapsed. So whatever you do in your methods at this point the elements might not be available yet in the DOM.

When all your views has been loaded and all your methods has been called, the events onBeforeRendering and onAfterRendering is called for each view – and the global methods that you might call inside them.

After all views has been loaded and all event of the views has been called, the documentReady event is called and lastly the windowLoad event.

Now the App is running and ready for input.

With this knowledge I was able to put my code exactly where I wanted it – so that I knew that whatever elements I wanted to change or work with were rendered and available.

My solution for the Google map challenge was to create my Panel initially visible (collapse : false). In the event windowLoad I create my map and place it at my element of my rendered panel. Then I programatically collapse the Panel. This is also the place where I put my CSS styling if I want to change anything.

NOTE When doing CSS styling, the elements has to be rendered at least once. Which means that you have to un-collapse your panels before you change any styles and then close them again if that is needed. Or define all Panels as un-collapsed, then style whatever you need to style and collapse the Panels you want.

Another challenge I met was regarding visibility or scope. When I create a variable or parameter globally in my own script files, they are not always available when you need them in your views at time of load and creation. I especially had problems with my back-end calls when I used onSuccess functions as closures. Even though I created global variables for my returned data and tried to save them there, my data ended up as locally visible only to the closure. I found a tip online where you could create your data globally using this:

$(“body“).data(“gFirstName”, “Kell”);

Initially this worked for me – but when I moved most of my methods into a separate .js file and loaded in the head of my index.html, the variables were not available since the body element had not been created yet. Instead I found out that I could store my global data in a much better element:

$(“html“).data(“gFirstName”, “Kell”);

Since this element is available from the beginning my data is always available.

NOTE Any type of data can be stored this way. Even objects like JSON or OData.

I hope this will come in handy for others who are trying to get a grasp on how to code UI5.

More will follow ..

Best regards,

Kell Vagtholm

And happy coding

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply