Skip to Content
Author's profile photo Pete Lagana

WebDynpro UIs – Usable?

Being an interactive shop means being involved in lots of projects where the user experience is “the”critical component towards achieving success.  So, we’ve had our fair share of questions like “Can we make the UI look like this?” Or “Why does it look like that?”

 

And on SAP projects, those questions come up a lot.

 

 When working with software that lots and lots of people use, those questions typically turn into statements such as “It needs to look like this” or “It needs to look like that”.

 

Today, more than ever, companies depend on their digital solutions to drive their business, so getting the user experience right is mandatory towards hitting the mark with the user base, internal or external.

 

And that’s no different for SAP projects.

 

So – where does SAP WebDynpro fit into the UX picture?  How does it stack up as a UI technology? 

 

Anybody who’s anybody who’s ever been involved in an SAP project has been exposed to WebDynpro to some degree, one way or the other.  Web Dynpro is the default UI technology for SAP custom development projects and its also becoming used more for some of SAP’s packaged software.

 

But, having been involved now in a number of SAP projects where a key goal is creating a great user experience, it’s been somewhat challenging when working with WebDynpro.  Designing great user experiences for SAP WebDynpro based projects is such an interesting phenomenon namely because constraints rule the roost and function dominates form.

 

But that needs to change.

 

Form should be just as important as function. 

 

WebDynpro seems to value speed in UI creation – evident when an ABAP developer creates a WebDynpro screen with some drag and drop UI elements on them after spending hours and hours writing the ABAP for the back end business logic, to process the data into the screen.  This is what typically happens, and I believe the scenario that SAP wanted to hit when designing the WebDynpro product as a UI technology – create less emphasis on the UI and more emphasis on the backend logic development.  Then let “styles” sort the rest out.

 

There are a couple problems I see with this.

 

 

One – that theory in the face of today’s users expectations finds itself flawed.  Users in today’s digital world have increasingly high expectations when it comes to how they interact and do business online; see Amazon, Google, and the iPhone.

 

 

But secondly, the person who codes the backend in this scenario is the same person who creates the user experience.  It’s the same person.  The.  Same.  Person.  That’s like my dermatologist prescribing a medication for my heart.  My dermatologist is a doctor too – and I’m sure he’s a good one.  But does he have the skillset necessary to be a good cardiologist?  The skillset required to design and develop the user experience is quite different from the skillset required to build the backend business logic.  It’s like night and day.  So, I can understand the speed in delivering screens like this, but ultimately users don’t care how long it takes to build a screen, only if it’s really easy to use and looks great.

 

Some will say that you can modify the UI – and this is true.  But it’s not straightforward.  The issue is dealing with the numerous style sheets that dictate the look and feel of WebDynpro.  These stylesheets are both Portal and WebDynpro related, so you’ll have to negotiate both, if your porting your WDA apps into EP.  The CSS is nested and deep, and care must be taken to align.  I have the perfect example for you.  Buttons.  Good old buttons.  The most classic UI element in the entire web.  In WebDynpro out of the box, all buttons are square.  So, what if you wanted to make them round?  Sounds pretty simple right? Not so much. The way that “buttons” are laid out in the CSS, they are really sliding cells or containers, meant to grow as the text or label of the button grows.  So, it makes it difficult to close the edges to be round.  So, what should be really straight forward, is quite the opposite for such a simple concept.

 

The good news is that when the right skill set is applied, you can make WebDynpro UIs look great.  Much of this depends on a lot of CSS massaging and granted, this is not something that “just happens” out of the box.  But the right know-how and experience can turn rigid and square into pleasing and round.  In the end WebDynpro can be what you want it to be.  We’ve had clients look twice and ask us “is this really SAP?”. 

 

Here are a few before and after examples comparing the familiar out of the box WDA UI to one that has been customized.

 

WebDynpro Out of the Box

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Custom Styled WebDynpro

 

So when I ask is WebDynpro usable?  The answer is yes. Yes it is – if you first determine that creating a great user experience is important to you and your company, and that accepting “out of the box” is not the answer. 

 

That starts with the following:

 

– Augment the development team with UI Designers and UX Developers.  This separation of duties pays off in spades.

 

-Create a process for UI design and development, and create a style guide that can dictate the layout and design patterns that developers adhere to.

 

