Skip to end of metadata
Go to start of metadata

SAP Screen Personas

Responsive Design with SAP Screen Personas

SAP SCREEN PERSONAS KNOWLEDGE BASE - by Tobias Queck (transfer to KB by Sebastian Steinhauer)


This article describes how you can create a responsive design leveraging the on-board features of SAP Screen Personas 3.0


You can leverage the ability of SAP Screen Personas to switch flavors based on available screen size to accomplish responsive design. However screens remain unsupported on most mobile devices.

What is responsive Design?

The responsive design approach seeks to provide a great user experience, regardless of how a person is consuming the software. It became popular when people started consuming web applications across devices; they wanted comparable functionality whether using the software on a phone, tablet, or desktop computer.SAP has embraced responsive design, including rolling out its own HTML5 libraries, and building products that incorporate responsive design. SAP’s best-known responsive interface is SAP Fiori.

It is important to note that depending on client device different interaction patterns, and different options are made available to the user. For example on a mobile phone QR Code scanning is an option, while on a desktop device it is not. Similarly file upload and download are not commonly used on mobile devices but frequently used on desktops.

How does SAP Screen Personas help with responsive design?

Your existing transaction can already have responsive elements like the tab strip or table in the display sales order transaction (VA03). When personalizing such a screen, you always need to be aware that your personalization can deactivate the existing responsive design. For example, by defining a fixed size for the tab strip. Or, your personalization might conflict with the responsiveness of the backend.

SAP Screen Personas offers a variety of options to adapt your application or screen to make you more productive. Each different version of a screen can be saved as a flavor, and, as an end-user you are able to manually switch between the flavors as you need. So, you as a user could decide that when you have a big screen, you prefer to use one flavor and when you have a small screen, you use another one.

In addition, SAP Screen Personas 3.0 has a quite powerful scripting engine which is intended to automate steps that you would usually do manually. So, you could automate the steps of switching the flavor based on the screen size which would lead to a responsive personalized application.

How to build a responsive flavor?

SAP Screen Personas fundamentally is based on the idea of automating the steps a user does. So let’s think about the steps, you as a user would do when you get to a screen or when the size of your screen (browser window) change

  1. Check your screen size
  2. Decide which flavor is the best fit
  3. Switch to the flavor if it is not already used

This is easily codified using the SAP Screen Personas scripting APIs

// 1. Check your screen size  
var screenSize, flavor;  
screenSize = session.findById("wnd[0]").width;  
// 2.Decide which flavor is the best fits  
if (screenSize < 900) {  
    flavor = 'FLAVOR_ID_1';  
} else if(screenSize > 1400) {   
    flavor = 'FLAVOR_ID_2';  
} else {  
    flavor = 'FLAVOR_ID_3';  
// 3. Switch to the flavor if it is not already used  
if (flavor != {  

Next, you need to make sure that this script is executed whenever your screen has changed. To do so, you can use the SAP Screen Personas Flavor Editor and bind the scripts to the corresponding screen events in all flavors you want to make responsive.

Note: With SP02, we introduced an onResize event that is only fired if a resizing of the screen happens, so you can keep your script separate from any other business logic that is to be executed on refresh events.

Related Content

Related Search Terms:

SAP Screen Personas, Responsive Design, RWD

Related SAP Notes/KBAs