HANA Cloud Platform Application Deployment

After working on HANA Cloud Platform Trial account, I finally got a chance to get hold of a licensed HANA Cloud Platform Account. Obviously, I wanted to deploy SAPUI5 Applications and I followed the same process as I followed earlier while working with trial account. Unfortunately, I was not able to deploy the application and Eclipse was throwing error – Not a Valid SAP HANA Cloud Platform Landscape Host. I was trying hard to find the root cause and finally I could deploy the application. It was one of the silliest mistakes I did since long long time.

Do not use complete domain as landscape host

I was using “account.eu1.hana.ondemand.com” as landscape host and this was the only mistakes I was doing. If you have a licensed HANA Cloud Platform, no matter URL HANA Cloud Platform redirects you to after successful login. The landscape host will always be “hana.ondemand.com“.

If you are also getting similar error, simply remove extra domain information and try deploying application once again and you should get through. That’s all.

SAPUI5 Navigation with Router

Navigation is one of the most important functionality in any application & UI5 isn’t any exception either. There are a number of ways to implement navigation in SAPUI5 for e.g. Shell, EventBus, and Routing. Router which is a sub-class of sap.ui routing library is the recommended way to implement navigation. In this article, you will learn how to use SAP UX Shell that uses navigation with Router instead of using Shell capabilities so replace content at runtime. In this article – SAPUI5 Navigation with Router, you will learn to implement routing in SAPUI5 application, set custom URLs for views or pages, and understand the recommended way of navigation in SAPUI5.

One of the major advantages of using router is its capability of enabling custom URL for each view or page in UI5 application. That means, you can access UI5 application with custom URL and share URL to any view or page form the application. That said, another user does not have to run the application from scratch. With UI5 router, dynamic URLs offer significant improvement in user experience.

SAPUI5 Router Project Structure

In this article : SAPUI5: Navigation with Routing, we will use create two views and perform navigation between these views with router. We will define & register router in index HTML for the sake of simplicity. However, it is recommended to define router in a controller.

Step 1: Create SAPUI5 application project with initial view name as – View1, and name the project as “routerdemo”

Step 2: Create a new view in the “routerdemo” project, and name the view as – View2

Create Content for both Views

We will complete easy part first. Use following piece of code to create content for both views. We do not have to create any flashy UI in these views. We will simply create text view and add static content.

Copy and paste following code in View 1.view.js file. Place the code inside “createContent” function.

var oText = new sap.ui.commons.TextView({
			
			text: "This is View1"		
		})
		
		return oText;

Similarly, copy and paste following code in View2.view.js file. Place the code inside “createContent” function.

var oText = new sap.ui.commons.TextView({
			
			text: "This is View2"			
		})
		
		return oText;

Create UX Shell, and Router in Index HTML

For UX Shell to function properly “sap.ui.ux3” library is required. Add a reference to this library in data-sap-ui-libs.

Define Shell

Shell is a container that hosts a number of views together. However, all view rendering is mutually exclusive and one view is not aware if another view exists. In sum, Shell only knows which view to load and thus, Shell cannot provide custom URLs for each view or page it that shell holds.

