SAP User Experience, Design, and Web Technologies

Responsive Design and SAP Development

 Do you know that year 2013 was called as the year of responsive web design? 

Responsive Design and SAP Development

Responsive Web Design a new design methodology that enables you to write application ONLY once and run on any platform. Responsive design methodology follows mobile first approach that makes design rendering consistent across all platforms. The reason I am writing about responsive design today is to let you know how heavily SAP is banking on new age UI-UX methodologies and how rapidly development paradigm is changing. You can no longer take the risk of being plain Webdynpro Java developer. If you haven’t given a thought to learning SAPUI5, HTML5, CSS3, and so on, you might just be digging your own grave.

Responsive Design in Brief

Responsive design is a methodology that reacts to screen size, resolution, form factor and so on. With that, responsive design changes the rendering that fits perfectly into the screen. For e.g. a responsive website reacts differently to requests generated from desktop browser and mobile browser. Responsive principles can also be extended to all application that are rendered as hybrid containers. Basically, browser based applications. Take SAPUI5 for example. In SAPUI5 application, your INDEX HTML is the file that renders application. Once you have access to HTML DOM, you can always design your application to be responsive. Not only content, but also images react to screen sizes. This significantly enhances user experience and provides seamless integration.

From Transaction to Application

SAP has largely been transnational system thus far. However, SAP is already planning its move to become Application based system leaving behind the old transaction based system. That said, you no longer need different SAP transactions to carry out certain activities or tasks. All major transactions such as leave request, invoice creation, and so on can be moved to application with SAP FIori and SAPUI5. SAP is also promoting create once, run anywhere approach and SAP Portal Mobile edition is exactly what I am saying. SAP Portal Mobile edition is an add-on that allows role based, multi-channel content integration that can be rendered consistently on desktop or mobile device. That said, it is high time that you start learning basics of responsive design which is going to be core of all future SAP Fiori and UI5 applications.

Responsive Design in SAPUI5

SAPUI5 framework comes with responsive layouts namely: ResponsiveLayout, ResponsiveGridLayout, and ResponsiveFlowLayout. Layoutdata of each of the layouts allows you to define certain properties that can be used to make your application responsive. For e.g. width is a property associated with layoutdata of these responsive layouts. You can define an integer value for width that controls the rendering of specific UI element when screen size changes. For e.g. If you assign width = 2 for Input Element, and width = 1 for text view, then when screen size is enlarged, it is the Input Element that will be given preference to get enlarged so that it can fit the screen size.

Getting into technical details of these layouts isn’t what I want to do here in this post. I will write a separate post on understanding SAPUI5 responsive layouts. However, what I intend to achieve with this post is make you aware of the changes happening in SAP UI development methodology. You can no longer rely on vanilla WDJ development. Start learning before it’s too late.

 Checkout following categories to learn more – SAPUI5, SAP Fiori, SAP Mobile, and SAP Usability 

(7) Comments

  1. This is true fact that WD java will be no longer in picture in couple of years !!.. Learning Ui5 is becoming must for Portal developer to survive in SAP portal market.

    Eye opening post !!.. Keep writing :)

  2. Hey Ameya,

    Great post. Like your approach and willingness to share knowledge. I wonder how difficult it would be to adopt to so many diffrent changes.


    • Hi Malinda,

      Thanks for your kind words. I am sure Sweetlets must also be investing heavily in responsive app design as Sweetlets is already into application development for SAP Portal.

      Best Regards,

  3. Hello,

    nice to see you took the time to write a blog post on this topic.

    However, I do not agree with the definition of responsive design indicated here: just assigning different weights as preference value for resizing is not much more than giving percentage widths, and hence far away from the full meaning of responsive design.
    Instead, important factors are re-arranging or hiding elements, replacing them by more compact versions etc. as the screen size changes.

    SAPUI5 does support these much more elaborate features in many places. Not only in controls that have the word “responsive” in their name. E.g. the SplitApp control displays a master and a detail page on larger screens, but only one of them on phones (and it provides the appropriate behavior so users can still use it). Another example is the sap.m.Table control where table cells can either jump into a special area called “popin” under each row or be hidden completely once the size of the screen shrinks below a certain threshold which does not allow to display all columns.

    There are many more examples of responsiveness in UI5, but I just wanted to make clear that responsive design in UI5 is by far not limited to what is described in this blog.

    Thanks nevertheless for putting attention on this topic.


    • Hi Akudev,

      First of all, thank you for the elaborated comment. I completely agree that there is a lot more to responsive design in context of UI5, but, this post is a beginner’s level post which is meant for developers who have never got a chance to learn anything about responsive design. Also, the width & weight attributes that I mentioned here, are just to introduce the topic. As you might have got from the title of the post, I never intended to cover exhaustive responsive design controls in this post. A lot of developers are not even aware of what responsive design is all about. If I immediately start writing on responsive design in UI5 with advanced level controls, then readers might find it too technical. All I intend to do is create a bit of awareness and conclude with novice level controls and attributes.

      Nevertheless, thanks a lot for taking time to elaborate the context in more detailed manner.

      Best Regards,

  4. Another concept of RWD is the fluid proportion-based grids. This have SAP made available out-of-the-box with the layout component ResponsiveFlowLayout, you have also mentioned it. Fluid proportion-based grids are layout grids that deform depending on the users browser size.

Leave a Reply

Your email address will not be published. Required fields are marked *