UI5 Components and Extensibility Starters

[Former Member]

While working on Fiori application I was very impressed with the extensibility provided by the standard application

1. View Extensions
2. View Replacements
3. View Modifications
4. Control Extensions

I tried to go through the demokit documentation and did not find a well document example set for these concepts. So thought of writing this blog for giving a simple starting point in this concept. Hope it helps.

Ok, so let us first understand the very basis of extension. Extensions using UI5 components and some of the core apis can be done in premise of application space where custom application and original application resources are accessible to each other. Also very important thing to note that this extension approach is not an object oriented extension model but rather javascript code merging approach.

So, for instance in deployed on same server.

Now with this is in context, let us first create an application, original application and see what it takes to bring in the above four extension points in application.

So I create a new mobile application, say NEWUI5RND

and in index.html create componentContainer

<script>

  new sap.m.Shell("Shell",{

                                      title:"You Can Extend Me",

                                      appWidthLimited:false,

                                      app: new sap.ui.core.ComponentContainer({

                                                                                                    name : 'com.rnd'

                                                                                                   })

                                     }

                           ).placeAt("content");

  </script>

Now, directly under WebContent I will place a file called Component.js

Lets see some of the main parts of this file:

declaration and metadata-routing

so, its very much self explanatory, the important point is to note that for pattern "" we have given a Main view as landing view. This is the view that will get added to app, when we access http://........index.html for instance but will not load if a navigation parameter for instnace ..index.html#<paraName> is given. For this <paraName> must be added to routes aggregation.

Now, the next step is to understand where and how to create the app

This is in next part of the same file as show below:

createContent is responsible for creating the object that will be placed in component container that we instantiated in index.html

Now, lets look closer into the Main.view.xml to see the extension point concept

So, here we note two things, we can have core:Extensions and along with it we can also give a default visualisation. For instance here the label is default visualisation which will get overridden by the actual extension. the core:extension is just an aggregation and we can put any UI5 object, view in it.

Now, apart from this, for all four type of extensions mentioned above, we really do not need any other extension points, in a way the other 3 are implicit enhancements points.

Just for completeness please note that the first button has id "toggButton" and below is the controller file

Now lets do the extensions:

First step is to create an empty mobile application which will be deployed in same server, say NEWUI5RNDEXT1

Basic setups:

1. register paths from where the resources of original application can be accessed:

       2. create Component.js and extend the component declared in original application

Now, Customizing!

1. ViewExtensions

Let us extend the original Main view on the extension point declared and put a button in it.

1. Lets create a view with a button, the extension also supports fragments
2. Now, actual extension is done under customizing aggregation of the metadata the custom Component.js file as shown below. Note that extension is done for a particular view -extension combination. In this case the Main view and extension extActionBar

Output is as shown below:

Original:

Custom:

So, the application is extended with a new button Refresh

2. ViewModification

Now, let us look at modifying the actual view rather than extending it. So, let say we try to hide the Toggle Secondary Content button. You would have noticed that the id of this button was "toggButton". Below is the sytax in customizing to achieve this:

2. ViewReplacement

Now, let us look at replacing the view completely

2. Control Extension

Now, let us look at extending the controller. Here we can override the existing functions or add new ones.

So with this we are now ready for creating extensible UI5 applications.

Happy Coding.