SAPUI5 for Browsers: An in-depth look at building HTML5 applications

[Former Member]

To continue on in the series "How to pick the right user interface", today we are going to look at SAPUI5 and in particular, how to use it to build Applications that run on your Internet Browser.　 If you missed the first part you can view it here:  "Part 1: "How to select the Right User Interface".

Before we get to the technical aspects let’s look at why SAPUI5 is awesome.  UI5 is a collection of libraries that you can use to write vibrant, modern and beautiful web pages.　 It uses the latest and greatest technologies including HTML5 and CSS3. 　There is a lot of buzz around this in the SAP development community and there are plenty of resources out there to learn it(keep reading to get the links).

First, let’s look at the use case scenario to determine whether SAPUI5 is the right solution for your project:

•     What type of user is going to be using this? Is it a person well versed and experienced in  SAP or is it someone who demands a casual look and feel?

UI5 is definitely geared towards the casual user, it is meant for someone who wants to open their browser and have a user friendly, intuitive experience without a lot of configuration or training needed.

A real-world example: SAP is currently working on the new UI5 SRM add-on(currently in ramp-up).  My customer is going to implement this when it is released to give users an option.  The UI5 version has a Shopping Cart version that is similar in look and feel of Amazon.  This will be geared towards the users who are not familiar with the typical SRM Shopping cart experience.

•    What device will be used to access the application?  Desktop, Internet Browser or Mobile? Many of our technologies are geared towards one or two of these options.

UI5 works on web browsers AND mobile—stay tuned to the next blog post which will cover UI5 for mobile devices.

•    Does the solution meet all design requirements such as custom branding or themes?

Customer branding and theming possibilities in UI5 are endless.  The solution is fully customizable and unlike Web Dynpro the developer can easily change the look and feel of the pages.

•    How will the solution be maintained? Do my developers have the experience to support it, or will I need to get resources from the outside?

If you have developers that know web development(HTML, CSS, Javascript) you should be good to go.  Before I learned UI5 I had played around with JQuery and other libraries.  I found it pretty straight-forward to build UI5 applications—the API documentation helps too :smile:

•   Security and Authorization considerations, how will the user login?  Is this enough to meet my needs or are there additional products needed to support my requirements?

With UI5 this is largely dependent upon how you develop the application.  I’ve done this in two ways: 1) Build UI5 applications that are linked to the customer’s Portal environment—in this case we are in the Portal framework and standard security rules apply.  2) Encapsulate my UI5 application in a BSP, this utilizes standard SICF security settings

There is TONS of documentation out there on UI5 development and I’m not trying to redesign the wheel.  Below are some useful links that I have found in my learning journey. 

Download SAPUI5 and start developing—this site also has lots of learning materials:  Download SAPUI5 Toolkit

Useful overview with screenshots that show the capabilities: UI5 in Action

Awesome blog on building a CRUD app using JSON/Rest: Start Developing

The next post in the series will discuss UI5 for Mobility—stay tuned.

Learn more about how to leverage leading-edge innovation with Technology Services at sap.com

Stay in the conversation by following SAP Services on SCN.

Follow our news on Twitter @SAPServices.