Looking into the future, we’d like to share our WebDynpro experiences and pointers with SAP and ultimately work in some really critical UX flexibility points into the WebDynpro product.  We’ve worked with it so much over the years that we know the things in detail which, if redesigned, would bring more smiling faces to WebDynpro users everywhere.  Now WDA and Floor Plan Manager bridge the gap only so much.  There is so much more that can be done with WebDynpro – it really is a powerful product that can do a lot from a functionality or process perspective.  But the magic will really happen once the power of the front end finally matches the power of the back end.

 

 

That’s what today’s digital users want, and that’s what they should get.

Assigned Tags

      19 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member
      ...the practical approach of your considerations and the visual comparison before & after.

      Maybe SAP can take this up and offer at least easier adaptions to the standard layout for WebDynPro ... or even rework the standard UI of their components.

      Author's profile photo Robin van het Hof
      Robin van het Hof
      I'm very glad you wrote this blog.

      I do get quite a lot of complaints about UI design with WebDynpro, saying 'what I want to achieve is impossible'

      As an SAP NetWeaver/Portal consultant/evangelist, I constantly strive to convince my clients otherwise, telling 'no, it is *definately* possible but it will take a considerable amount of extra effort' and showing examples of what *can* be achieved with additional effort.

      I fully agree SAP could make UI design way more straightforward, but on the other hand, the way I can tweak the styles by only using the Portal Theme Editor gives me ample UI styling possibilities, including creating rounded buttons -- I don't want to tough the stylesheets directly, since any subsequent changes in the theme editor would wipe my previous changes...

      Author's profile photo Former Member
      Former Member
      I totally agree with you. I think that best solution for SAP will be to replace Web(HTML+CSS+Javascript was never designed to develop (business) applications) dynpro ABAP by Silverlight dynpro ABAP. Look at new Silverlight 5 features... Current look and feel of SAP applications is very bad. If I show some SAP apps to my .NET friend they everytime asked my this ugly crap is really SAP?
      Author's profile photo Robin van het Hof
      Robin van het Hof
      I totally disagree. Silverlight was developed for creating rich internet apps with an emphasis on multimedia, graphics and animations -- definitely nothing a business application would benefit from... At least in the SAP realm, Flex would be a better option, don't you think?
      Author's profile photo Former Member
      Former Member
      Hi, silverlight was developed also for creating business applications too (see silverlight islands in web dynpro). And please check this links:

      http://labs.infragistics.com/silverlight/lobsamples/2010.3/#/Samples/Scenarios/CallIt/CallIt

      http://www.infragistics.com/dotnet/netadvantage/silverlight/line-of-business.aspx#Overview

      http://www.telerik.com/products/silverlight.aspx

      http://demos.telerik.com/silverlight/

      I think silverlight (with power of .NET framework and Visual studio) is ideal for building business applications. I hope SAP see this too.

      Author's profile photo Martin Voros
      Martin Voros
      Silverlight is not multi-platform (Mono is far behind) so I can't imagine what would SAP say to customers with non-windows machines.

      In my opinion using open standards such as HTML5 is only way to go. SAP used to be too closed but it's getting better.

      Cheers

      Author's profile photo Former Member
      Former Member
      But HTML 5 is still draft only and when will be HTML5 standardized? 2020? And with HTLM5 you still have to use css, javascript...still the same mess as today. You can run Silverlight on Windows and Mac, on Linux with Mono (they are not so far behind 🙂 )
      Author's profile photo Robin van het Hof
      Robin van het Hof
      And how is Silverlight standardized then? 😉

      Are you really serious about Silverlight being a valid option for a standardized SAP user interface?

      Author's profile photo Former Member
      Former Member
      Good question 🙂 Silverlight is standardized by M$ implementation.

      I'm not sure about silverlight (or flex maybe), but what are better options? HTML+CSS+javascript is the worst solution. HTML was never designed to run business applications as we need today. Also it is very hard for developers to create real business apps in HTML. I think that C#, .NET framework, visual studio are good arguments to start THINK about silverlight as a UI technology.

      Author's profile photo Martin Voros
      Martin Voros
      it's not standard yet but you can already use it. For example google.com and apple.com are written in HTML 5.

      On how many mobile devices you can run Silverlight? Even Microsoft said that HTML5 is only cross-platform solution. You can't pick one proprietary technology. You need to use something open which can be accessible on as many platforms/devices as possible. Currently, we have only HTML. And honestly, almost everything has web browser right now - from PC to fridge. If somebody wants to use something else (e.g. Silverlight or Flex ), then you should just expose API which can be easily used. I guess that's what SAP is trying to do with project gateway. Another good example is SAP IdM. The standard UI is/will be written in web dynpro and in newer releases they are planning to expose REST interfaces so you can easily develop your custom applications for mobile devices.

      Author's profile photo Former Member
      Former Member
      Yeah, you can use HTML5, but draft can be changed (standard will be prepared at 2020)... You can use silverlight on Windows phone phones today and there will be support for android devices too. Yes, you can use HTML on more devices, but it's a question, use better technology or more available technology? Should we stop using cars because we can use our legs on more places?
      Author's profile photo Graham Robinson
      Graham Robinson
      Hi Pete,

      this is an interesting blog and you raise some very valid points when it comes to building UIs - especially the one that developing backend business logic is a very different skill set to developing a modern UI.

      I have to take a bit of an issue with your example of using CSS to modify the UI of a WebDynpro application as I believe it might create a misleading impression on those reading this blog.

      Whilst you can use CSS stylesheets to modify the visual elements of a HTML page one of the design goals of WebDynpro was that is could be rendered by different rendering engines. For example, the NetWeaver Business Client has its' own rendering engine that uses MFC libraries to render the user interface.

      Cheers
      Graham Robbo

      Author's profile photo Simon Kemp
      Simon Kemp
      Hi Pete... another great blog post, thanks for sharing your insight. Great to see the side-by-side comparison of standard WD vs. customized CSS version... I wish SAP would make better tools for modifying the design - the theme editor available in the portal is rubbish in my opinion. Have you tried to use the offline theme editor in eclipse for Web Dynpros? Perhaps that offers a better experience, but honestly trying to use the online theme editor tool via the portal has nearly driven me insane!! 🙂

      Regarding Graham's point about rendering on multiple clients/devices... I agree to some degree but haven't we heard about the promise of Web Dynpro rendering on multiple devices (e.g. mobile devices) for way too long now... IMHO that pipe-dream has never materialised into anything useful.

      If the SAP strategy is to "free their screens" from SAPGUI then I think the right way to go is to open it up, give people the tools and ability to be creative and I think we will all benefit from a better UX in the long run. Let's hope that project Gateway and Phoenix go a long way to addressing these issues.

      Thanks.

      Author's profile photo Former Member
      Former Member
      So because I develop standard ABAP - old dynpro - I do not have the skill to develop Webdynpro?

      I would have to disagree.  I use all of those websites, google, ebay, amazon.  My users are smart enough to ask for what they want. 

      Defensive much?  Yes, I'm defensive.  I'd like to think we could all expand our skill sets.

      However, you do raise interesting points.  Developing in Webdynpro does not always give a good end user experience.

      Michelle

      Author's profile photo Kenneth Moore
      Kenneth Moore
      Would be nice to have more power to make the WebDynpro look as nice as your example.

      However, I don't agree about the business logic developer not having the skill set to develop the GUI.  This skill is part of a good university degree at a good university offering a degree in Computer Information Systems or the like.  Many "developers" you find don't have a university degree in programming.  This is why recruiters/managers should be more stringent in their hiring process.

      I would assert the opposite is true.  GUI developers might not have the skill set to developer business logic.

      I also agree that not all developers are great GUI developers. 

      Author's profile photo Raj Govender
      Raj Govender
      Wow, love the way you customised the look of WD screen! Brought some life back into it:-) I say, let the customer dictate the UI experience not SAP. CSS/JS/HTML are not difficult skills to learn, don't need a CS degree for that. 
      Author's profile photo Phani Rajesh Mullapudi
      Phani Rajesh Mullapudi
      Users would definitely like to have screens as shown in 2nd screen shot.
      The Aquare/Box looking WDA currently is like using win95 when users are on Xp/Vista/7.
      Smooth edges are a must & if all this can still be achieved within ABAP only...
      Then, we can bypass user requests to go with dual approach of developing apps/part of UI in adobe Flex & integrating it with WDA.
      Author's profile photo Former Member
      Former Member
      I'm wondering how much effort is needed to maintain such beautiful UI when upgrade.
      Author's profile photo Pete Lagana
      Pete Lagana
      Blog Post Author
      Hi Julius. Thanks for commentin on my blog. To answer your question - yes it's upgradable. You have to ensure you keep in line with the class names that you've modified and even the new classes you've created to create the user experience you want. As long as you stay within the given style sheets you shoul be fine. Thanks and if you have any other questions just let me know - glad to help!  Pete