var oShell = sap.ui.ux3.Shell("shellId",{
					appTitle: "routerdemo",
					showLogoutButton: false,
					showSearchTool: false,
					worksetItems: [
					            new sap.ui.ux3.NavigationItem("View1Id",{
					            	key: "View1",
					            	text: "View1"
					            }),
					            new 
sap.ui.ux3.NavigationItem("View2Id", {
					            	key: "View2",
					            	text: "View2"
					            })
					]}

Above piece of code declares a shell and defines navigation items inside shell. We have added both View1 and View2 as navigation items inside shell. Remember; always assign ID for each navigation item so that router can know which view to load when router is triggered. “View1Id” and “View2Id” are both IDs for navigation items.

Define Initial Content of Shell

content: [new sap.ui.view({
						id: "view1Id",
						viewName: "routerdemo.View1",
						type: sap.ui.core.mvc.ViewType.JS
					})]

Above piece of code add default content that shell should load. Here we have declared that navigation item view1Id should be initial content. However, you can choose not to define initial content as router is taking care of the default content. So you can opt to skip this step and routing will still work without any problem.

Place Shell on the Page

Now, simply place the shell at “container” DIV of the index HTML

oShell.placeAt('container');

Define Router

var router = new sap.ui.core.routing.Router([
				   {
					   pattern: "",
					   name: "View1",
					   view: "routerdemo.View1",
					   viewType: sap.ui.core.mvc.ViewType.JS,
					   targetControl: "shellId",
					   targetAggregation: "content",
					   clearTarget: true,
					   callback: function() {
						   oShell.setSelectedWorksetItem("View1Id");
					   }
				   },
				   {
					   pattern: ["custom", "View2"],
					   name: "View2",
					   view: "routerdemo.View2",
					   viewType: sap.ui.core.mvc.ViewType.JS,
					   targetControl: "shellId",
					   targetAggregation: "content",
					   clearTarget: true,
					   callback: function() {
						   oShell.setSelectedWorksetItem("View2Id");
					   }
				   } 
				                                             
				                                             
				]);

Defining router has two steps. One, defining the router generic implementation, and two, defining router properties.

  • Pattern: [“<url pattern>”, “<view or page id>”]
  • Name: Tells router which view to load when given URL pattern is found in the URL
  • View: Provide View or Page ID
  • View Type: Mention what view type is for the view to be loaded
  • targetControl: Specify shell ID which is the user control point or user interaction point
  • targetAggregation: Content to be loaded when router navigates to another view
  • clearTarget: Clears target when navigation triggers
  • callback: Defines a function that places view defined in the router properties and sets that in the selected work item of the shell

Define HashChanger

Hash Changer is a library that sets custom URL based on the patter property of the router and enables application to be accessed by custom URL instead of running application from the start. The advantage is you can pass on the custom URL to someone who wants to see only specific page in the application. With hash changer, router can recognize the URL pattern and loads specific page when another user runs the application with custom URL.

Copy and paste below code to define hash changer.

worksetItemSelected: function(e) {
						this.removeAllContent();
						
						var selected = e.getParameter("key");
						
						var oHashChanger = new sap.ui.core.routing.HashChanger();
						oHashChanger.setHash(router.getURL(selected));
						
					}

Register & Initialize Router

                                router.register("routerID");
				router.initialize();

In the end, router must be registered so that it can be referred with router ID globally. Also, initialize the router so that it can be used in the current application.

Note: A reference to hash changer library is required. Copy and paste following code immediately before you define Shell Element in Index HTML.

                jQuery.sap.require("sap.ui.core.routing.Router");
		jQuery.sap.require("sap.ui.core.routing.HashChanger");

We need reference to routing & HashChanger both.

Complete Application

Index HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
		

		<script src="resources/sap-ui-core.js"
				id="sap-ui-bootstrap"
				data-sap-ui-libs="sap.ui.commons,sap.ui.ux3"
				data-sap-ui-theme="sap_bluecrystal">
		</script>
		<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

		<script>
				sap.ui.localResources("routerdemo");
				
				jQuery.sap.require("sap.ui.core.routing.Router");
				jQuery.sap.require("sap.ui.core.routing.HashChanger");
				
				var oShell = sap.ui.ux3.Shell("shellId",{
					appTitle: "routerdemo",
					showLogoutButton: false,
					showSearchTool: false,
					worksetItems: [
					            new sap.ui.ux3.NavigationItem("View1Id",{
					            	key: "View1",
					            	text: "View1"
					            }),
					            new sap.ui.ux3.NavigationItem("View2Id", {
					            	key: "View2",
					            	text: "View2"
					            })
					],
					worksetItemSelected: function(e) {
						this.removeAllContent();
						
						var selected = e.getParameter("key");
						
						var oHashChanger = new sap.ui.core.routing.HashChanger();
						oHashChanger.setHash(router.getURL(selected));
						
					},
					content: [new sap.ui.view({
						id: "view1Id",
						viewName: "routerdemo.View1",
						type: sap.ui.core.mvc.ViewType.JS
					})]
					
				});
				
				oShell.placeAt('container');
				
				var router = new sap.ui.core.routing.Router([
				   {
					   pattern: "",
					   name: "View1",
					   view: "routerdemo.View1",
					   viewType: sap.ui.core.mvc.ViewType.JS,
					   targetControl: "shellId",
					   targetAggregation: "content", //content/Page
					   clearTarget: true,
					   callback: function() {
						   oShell.setSelectedWorksetItem("View1Id");
					   }
				   },
				   {
					   pattern: ["custom", "View2"],
					   name: "View2",
					   view: "routerdemo.View2",
					   viewType: sap.ui.core.mvc.ViewType.JS,
					   targetControl: "shellId",
					   targetAggregation: "content", //content/Page
					   clearTarget: true,
					   callback: function() {
						   oShell.setSelectedWorksetItem("View2Id");
					   }
				   } 
				                                             
				                                             
				]); 
				
				router.register("routerId");
				router.initialize();
				
		</script>

	</head>
	<body class="sapUiBody" role="application">
		<div id="container"></div>
	</body>
</html>

Working Application

On application initial load

SAPUI5 Router Navigation View1

On Navigation to View 2

SAPUI5 Router Navigation View2

Now, you can pass the URL with #/custom and application will directly load View 2 instead of loading view1 initially.

Download Entire Project Here

Basics of SAPUI5 Models – JSON, XML, and OData

I don’t have to tell you what a model is in case of SAPUI5. We have worked with RFC models, Webservice models in WebDynpro Java. We also understand how to create SAPUI5 Modles of different types. However, this post isn’t really to brief you on models in SAPUI5, but to provide you quick reference on types of models, differences, declaration, and binding.

JSON Model

– Supports JS object data

– Is a client side model

– Supports two-way binding

– Suitable for small data that will be made available entirely on client side

XML Model

  • Supports XML data
  • Is a client side model
  • Supports two-way binding
  • Suitable for small data set

Odata Model

  • Supports OData
  • Is a server side model
  • Suitable for large data set that is entirely available only on server. Small part of data will be sent to client upon request

Resource Model

  • Used only for resource bundle & language support

Instantiating a Model

There are different methods to instantiate different types of models. However, XML and JSON model instantiation is similar.

var oModel = new sap.ui.model.<json/xml>.<JSONModel/XMLModel>(dataUrlOrData);

 Odata model 

var oModel = new sap.ui.model.odata.ODataModel(dataUrl);

 

Design Patterns in SAPUI5 and Fiori

When I was developing Webdynpro Java applications back in 2008-2009, I had no clue about anything called as Design Patterns. Forget about using or implementing one of the Design Patterns in my development. Not just me, I haven’t seen any anybody asking for options in design pattern that development team is going to use. In sum, design patter is relatively new to SAP developments. That is the main reason when you search for design patterns in SAPUI5 or SAP Fiori, you will find only handful of design patterns.

Have we come of age?

We are talking about responsive design in SAPUI5 and SAP Fiori. Certainly we have come of age. Well, not yet. We are still one step behind. Though responsive design has kind of become a buzz word in and around SAP, general web & mobile development paradigm has gone further. Google has even released its new design methodology called as – Google Material Design.

Material design isn’t only responsive, but it try to replicate experience you have while working with different materials in real life such as water, blocks, paper and so on. This why, you simply don’t need to learn to use the applications at all! Google is cleverly working on to eliminate an important factor that acts as a hindrance in adopting new technology and that is – Learning. You already know that when you put papers on top of one another, you can’t see the overlapping content. Google motivates you to use similar design experience while developing UI and make overlapping UI that exhibit overlapping paper experience. See the image below to understand this better.google material physical design

We have some more time to go until we start using Material Design in SAPUI5. However, we should be happy that SAP is genuinely working on adopting new technology design principles.

So what do we have in SAPUI5 & SAP Fiori?

SAP has given deep thought before relating its design patters. At least that is what I feel. In almost every large scale enterprise application, important feature is fetch – select – detail. That means, you’d generally input some data, fetch data from backend into the table, make lead selection and view details of the selected entry. To translate this experience on mobile device, SAP has released 4 different design patterns. These are – Master-Detail, Master-Master-Detail, Full Screen, and Multi-Flow.

SAPUI5 and Fiori Design Patterns

Image – SAP Developer Guide

Although there are a few Design Patterns in SAPUI5 and Fiori, these patterns are supported by most of the enterprise business scenario. In addition, these design patters form the base for building SAP Fiori Applications and when we use these design patterns, our custom Fiori App will have a unified user experience with standard SAP Fiori Apps.

Use Cases

Master-Detail: This pattern is supported by SplitApp control of SAPUI5 and it is just a master list displaying list of content which allows lead selection and its detailed view. This I think is mostly the starting point in application building.

Master-Master-Detail: Think of Shopping Cart or Trip Booking Application. You don’t want your trip to be booked right on the first page or payment to be made when you visit shopping cart. You want to see a confirmation page which will show what you are buying or which flight you are booking and also display details of the transaction in the detail section.

Full Screen: This is best suited for displaying charts, bar graphs and pictorial data.

Multi-Flow: SAP recommends using this pattern when application flow is too complex and you need to use all patterns together to build the working app.

Take Away

It is important to know that we have design patterns for SAPUI5 & SAP Fiori Application development. It is even important to understand importance of a design patter and design methodology. Look at Google Material Design for example. Responsive design isn’t a privilege any longer. It is assumed that your application will be responsive when you are building applications for handheld devices. We must keep learning.

Can HANA Cloud Portal Really Replace Enterprise Portal?

A few days ago, I read an update from SAP Facebook page that asked this question – Can HANA Cloud Portal Really Replace Enterprise Portal? I could not keep myself from writing this post after, and my answer is – NO!

Traditional Portal, as we now refer to Enterprise Portal or Netweaver Portal, is altogether different offering and HANA Cloud Portal isn’t really close to offering even 50% of the capabilities offered by Enterprise Portal. I am not refuting the possibility that HANA Cloud Portal cannot be enhanced to match capabilities of Enterprise Portal, but technologically speaking, HANA Cloud Portal is in its infancy and it is too amatuerish to think about replacing Enterprise Portal with HANA Cloud Portal.

What HANA Cloud Portal Offers

  • At the time of writing this post, HANA Cloud Portal offers below functionalities.
  • Rapid Site Building
  • Document Storage
  • Role Based Access
  • Role, User, and Group Configuration – Only at page level, no other permission level available at this time
  • Integration with HANA Cloud Platform
  • Hosting a number of applications including SAPUI5, JAVA, OpenSocial and so on
  • Extension for SuccessFactors
  • Colud Connectors & HCI (HANA Cloud Integration)
  • Configuration of custom Identity Provider – This one needs support of HANA Cloud Platfrom

Though this list isn’t really exhaustive, but it covers majority features of HANA Cloud Portal.

What HANA Cloud Portal Cannot Offer (At this time)

  • Granular permission configuration – Something that KM offers
  • Providing widget level permission configuration option
  • Collaboration capabilities offered by Enterprise Portal – Such as subscription
  • Out-of-the-Box theme editor – You need to downlaod theme and edit properties either in LESS Editor or wordpad. However, editing LESS files in wordpad has some issues that I personally have experienced. So best option is – Use LESS Editior such as CRUNCH
  • Theming Support – If you upload same theme file twice, HANA Cloud Portal will simply create another entry without even renaming or appending any version number to keep track of difference themes. This is a big low in my opinion
  • No clear information on content transport – We are used to Transprot Packages & CTS based tranport that takes care of versioning. In case of HANA Cloud Portal, there is no clear information on whether CTS+ can be integrated with HANA Cloud or not. We can exprot a site but is it expected that we import content even in Production? No! we cannot really do that. We need a transport mechanism here
  • In-depth document management – HANA Cloud Portal offers document storage, but that is all it is at this moment. You cannot really configure access on documents uploaded to HANA Cloud Portal and therefore, it cannot match the experience offered by KM
  • Custom Login – Though HANA Cloud Portal does provide support for developing your own login module and login page, but you will have to implement everything from scratch. If you use LDAP, you cannot really expect HANA Cloud Portal will take care of rest. You can definitely configure LDAP as Identity Provider, but in that case, you will have to DETACH standard login process offered by HANA Cloud Portal that is built on top of SAP Service, and develop your own. This is a major task

Again, this list isn’t exhaustive.

Application Development & Transport

You can easily build SAPUI5, JAVA, and OpenSocial Applications and deploy to HANA Cloud Platfrom so that you can leverage these applications in your HANA Cloud Portal Site. However, if you try to sell this to a customer who is expecting a clear transport strategy for all custom applications, you will fall on face.

NWDI Integration – Though you can use NWDI 7.30 SP05 onward to deploy UI5 application, the process is really time consuming. You have to create a Web Application Archieve & Associated Enterprise Archieve that can be deploy to JAVA Server. You cannot really expect to do that with every application, can you?

Application Build & Deploy – If you cannot use NWDI for the reason mentioned above, what is option available? SAP recommends using Maven Plugin for application build in a enterprise system landscape. But, what about continuous integration?

Currently, we are exploring multiple options to match the functionality offered by NWDI. We plan to use Maven for Application Building, and Hudson for Continuous Integration. However, in my opinion, this is too much overhead maintenance. In addition, not many Enterprise Portal developers have these skills simply because these options are niche to web development.

Where Does HANA Cloud Scored Over Enterprise Portal

UX and Usability – This is a major plus. User experience offered by HANA Cloud Portal matches with that of commercial software user experience and Enterprise Portal is nowhere close to offering such experience at the moment.

Lean Implementation – HANA Cloud Portal is extremely lean and fast. You can get started in no time and design a fully functional site within a week even when your team has never worked on HANA Cloud Portal. Put simply, learning is easy.

Runs on HANA – This one is a major advantage when it comes to speed. HANA Cloud Portal runs on top of HANA DB and this really makes the difference. Basically, you don’t need to spend additional money to get HANA support. HANA Cloud Portal runs Out-of-the-Box on HANA.

Subscription & Need Based Model – HANA Cloud is a SaaS – Software as a Service, and HANA Cloud Platform is a PaaS – Platform as a Service. This makes you cherry pick what you really need and yet have an option to scale up anytime when needed. For e.g. If you are expecting a huge traffic to your corporate time at the time of quarterly result declaration, you can simply add more bandwidth and storage

 

SAPUI5 Tutorial: Work with HTML Views

This article is a concluding article for SAPUI5 Views. We already know how JavaScript Views work in SAPUI5. In last article – SAPUI5 Tutorial: Work with XML Views, we also saw how to use XML Views and Some of the advantages of using XML Views over JavaScript Views. In this post, I am going to cover same example that we developed in XML Views scenario, but we will implement controls using UI5 HTML tags.

Before You Think of Using HTML Views

If you think HTML Views will be really easy to work with, then you are mistaken. Unfortunately, HTML Views are not that easy and it takes a lot more effort to implement. From scalability point of view too, HTML Views do not impress much. Although, it is too early to declare that HTML Views are not worth. The take away is, don’t think of HTML Views simply because you have some comfort level with traditional HTML or HTML5.

SAPUI5 HTML View Markup

When you create HMLT views, you will notice that HTML Views work with pages and applications. You will immediately notice a markup something similar to below.

<script>
				sap.ui.localResources("sapui5_html");
				var app = new sap.m.App({initialPage:"idUI5_HTML1"});
				var page = sap.ui.view({id:"idUI5_HTML1", viewName:"sapui5_html.UI5_HTML", type:sap.ui.core.mvc.ViewType.HTML});
				app.addPage(page);
				app.placeAt("content");
		</script>

Here, as you can see, sapui5_html is the name of my application/project. UI5_HTML1 is the default application created, and sapui5_html.UI5_HTML is the view name in my project. Further, default application is added to page that hosts the HTML view of my application inside which the application controls are rendered.

SAPUI5 Content Aggregation

Don’t get confused with wordings here. Content aggregation is nothing much UI implementation or simply collection of UI that makes your DOM (Document Object Model) or Application. We refer to UI elements by the term “aggregation”. So initial step is to define content aggregation and it is done with the following code.

<div data-sap-ui-aggregation="content"></div>

Note: All UI declarations go inside this primary DIV.

Work with HTML Tags

Let us now create a simple label, text field, and a button to capture event.

<div data-sap-ui-type="sap.ui.commons.Label" data-text="Name"></div>
		<div data-sap-ui-type="sap.ui.commons.TextField"> </div>
		<div data-sap-ui-type="sap.ui.commons.Button" id="Button2" data-text="Submit" data-press="doListen"></div>

All HTML Tags are referred with a tag library starting with sap.ui.commons.<name of the UI element>. This makes it a bit difficult to pre-think how any particular UI is used. For e.g. You need to know that text field is referred with “TextField“. Please note that this reference is case sensitive.

Work with Functions

Working with functions is not difficult at all. Simply use data-press attribute to attach a function/method you want to use on a click of a button or user event. As you can see in the above code, doListen is the method that listens to button click and responds accordingly.

Define Functions in Controller

Define a method that listens to event with following code.

doListen: function (){
	
	
	alert("Event handling in html view");
	
	
},

Note: Do not miss ending comma (,) when you define a new function in controller. Without this comma, your application will not work correctly.

Let us now run the application and see it in action.

SAPUI5 HTML View Demo Tutorial

 

Let us click on the Submit button to check whether event handling is working or not.

SAPUI5 HTML View Demo Tutorial Event Handling

Take Away

Though it looks simply to build a small demo application with HTML Views, you should also give a though to XML Views which are way more scalable, at least in my opinion. Nevertheless, a lot of SplitApp demo applications are developed using HTML view and I am sure there will be some reason for SAP to use HTML views. Take away is, do not discard HTML Views because it is teadious to work with, but also look at the advantages & alternatives. As a developer, you must be comfortable with any view implementation.

The Sophistication of UX & Design

I am an ardent follower of Seth Godin and his ideas in digital marketing. I have borrowed this title from one of his post titles. In his post “The sophistication of truth” Seth says “Long words when short ones will do. Fancy clothes to keep the riffraff out and to give us a costume to hide behind.” You must be thinking what I am driving at?

The point I want to make here is simple. Over sophistication is complicated and often creates complexities for everyone. Now, if I relate this with UX and Design, I find that there is a very thin line between sophistication of UI, Usability, and Modern Design. When we say we follow UX strategies and want to develop usable applications, do we really understand what usability is? Or we simply try to match the user experience of our applications with that of modern commercial software? Can you answer this in Yes or No?

What is The Sophistication of UX & Design?

There is a lot of noise around fancy words such as UI, UX, and Design Thinking and so on. Unfortunately, many developers find UX challenging and that is not their mistake really. They are what SAP made them to be. Now, suddenly when you start bombarding developers with UX Strategies, UI Design, Design Thinking, and so on, all they try to do is set a benchmark and follow. In this case, benchmark could be an SAP Fiori Application or SAP UI5 Application. And we all try to design application that matches the UI and UX, at least a bit, with benchmark applications.

What is Over Sophistication of UX & Design?

Setting application design and UX benchmark isn’t really a bad practice. It helps a lot of us to understand the language that SAP speaks. I feel it is just a matter of time high tech and non-manufacturing clients too will start speaking this language. In sum, it is beneficial to set benchmark and try to scale up.

However, what we really miss is that the benchmark applications, which can also be SAP’s own applications, are designed keeping a targeted user persona in mind. Do not confuse persona here with SAP persona. If we miss this basic point that SAP used while designing applications, we will end up developing an application similar in look and feel with that of SAP, but this application may not be helping your users really.

In this case, despite you boast of developing an application that follows SAP UX Strategy & all design methodologies such as responsive design and so on, you end up losing.

What Should We Do Then?

Time and again I have emphasized this – Understand your users. if you don’t who are your end users, what skills they possess, what geographical location they comes from, what is the impact of geography on your application usage, and so on, you can never really design a usable application.

Thankfully SAP has understood that not every user is a super user and not every user possesses the skills and technology understanding. For e.g. imagine yourself designing an attendance record application for some school in Africa. Can you really sell them your application because it follows SAP UX Strategy? or because your application is response and reacts intelligently to all screen sizes? Hell No!

Stop Confusing UX & Usability

I asked some of my friends whether they can tell me the difference between a UX and Usability. Almost everyone ended up talking almost same thing for both UX and Usability. Let me ask you another question. When your client asks you to design a new SAPUI5 application from scratch, what will you design? – Usable Application or Application that offers modern age UX?

Usability and UX are not interchangeable terms. Usability impacts UX, plain and simple. I am eager to ask what a user experience is really.

In my opinion, User Experience is not something that user experience after using your application. User Experience is how easily user can work with your application, how much you need to educate user before the application achieves its purpose, what is the error rate of your users when they work with your application, and so on. These things define user experience and that is it is said that UX can be enhanced.

If you notice, the points I have mentioned above – Ease of working, Low Error Rate, Minimal Education etc. are nothing but characteristics of a usable application. When you design a usable application you help enhance user experience directly.

Simple Things First

Don’t use response layout in your UI5 application just because it is so cool. Don’t use a split app control just because nobody in your team has seen any SAP application behaving the way SplitApp does. Don’t just go on adding CSS Styles because you find it so impressive. You may just impress your colleague sitting by your side; you cannot really impress end user with these jargons.

Here are some points to sum up

  • Always start with – who are my users?
  • If possible, ask for field research – this is nothing but talking to real users and understanding their pain points
  • Design user persona – Different types of users categorized on basis of technology skills, internet skills, age, and so on
  • Design Wireframes – Wireframes helps you to put most important things right in front and highly visible area of your application
  • Develop a Prototype – Please do not think that a prototype is a working replica of real application. A prototype could even be a PSD (Photoshop) file that shows different sections of applications. A prototype simple helps user to say – Yes, this is what I really want.

What Does SAP UX Strategy Means To You?

Long I have been talking about User Experience and importance of adopting modern design thinking for SAP Applications. My voice isn’t just an echo of what SAP has been promoting, in fact, I have been talking about usability and its importance in SAP Applications long before SAPUI, SAP UX Strategy, and SAP Fiori were announced publically. SAP’s stance of UX and design innovation is reassurance of the trend.

Why Do We Need a UX Strategy?

More than 80% of the SAP Screens that people use today are designed using a technology that was in use in 1992. That is good 14 years old! SAP always had an idea that consumer applications and its user experience is something that is changing the way people interact with a software or a website at home. For e.g. Imagine Facebook designed in old SAP R/3 or SAP Portal or even JSP Pages. Would you spend as much time on Facebook as you do currently? Answer is straight no. When it comes to business, people have no choice but use whatever available and we SAP developers help a bit to improve user experience of SAP Applications. That said, an user would never like to spend his leisure time at home on an SAP Screen ever and SAP always knew this. Just that we were not aware that SAP was closely listening and monitoring this change.

So, at this moment, we work with SAP Screens that has its base technology designed in 1992 and when we go home, we use consumer software that provide superior user experience. Such consumer software makes our life easy. To fill the gap between different user experience at work and at home, SAP finally decided to work on UX Strategy that would provide a seamless user experience and more important, that would make you enjoy working with SAP Screens.

Why is SAP Always Late?

This was the question I used to think and a lot of Non-SAP UI developers would ask me. Why SAP adopts a particular UI technology when it has passed its peak? Why is SAP so late in adopting new technology that we do in web design or web application design? I only got the answer recently.

SAP estimates that currently there are more than 400,000 supported SAP Screens in use. Now that is a huge number. If tomorrow I appoint you as the CEO of SAP and give complete freedom to change SAP Screens, would be able to do that? 400,000 screens! Think again!

This was the reason SAP released over 20 new technologies that would modernize the user experience at least a bit. For e.g. SAP released Visual Composer which definitely offered better user experience over simple JSP. Then there was WebDynpro for ABAP. For a while SAP thought that it finally found a solution and started moving everything onto SAP ABAP. A lot of business packages were moved from JAVA to ABAP. Then there was Ajax and SAP Portal 7.3, SAP Portal Mobile edition, SAP Portal On-Device and many more. All these technologies were introduced so that you can enhance user experience in whatever limited way possible. A lot of products came in between – SAP AjaxWeaver, SAP Mobile Infrastructure, and SAP SUP and so on.

Is UI5 Just Another Technology Then?

No! At least it looks like. SAP thinks that only after launch of HTML5, it has found a solution to bring all of its screens to one common design principle and unify the UI technology. SAP thinks that HTML5 offers stable platform for it to move its products to HTML5 and therefore, UI5 is here to stay. Not only to stay, but revolutionize the way SAP screens are developed and this is going this change our life. Please note that I am not talking simply in context of SAP Portal consultants, but this change is going to affect every damn SAP developer for good.

New, Renew, Enable

I wrote a post earlier – What is SAP UX Strategy?  and I also briefly mentioned what exactly these terms mean to an SAP Consultant. However, I must accept that I did not clearly understand then what this strategy exactly would mean to a client who is planning to adopt latest SAP Products such as HANA Cloud, Fiori, or UI5.

New – This is self-explanatory and simply means that all new SAP offerings and applications will be designed with HTML5 as a base technology or SAPUI5.

Renew – When SAP analyzed the usage statistics of SAP Screens and Transactions, it was noticed that 80% of the users use 20% of the screens. That means SAP can initially work on 20% of the most used screens first and that comes under renew approach. This is where SAP Fiori comes into picture. SAP Fiori comply with SAP’s vision of “From Transaction to Application” and by the end of this year, I think the number of Fiori applications will be around 900.

Enable – Of course when 20% of the screens are offers modern user experience, customers would definitely expect rest of the screens to offer similar user experience and this is where Enable strategy stands. This where people like you and me come into picture and develop applications or migrate old custom applications to UI5 applications with Eclipse, SAP HTML5 Toolkit, HANA Cloud Platform, HANA Cloud Portal, SAP Gateway Accelerator Tools and so on.

Take Away

SAP UI is no longer headache of SAP Portal or SAP ABAP. People have been developing SAP Screens in too many UI technologies and SAP intends to unify this. No matter whether you are an SAP Portal Developer, or an ABAP Developers, sooner or later, you are going to work on SAPUI5. Whether you like it or not! I am not saying this will happen suddenly, but 4-5 years down the line, SAPUI or SAP Screen would only refer to SAPUI5.

 

SAPUI5 Tutorial: Work with XML Views

SAPUI5 offers different options to build applications using a JavaScript, XML, JSON, and HTML Views. Almost every standard documentation published by SAP is written in JavaScript and therefore, not many have tried working with XML views. If you take a close look at SAP Fiori, you’d understand that all SAP Fiori applications use XML Views as its base technology. Simply because of the scalabiltiy offered by XML views and ease of parsign XML Views. In fact, SAP claims that XML Views can be parsed as quickly as JavaScipt views. This makes a good case to start using XML views for SAPUI5 development.

JavaScript Views are Cumbersome

Let us accept this! JavaScript views are too cumbersome to build and the syntax is complicated at first. A lot of SAP Portal developers prefer working with JavaScript views simply because they have at least some experience with JavaScript in SAP Portal developments. Rarely we use XML in SAP Portal development and I think this might be the reason why poeple initially hesitate to use XML Views in SAPUI5 application.

Help Documentation is in JavaScript

Almost entire of standard documentation published by SAP is in JavaScript. That means, all code snippets and examples are build using JavaScript. Of course, there are some exceptions such as SplitApp and so on. But majority of beginner level examples are in JavaScript.

Advantage of XML Views

XML Views are Declarative – You don’t have to bother about a bracket, or a comma, or even a semi-colon. XML Views simply use declarative UI building which is done using XML tags. Let us take an example.

XML View Schema

<core:view>

<content>

All SAPUI5 Controls and Elements goes here....

</content>

</core:view>

When you choose to build SAPUI5 application using an XML View, an empty view is created with <core:view></core:view> tags. We then begin building UI5 controls.

Note: You can directly start using controls such as table or list. You don’t really have to define everything inside <content></content> tags. I have done this just for the sake of maintaining code sanity.

Defining UI Controls with XML

Defining UI control is extremely easy in XML Views. Let us say if you want to create a button UI in your view. You can do that simply be using the following code.

 

<Button text="Test"/>

This is it! With just this small declaration, your application will render a button with text “Test”.

Handling Events in XML View

Handling events is very easy and isn’t as complicated as it is with JavaScript views. Simply use following code to raise an event on press of a button we just defined above

 <Button text="Test" press="doListen"/>

Now when you click on the “Test” button, your application will raise an event “doListen” and it will call a function “doListen” with controller method controller.doListen. That means, you will have to write a function “doListen” in your controller.

Note: You do not have to use methof controller.doListen. Your application manages this all by itself.

Define a Function in Controller

Simply use following code to create a new function “doListen”. We will simply raise an alert to show that event raise after pressing the button is captured.

doListen: function(){

alert("Listening to Event!");

},

 Run the Application

Now let us run the application to see how it works. Simply right click on your application and run it as web app preview.

 

SAPUI5 Application with XML View

 

 

Click on “Test” button

SAPUI5 Application with XML View Button Event Handling

 

 

 

 

With this, you have just built your fist SAPUI5 application with XML Views and I am sure you’d love XML Views beause of its simplicity and ease of application building.