Skip to Content

After a few months of being away from blogging, I am coming back to write a few blogs about SAPUI5. Mike Howles recently had a great blog about Lumira Designer 2.0 SDK Components  which you should read. Even though his blogs are always great and have amazing content that I enjoy reading, this time, besides learning from his experience/expertise, he gave me motivation to get back into blogging as I have also been busy being a dad, so here is mine. Thanks Mike! Secondly, I was also driven by a question I saw recently on SCN   so I hope this can help clarify some doubts. This same blog can be found en español aqui

In my past experience, (~ 4years using SAP HANA and XS), I have been writing XS applications since its inception on SP5 (seems like a loooong time ago) started using SAPUI5 version 1.26, JavaScript views, etc. All the way to working on SAPUI5 version 1.38, etc. (I know at the current time, the latest version is 1.46) and the latest recommended UI views are of XML type. Here are some blogs which I have written in the past that explain how to create custom Fiori applications, pain points

etc. so why should I mention all this again now?

Now that I have set up the stage and being motivated by Mike, I have re-visited some of the UI5 applications I did in the past and thought, what would it take to upgrade one of those apps to a newer version of UI5? (the older UI5 versions, sap.ui.commons controls, JavaScript views, etc. to a newer version that uses responsive controls (sap.m), XML views, etc.) The purpose of this exercise is highlight the technical points to look for if you decide to go thru the same exercise.

Starting with the UI. How do I get a handle of the newer responsive controls.

The first thing to figure out is if the ui5 version you want to upgrade to is available on your system, or if you are going to use the one from openSAP. For the purpose of this exercise, I will assume we already have a newer version, perhaps 1.46 installed in our HANA environment. Keep in mind that multiple versions of sapui5 can cohexist in your environment or you could use one from a content delivery network.(openui5)

Initially, you would need to update the reference on your index.html file to point to the new sapui5 library (bootstrap part). You may need a component file, a manifest, etc.. all explained on my previous blog about How to develop a custom Fiori Application

 

Secondly, looking at the UI views. If I were to looking at replacing JavaScript views with XML Views, after all, the view type should not make much difference other than XML provides readability for maintenance, declaration of namespaces. Further, if all the MVC concepts are true, I should be able to decouple my V (in MVC) and replace it without any major issues *

So Why I said major issues?  A view by definition should contain the controls that define the User Interface with no behavior (behavior would stay in our controller logic).

Quick Side note: if a view contains JavaScript logic that should be in the controller, I would advise to first refactor this code into the controller or other commons js file. Typically, I have seen patterns of development where some developers include some event code in the view, such as a button press, or a drop down list change. For best practices, this segment of the code should be in a controller and only being referenced from the view as a function (or from another function within the controller). Now that I have gotten that taken care of, I will assume that the rest of the views would only have UI controls in it and all the events are defined on the controller file.

Other thing to consider while analyzing the view:

  • Data models – (named and unnamed and how were they referenced by path?)
  • Component / manifest files (on a custom Fiori application, these should be included)
  • etc

I have gathered a few of the most common UI controls that I used in the past for my applications and compared to the responsive controls that we are supposed to use now.

When looking for UI5 information, my starting point is always the SAPUI5 SDK: https://sapui5.hana.ondemand.com/

The responsive controls can be found on the Explored tab:  https://sapui5.hana.ondemand.com/explored.html

And the sap.ui.commons controls (now deprecated) can still be found on the Controls tab https://sapui5.hana.ondemand.com/#content/Controls/index.html

sap.ui.commons sap.m
Button Button
FormattedTextView FormattedText
Image Image
Label Label
TextArea TextArea
AutoComplete Input *Assisted
ComboBox ComboBox
DropdownBox ComboBox
DatePicker DatePicker
Checkbox Checkbox
TabStrip IconTabBar
Splitter (sap.ui) Splitter Layout / Split Container
Panel Panel
MatrixLayout does not exist
HorizontalDivider ?
Dialog Dialog
MessageBox MessageBox

amongst others… so, what changed and / or how can I prepare for the migration? This needs to be a thought out process while analyzing the controls on your (MVC) View. Keep in mind that some controls may have been dynamically created.

Starting with the most common controls in my list and most applications:

Table: (sap.ui.table.Table)

var oTable = new sap.ui.table.Table(myTable', {

                     visibleRowCount: 10,

                     selectionMode: sap.ui.table.SelectionMode.Single,

                     enableCellFilter: true,

                     filter: oController.onColumnFiltered

// other properties omitted for simplicity

              });

// for each column on the table, we needed to assign a few properties of the column // and any additional context needed for the type of control in its template

oTable.addColumn(

new sap.ui.table.Column({

              label: new sap.ui.commons.Label({

text: columnName,

tooltip: columnName}),

              template: new sap.ui.commons.TextView()

.bindProperty("text", { path: property.name })

       })); 

 

 

Now on the sap.m.Table (inside a view)

<Table id="myTable" growing="true" growingThreshold="10" visibleRowCount="20" >
<columns>
   <Column>
     <Text text="Product" />
   </Column>
   <Column>
      <Text text=”Description” />
   </Column>
   <Column>
       <Text text=”Some Action” />
   </Column>
<!— other columns -->
</columns>
<items>
   <ColumnListItem>
       <cells>
           <ObjectIdentifier title="{Name}" text="{someId}" />
           <Text text=”{Description}” />                   
           <Button press=”onTableButtonPressed” />       
        </cells>
   </ColumnListItem>
</items>
</Table>

Next is the button control – most applications will have the press event and some text when using the control. Well, this may be your lucky day because the press event is the same on both libraries.

One thing that got me was that I was using a custom data object in one of my controls in my javascript view, I was able to create a custom data object directly on the view as:

Var customData = new sap.ui.commons.CustomData({ writeToDom: “true”, key: “someKEy”, value: “someValue” });// make sure the value is a string so that you don’t get syntax errors

anotherControl.addCustomData(customData);

 

However, on the xml view, I had to add an additional xml namespace in order to be able to use this xml attribute. At the top of the view where you will be using a custom data attribute, you need to declare the namespace and use it as follows (example from the sapu5i developer guide) https://sapui5.hana.ondemand.com/#docs/guide/91f0c3ee6f4d1014b6dd926db0e91070.html

<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.ui.commons" controllerName="my.own.controller"
     xmlns:app="http://schemas.sap.com/sapui5/extension/sap.ui.core.CustomData/1">
 <Button id="myBtn" text="Click to show stored coordinates data" app:mySuperExtraData="just great" 
       press="alertCoordinates"></Button>
</mvc:View>

 

I will not go in detail into each control, but I wanted to share some thoughts about this exercise and point out some best practices of developing a UI, remind UI developers where to find the documentation and also share the way I go about when developing an application. It is very important to know the details and know what is available at the time of development so that it facilitates development itself in the long run. Please share your experiences if you have recently upgraded a UI, or if you happen to be in the process of an upgrade .

 

Thank you again for reading this blog and hope you can read some of the others!

 

Happy coding!

 

 

To report this post you need to login first.

2 Comments

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

Leave a Reply