Recently, several customers and colleagues asked me about whether SAP Screen Personas has “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 , and building products that incorporate responsive design. SAP’s best-known responsive interface is SAP Fiori.
![fiori.png]()
Fiori separates the application logic from the user interface. The SAP business applications run and the Fiori applications access the data they need through a data services layer. This means you as the developer (or SAP) can write a modern web application that accesses the data and then provides a responsive modern design.
Of course, with SAP Screen Personas 3.0, we also embrace the responsive design approach. In contrast to Fiori, SAP Screen Personas is built into the foundation (kernel) and allows personalizing existing business transactions built in ABAP using the Dynpro framework. This is important to keep in mind because you have to build your design based on the existing, maybe even responsive, design of the transaction.
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.
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
- Check your screen size
- Decide which flavor is the best fit
- Switch to the flavor if it is not already used
In Personas scripting this would translate to:
// 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 != session.info.flavorId) { session.utils.changeFlavor(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.
![screen_eventhandler.png]()
Finally, you have to choose your default flavor, the one that you assume to be opened most of the time, and, voila, you are done, you have applied the responsive design paradigm on a classic SAP transaction.
If you want to see an example, please watch the video below. It shows how to make the SAP Screen Personas 3.0 Admin transaction more responsive.
I cannot finish the post without also mentioning the possibility to make your screens more static. So, if you do not like the resizing of screen elements based on your screen size, maybe you don't even like that the screen changes its size based on the size of the browser window, then you should have a look at my favorite feature in the SAP Screen Personas Global Theming.
When building screens using SAP Screen Personas 3.0, we have a global theming option which makes it very easy to configure the size of the area that is available for rendering of your personalized screens.
![theming.png]()
Similar to many web platforms (SCN, or Wordpress, for example) you can make the content appear in the center of the screen at a fixed width and then the borders expand as the screen expands. Nevertheless, the look and feel of the original screen is defined by the application.
![twitter.png]()
SAP Screen Personas gives your users the advantages of responsive design, within the desktop paradigm.
For the SAP Screen Personas product team, Tobias Queck.
SAP Screen Personas gives your users the advantages of responsive design, within the desktop paradigm.
