Skip to Content
Author's profile photo Owen Pettiford

Need a New User Interface (UI) or User Experience (UX) instead of SAPGUI ? Read on to find out what you need to use (Part 1)

So you have decided that SAPGUI is not what your users need to be able to do their job in the most efficient way or increasingly you have new users who want to access your SAP data and business logic but SAPGUI isn’t the right answer.

The reasons for this are many and varied but some common issues would be :-

  • Too Complex : The SAPGUI screen has many fields (or describes fields in “strange ways”) and options the user doesn’t need to use.
  • Unsupported Device : The SAPGUI screen doesn’t work on your chosen device / browser (e.g tablet).
  • Missing Business Logic : The SAPGUI screen does not enforce business logic (rules) that your organisation needs which means garbage gets into your system.
  • Wrong Screen Flow :  The SAPGUI user interface/user experience* does not match the user interface/user experience* imagined/required by the user.

(* I don’t intend to discuss the difference between User Interface and User Experience – Wikipedia does a pretty good job of this and it might help with the rest of this blog if you read their definitions)

If you want to avoid development, you have a few choices :-

  • Review your implementation (including Enhancement Packages, Workflow Templates and Packaged Mobile Apps) to make sure you are not missing some standard functionality (including new WebDynpro ABAP screens) or workflows (to try to stop garbage getting in).
  • See if NetWeaver Business Client can help to create a more unified/role based user experience
  • See if SAPGUI for HTML and roles (perhaps with a help launch/landing page)  might do the trick.
  • Configure field labels to fit what the business call stuff (bit of a hack).
  • Train your users more.
  • ……… (probably others).

