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.