SAP Screen Personas
Create: Sebastian Steinhauer
Last Update: Bulcsu Szasz
TabMerging and blocking input validation
On some SAP screens (specifically change and create transactions) input validation can cause unexpected effects when using the SAP Screen Personas tab merging algorithm. These effects need to be considered when designing screens on which tab merging and input validation.
The SAP Screen Personas tab merging algorithm generally requires the ability to freely move between tabs (the one exception is the onActivate handler which can be used to handle/suppress informational popups and messages). In some cases input and change transactions might enforce a specific input sequence (for example in cases where one input influences available selections on a different field) which prevents the tab merging algorithm from switching to the required tabs. Thus tab merging will only work after all required inputs are provided. This article describes how you can use placeholders to guide end users through the input. The example used is Sales Order Entry - VA01.
The Scenario without SAP Screen Personas
For this article we make the assumption that we are creating an order with only very few data points:
- In the Header area:
- Sold-to-Party *
- PO Number *
- From the "Sales" tab
- Payment Terms *
- Order Reason
- From the "Items detail" tab
- Unloading Point
*= Required Fields
When using the standard transaction the user is guided through a number of error messages and warnings to the point that all inputs in the header area are required first, before inputs on the Sales tab are processed. only after the payment terms are provided in the "Sales" tab is a switch to the "Items detail" tab made possible.
The above image shows the 5 relevant fields (highlighted in blue) and the error messages (highlighted in red).
Using SAP Screen Personas, you will however be able to create a more approachable user experience and hide the tabs, even those that contain required fields. We will approach the problem in 2 steps:
- Create a basic tab merging scenario and identify its limits
- Leverage SAP Screen Personas to improve the user experience
Executing Basic SAP Screen Personas Tab Merging
In order to execute tab merging all the required fields need to be reachable. In this scenario these fields need to be pre-filled:
- In the Header area:
- PO Number
- From the "Sales" tab
- Payment Terms
Once the pre-requisite values are provided, it is possible to freely switch tabs. And after moving the needed fields to the user area and hiding the tab container the screen looks as shown below.
The area highlighted in pink contains the required header data, while the area highlighted in blue shows the fields taken from the tab container. While this screen is now functional starting the transaction again without filling the per-requisites will lead to an unexpected result:
As you can see the field for Unloading Point does not show up - neither does the label. After providing the required inputs the field and label show up. Even when using the transaction, the fields change their look depending on whether or not input is allowed. However depending on the theme used these fields visually seem to appear and disappear seemingly at random. The screen flow without improving the UX at this points looks like this:
In order to provide the best possible experience the next section will demonstrate how you can use a place holder to ensure a more consistent user experience.
Leveraging SAP Screen Personas features to create a consistent user experience
SAP Screen Personas introduces a number of features which previously did not exist in Dynpro or WDA screens. One specific feature is the introduction of the z-index and overlapping controls. Since the "appearing" and "disappearing" of screen elements is a side effect of their style and their reach-ability through tab merging the introduction of the z-index allows to stack controls as shown below:
This ensures that the user will always see either the real control (if it is available) or the corresponding placeholder which is positioned with a lower z-index underneath the control.
This allows to provide some consistency of the screen and cleanly handle unreachable controls.It is important to use a control which does not allow for user input as a placeholder or to otherwise ensure that input is not possible. The probably easiest way is to rely on an image control as a placeholder. This can be a single pixel gray image - which which can stretched to cover the full size of the placeholder control. Alternatively a clone of the original control with some color changes can be covered by a transparent image. Through the use of the images onClick event and a few lines of script it is even possible to show a message to the user asking the user to first populate all required fields.
This leads to the following screen flow:
Colors, Additional Labels and the Suggested Property
SAP Screen Personas provides a number of options that can be used to make the screen created above even more approachable. While SAP has long been using a dedicated icon/symbol to highlight mandatory or undefined fields this icon * has been established as the indicator for a mandatory field. Using SAP Screen Personas you can easily add additional labels (and define their color as red) to the screen to position the * where needed, additionally to marking the fields with the suggested flag.is not used in this transaction, nor is it commonly understood. Over the last couple of years a red
This is an example:
Related Search Terms:
SAP Screen Personas, TabMerging, SAP GUI for HTML, Suggested, Required, validation, z-index
Related SAP Notes/KBAs