If the above don’t fix the issue, SAP have an increasing list of supported tools and techniques for fix the issue (and a number of older tools and techniques – which I will not be discussing) – but they all include some level of software development. If development doesn’t scare you (which it shouldn’t , which ones should you use and when ?

In this blog I am going to consider the following tools from SAP :

NOTE : For a real business use-case, a number of the above tools can be used together to achieve the best results. You should consider the right solution for each part of the problem – not look for a silver bullet. I think SAP are trying to provide a tool kit of solutions that can be used by different types of people and are suited for different use-cases – some very technical and some in the business analyst domain.

Below I have tried to summarise these for your convenience, with links for more detall. If you already know what they do, you can jump to part 2 where I recommend which to use.

User Interface Tools / Frameworks


SAP UI5

SAP UI5 is the Java Script library and development framework that SAP have just released  and will be a common set of libraries across ABAP, Java, HANA and Mobile. It is promoted as the user interface of choice if your use-case is for light-weight / stateless interactions with a backend system (like employee self service). The reason for this positioning is connected to issues like locking and transactionality (having to update more than one item for a transaction to make sense) – which are handled well by Dynpro (and WebDynpro) as sessions are stateful. So I think UI5 can also be used for highly transactional Uis but the developer has to think about how the handle the above issues (websites have been doing this for years). This is a tool for Java Script developers.

SAP WebDynpro ABAP

SAP Web Dynpro for ABAP (WDA) will be the successor of the traditional Dynpro (SAP GUI) screens and is promoted for highly transactional user interfaces (which need to consider locking and transactionality, if they are running on an ABAP system. With each Enhancement Package, more and more screens become available in WDA. Floorplan Manager has also been introduced which allows for pattern based development – which reduces the level of WDA skill required to create a WDA UI. One fly in the ointment here is SAP CRM where the web frontend is developed using SAP BSP technology (which has been extended and is referred to as CRM UI). The other fly is that the WebDynpro framework UI controls are not designed for tablets – SAP have fixed previous browser support shortfalls (shame this isn’t available to WebDynpro Java). This is a tool for ABAP developers.

SAP Personas

SAP Personas is a tool from SAP that allows for the personalisation of SAPGUI screens (or to be more precise SAPGUI for HTML). It is a Silverlight framework over the SAPGUI controls so the screen layout can be completely changed to provide an easy to use web experience (see example here). What you can’t do with Personas is fundamentally change the screen flow across transactions or the embedded business logic. You can hide tabs, skip screens within a transaction and pass data between transactions.

I find the choice of Silverlight as disappointing, I would have preferred HTML5 (or even better UI5). This tool is focused at SAP Business Analysts and can be used by developers.

Technology Platforms

SAP NetWeaver Gateway

SAP NetWeaver Gateway comes in two halves, the first half runs on the ABAP stack (deployed as an Add-on or standalone) and the second half is a bunch of consumption tools (iOS, ASP.NET, Android, Java, HTML5, PHP) that speed up UI development for non-SAP developers. The ABAP part lets you wrap up SAP functions and expose them as OData/Atom/JSON. Generally these services are designed round the user interface / experience requirements so the data model that the UI developer sees makes sense to them even if this doesn’t represent the physical way the data is stored in the SAP ABAP system (I know one example that combines data from 11 SAPGUI screens into one OData service). Once you have your OData/Atom service you can either consume these directly (UI5 has libraries that allow direct consumption of OData) or you can use the consumption tools to generate service proxies / applications in the language of your  choice. See this iOS demo. It should also be noted that usage of Gateway is included in your SAP User license – so any info that can be accessed by a user type via SAPGUI can be consumed via Gateway with no consumption charge. Specific licenses also exist for Gateway where a scenario extends usage of SAP to employees and people outside your organization (e.g B2C scenario). This tool is focused at ABAP developers for the backend and many different types of UI/UX developers.

DUET Enterprise

DUET Enterprise allows connectivity into Microsoft SharePoint and Microsoft office tools. It uses NetWeaver Gateway for connectivity to SAP, allowing direct publication into the SharePoint Business Data Catalog (BDC). It also provides system management tools that allow for end to end monitoring and syndication for roles between SAP and SharePoint. This tool is focused at Microsoft SharePoint developers and ABAP developers (for the Gateway backend part).

Sybase Unwired Platform / Afaria and Syclo

Sybase Unwired Platform / Afaria and Syclo are tools that have been purchased by SAP to boost their offering for the development of mobile apps. I don’t intend to cover the features of each solution in depth in this blog, but if Mobility is a key focus for the user interface / user experience you should look into these platforms. Features they offer that play to the mobile space include, staging / syncing / syndication of data (from SAP and non-SAP), device security / app management (especially at scale), device independent app development and device specific proxy generation. In November UI5 will be released for usage in the Sybase Hybrid Web Container so UI5 can be used for mobile development. This tool is focused at mobile developers.

SAP NetWeaver Process Orchestration


SAP NetWeaver Process Orchestration is the platform from SAP that now incorporates SAP BPM and SAP PI. The BPM component can be used to create workflows that allow for the distributed collection of data and the approval of this data before it is updated in any backend system (including SAP ABAP systems). Historically User Interfaces have been created using WebDynpro (Java or ABAP), but HTML5 is increasingly being used with full support for UI5 coming in October (with auto generation from a process data context early next year). This tool is focused at Java developers.

SAP NetWeaver Cloud


SAP NetWeaver Cloud is a Java Platform as a service cloud solution that offers a standards based Java development environment plus some “services” that make development faster. These include Portal, Documents, Persistence, Identify (which can link to your on premise identity) and a cloud connector that allows connection to your on premise systems via secure URLs. SAP NetWeaver Cloud supports SAP UI5 as a front end tools, as well as any other Java UI framework (e.g Spring) or Java script (e.g Angular). You can see an example app here. This tool is focused at Java developers or developers that use languages that have a Java runtime (e.g Ruby). It is possible that other run-times will be offered in the future (e.g Node.js).

HANA as an Application Platform

It is easy to think of HANA as a database (all be it a very fast in-memory one), but HANA also now has application development capabilities built into the platform in the form of the XS java Script Engine. This means you can develop apps right on top of HANA, and UI5 comes to HANA in November. This tool is focused at Java Script developers and database experts.

In part 2 of this blog series I discuss which tools could be used for different use-case.

In part 3 of this blog series I discuss how you might build the business case for making this UI/UX renovation.

Assigned Tags

      25 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Hendrik Brandes
      Hendrik Brandes

      Hello Owen,

      thank you for writing down those options. Through some projects, I know how hard it is, to bring a suitable UI to the users and that there is stil somebody who is not satisfied;-)

      One thing, I missed in your list was SAP Floorplan Manager. Even if this tool is built upon WD4A, I think it should be named, because you can build your own WD4A-Applications without having WD4A-knowledge ( in most cases, of course it is better to know, what you are running 😉 ).

      Kind regards,

      Hendrik

      Author's profile photo Owen Pettiford
      Owen Pettiford
      Blog Post Author

      You are right, I have added it and included a link.

      Author's profile photo Former Member
      Former Member

      Hi Owen! Thank you for helpful information!

      Whether correctly I understand you, that I can install and use SAP NetWeaver Gateway for HR Renewal scenario without licence cost? (as UI is for already licensed professional SAP users).

      Thanks!

      Author's profile photo Owen Pettiford
      Owen Pettiford
      Blog Post Author

      You are correct

      Author's profile photo Ella Morgulis
      Ella Morgulis

      Hi Owen,

      There is one more technology platform that solves the UI and UX problem for those SAP customers who also happen to be Microsoft customers - it is the Duet Enterprise platform developed jointly by Microsoft and SAP and built on top of SAP NetWeaver Gateway.  You can find out more about it here: http://scn.sap.com/community/duet-enterprise, but in a nutshell it provides an opportunity to give business users access to SAP backend directly from Microsoft SharePoint and Outlook.  These users can conduct their business in familiar Microsoft environment and never realize that they access and modify data in the SAP ERP suite!

      Author's profile photo Owen Pettiford
      Owen Pettiford
      Blog Post Author

      Thanks, added it

      Author's profile photo Former Member
      Former Member

      Hi Owen!

      Good explanation and opinion about this options in the 2 articles.

      Do you believe the html5 is the future of SAP's user's interface?

      Regards

      Author's profile photo Former Member
      Former Member

      Hi Owen,

      for internal communication within my company I have started to build a similar list just to demonstrate the complexity of SAP solution offerings.

      As an internal "technical" custodian in my company if I was SAP my first reaction will be to rationalize this portfolio.

      On top of my head (as I am waiting my plane) I will add few more solutions :

      + SAP Interactive Form by Adobe (I believe there is also something new in HCM to replace this feature)

      + 3rd Party product like Synactive GUIXT, Winshuttle

      + Side Panel

      + Enterprise Portal

      + Visualisation

      For me it is still very confusing.

      I thought I had understood the SAP strategic direction but new solutions are added which may prevent the adoption of strategic solutions by customers.

      One of the criteria of a Good User Experience is "Consistency" ... so we could end up that one user may use a little of WDA-NWBC, a little of Personas and so on ....

      Maybe this blog will help SAP to realize something : the explanation focus should be more on the business added value that the technology toolkit.

      Author's profile photo Former Member
      Former Member

      Hello,

      Thank you for the blog. However let me correct one thing in it:

      The other fly is that the WebDynpro framework UI controls don't work on "modern" browser (iPad, Chrome etc) - SAP are working hard to fix this shortfall.

      Firefox, Chrome and Safari are already working well and supported from 7.02 SP12. iOS Safari however is painfully missing from the supported browsers. It renders very well already on iPad, but few UI elements eg dropdown and table scrollbar do not work properly. I hope they will fix it soon, it should be very limited effort to correct the JavaScripts for WDA.

      Author's profile photo Owen Pettiford
      Owen Pettiford
      Blog Post Author

      I have had problems with chrome and WDA, but I guess they are fixed now.

      I will amend the blog to say that WDA controls are not "tablet friendly"

      Author's profile photo Former Member
      Former Member

      Hello,

      Thank you for taking my remark into account. Maybe my comment was not clear, but WDA renders and work very well on iPad except few UI elements. Thanks for correcting (and feel free to copy lines of my comments 🙂

      Kr,

      Tamas

      Author's profile photo Owen Pettiford
      Owen Pettiford
      Blog Post Author

      Tamas,

      I take your point, but WDA controls were not designed to work on a touch screen, so I would not recommend this approach for a good user experience.

      Owen

      Author's profile photo Former Member
      Former Member

      Hello Owen,

      Indeed WDA is not designed for touch screen, however this argument is true for 99.9% of all the websites, still all of us are browsing web on tablet 🙂

      Cheers,

      Tamas

      Author's profile photo Former Member
      Former Member

      Personal point of view :

      + there is non 1 to 1 relationship between "Touch Screen" and "Good User Experience"

      + I do not like the word 'Friendly' .... maybe it is because I am not a native english speaker. When my customer is using the word "User Friendly" as a requirement I tell them that I do not understand.

      A recent french politician has sent an official later to B. Obama with the word "Friendly" before his signature ( 😆 )

      Author's profile photo Chris Paine
      Chris Paine

      Hi Owen,

      I'm interested in your comment about Personas:

      I find the choice of Silverlight as disappointing, I would have preferred HTML5 (or even better UI5)

      Much as I agree and just can't understand how anyone is still working with Silverlight, why would you want UI5 involved in the mix?

      Seems to me UI5 is just a ECMAScript lib for providing some (IMO) rather plain UI elements, along with libs for parsing OData. Why would you want to base a completely free form user driven layout on that? To me SAP is just re-inventing the wheel here and going where others have already - e.g. jQueryUI. I would like to understand why you like UI5 so much! 🙂

      My biggest problem with Personas is that it only runs on HTML GUI - would be really nice if it were possible to do the same thing with WDA too!

      Cheers,

      Chris

      Author's profile photo Owen Pettiford
      Owen Pettiford
      Blog Post Author

      Chris,

      My main reason for liking SAP UI5, is my personal preference to use a tool from SAP as I feel that this gives me better support in the long time. You can use JQuery controls in the UI5 framework if you prefer their controls.

      Ideally I would like to see SAP UI5 (or generic HTML5) supported across all the UI tools so we can create one unified experience for the user.

      my next blog will be about why you might want to renovate the UI in the first place - from a business case perspective.

      Owen

      Author's profile photo Andreas Kunz
      Andreas Kunz

      Disclaimer: being involved with UI5 development, I am probably biased 🙂

      Hi Chris,

       

      I do fully agree that UI5 is a JavaScript library providing UI elements, putting an emphasis on OData consumption and data binding. It does currently not aim to be a full framework like Web Dynpro.

      One might argue whether the Shell (UI5 1.8: new notification area, layout flavors), the ExAct Pattern, the Table (created from an OData service in a dozen lines of code, paging, sorting, and filtering support included) and the two new charting libraries fall into the category "rather plain".

      And whether "some UI elements" properly represents the number of about 120 UI controls in UI5 1.8 (excluding the charts).

      Regarding "re-inventing the wheel", however, I would like to point out that it has been a key objective (and pride) of UI5 from the very beginning NOT to do this mistake.

      UI5 is using Open Source libraries wherever suitable ones were identified: jQuery is the base of UI5, datajs is used for OData access, d3 for the "sap.viz" chart library, swipeview, iScroll, the event handling of jQuery Mobile, and soon also mobiscroll for the new mobile library, LESS for CSS processing, Maven and Jenkins as build infrastructure, qunit and Selenium for automated tests,... I could go on like this quite a while.

      So I think a lot of existing stuff has been re-used instead of re-invented.

      With jQueryUI you spotted more or less the only thing which has NOT been fully embraced by UI5, for a number of reasons. But as Owen pointed out, it can still be used with UI5 and actually UI5 DOES use parts of jQueryUI (e.g. the DatePicker and the Position plug-in).

      However, given the fact that jQueryUI offered only eight UI elements three years ago and in these three years has only added three more UI elements to its portfolio (which is also on the rather plain side, actually, like the new Tooltip and Spinner), I would not say that UI5 has missed a lot of re-use potential here.

       

      I hope I was able to give some food for positive thoughts about UI5. 🙂

       

      Best regards

      Andreas

      Author's profile photo Chris Paine
      Chris Paine

      Hi Andreas,

      an excellent response! Thank you for taking the time!

      Perhaps "plain" wasn't the best choice of words! 😉

      And certainly "some" doesn't do justice to 120 ui elements!

      However, I wonder,is not embedding source from other open source libs mean that taking advantage of their future developments becomes harder? Why gather all those components up into one lib rather than letting developers just go get those open source components themselves? As far as JQueryUI not developing, I'd have to agree, but what is developing this the list of custom components that other have built that are compatible with the steamroller theming, making very custom looking web experiences possible. The last thing I want to do if I'm looking for a "beautiful user experience" is know immediately when I've loaded a UI5 site just by glancing at it. but perhaps from the enterprise "familiar is easier to train" standpoint that we've preached all these years over Web Dynpro this is a good idea! (I think not, but feel free to disagree, I'm certain there are arguments both ways.)

      Its great to learn a little about the history and the make up of UI5 - I'm sure you've put some blogs together that explain in a bit more detail about what it is technically composed of and how it has been built to be testable etc. Could you point me in their direction, I'd be very interested.

      Thanks again for your great followup comment!

      Cheers,

      Chris

      Author's profile photo Andreas Kunz
      Andreas Kunz

      Hi Chris,

      thanks a lot for your thoughts and feedback!

      The Open Source libraries included with SAPUI5 are updated whenever significant new releases are done, so we do take advantage of their future development. And developers using SAPUI5 get these updates for free by just updating SAPUI5. We think it can make developers' life easier when they can rely on some important libraries being always available in a current version.

      Nevertheless developers using SAPUI5 can still include any JS library of their choice. Note that the libraries that are shipped with SAPUI5 are not merged with the UI5 code but they are still the original standalone files, so they could just be exchanged/updated independently.

      jQuery itself is an exception (it is merged into sap-ui-core.js) because the Core of UI5 relies so heavily on it. But even for that one there is also a variant of the UI5 bootstrap file which comes without jQuery (sap-ui-core-nojQuery.js), so applications can load their own copy of jQuery before loading UI5.
      Note that UI5 is being tested for compatibility with different versions of jQuery.

      Regarding custom jQuery UI components: they are certainly a great offering provided by a vivid community, and UI5-based applications are welcome to use suitable ones.
      However, they are not so well-suited to be *integrated* with SAPUI5 because they are, frankly, a very fragmented zoo that is hard to bring under one library umbrella. This option was certainly considered, but:

      • their licenses may be different and may be incompatible with UI5 (e.g. we unfortunately cannot include GPL-licensed components)
      • their development lifecycle and maintenance reliability does vary
      • their quality and support for product standards required from SAPUI5 controls (like ARIA/accessibility) may be insufficient
      • there is no consistent UI design and user interaction design (e.g. keyboard usage paradigms for list-like controls)
      • their API is not consistent (it is even hard to keep the UI5 controls consistent...)
      • their compatibility guarantees between versions may be very different, but UI5 needs to provide reliable, stable APIs
      • ...

      Contributing to them would not solve all issues (e.g. why should they change the API or user interaction just to make it fit the SAP guidelines) and forking them also would lead to a decoupling from their future development, so UI5 would not gain much.

      I absolutely agree with you about visual appearance!
      Enterprise UIs do need to provide some consistency, but even if they look good, they will quickly get boring. REAL, surprising, compelling beauty comes in most cases from visual adaptation, from changing colors, adding background images etc.

      The jQuery UI ThemeRoller which you mentioned is very cool but also a quite limited, the options are hardcoded in the tool - and it is not Open Source.
      The good news is that for SAPUI5 a quite similar tool will be provided (based on LESS - hey, Open Source again! :-)). Keep your eyes open for the term "Theme Designer"! 😉  The usability is as good and quite some things are even better than in the ThemeRoller. There are already rumors about it...
      And of course developers using SAPUI5 are free to adapt the CSS in any way to change the styling of UI5 apps (which you can not do in Web Dynpro). So feel free to build beautiful apps instead of consistent ones!

      Regarding UI5 blogs... When working for a big company it is always difficult to tell what to publish and where - without violating certain legal requirements.
      And given the success of UI5 within SAP and the resulting workload, UI5 developers also have to be careful with public exposure because they could easily be overwhelmed by questions they would love to answer but just cannot because a day just has 24 hours. This means that at the moment public information is rather limited to the blogs around the SDN HTML5 Developer Center and the content of the SAPUI5 Demokit (https://sapui5.netweaver.ondemand.com/sdk, soon to be updated to 1.8.4).

      Unfortunately I also have to stop here and limit myself in future replies, for exactly the same reason - UI5 development needs me again. 😉

      Regards
      Andreas

      Author's profile photo Chris Paine
      Chris Paine

      Andreas - thank you! Keep doing the good work and I really look forward to the theming stuff coming out!

      Author's profile photo Former Member
      Former Member

      Andreas,

      Thank you so much for taking the time out of a buzy scehdule to share these thoughts with us. Really helps to get a better understanding on your guiding principles.

      Regards

      Dagfinn

      Author's profile photo Former Member
      Former Member

      Hi Owen!

      Do you have any documentation you can share that confirms your statement, "it should also be noted that usage of Gateway is included in your SAP User license – so any info that can be accessed by a user type via SAPGUI can be consumed via Gateway with no consumption charge." ?

      BR,

      Yaseen

      Author's profile photo Chris Paine
      Chris Paine

      Hi Yaseen,

      I believe the official response is "speak to your account manager". But I too have heard what Owen claims repeated many times now in official SAP presentations. I think it's true 🙂

      I'd even go so far as to suggest that it's not just SAP GUI users, but allow ESS and MSS users too - as long as they are a named user in the system, they'll be covered.

      I'm looking forward to a flood of ESS Gateway based mobile apps in the SAP store shortly - or being flogged to you by your local friendly SI 😉

      Cheers,

      Chris

      Author's profile photo DJ Adams
      DJ Adams

      Yes, this was definitely the message that was being underlined at SAP TechEd in Madrid this year.

      The call metering is now restricted to anonymous usage.

      dj    

      Author's profile photo Andy Silvey
      Andy Silvey

      Hi Owen,

      this blog and Part 2 provide and excellent overview and decision process.

      Why are Portal and Portal On Device and Portal Business Packages missing ?

      All the best,

      Andy.