SAPUX - SAP Screen Personas 2.0 Development

SAPUX SAP Screen Personas 2.0 Development

INSTRUCTOR HANDBOOK INSTRUCTOR-LED TRAINING Course Version: 99 Course Duration: 2 Days Material Number: 50121451

© SAP AG

SAPUX

SAP Screen Personas 2.0 Development- 1

© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX




The market has embraced SAP Screen Personas. We have sold this solution to many customers since we released it in December 2012. The reason customers are buying Personas is because it delivers business value.



In one proof of concept, we streamlined the process for creating a notification from 34 clicks spread across 5 screens into only 11 clicks on 3 screens.



Many customers are using Personas to improve adoption of SAP within their user base. By personalizing screens for different groups, they are more likely to use the system in a way that benefits the overall enterprise.



The consumerization of IT has raised expectations for user interfaces. Personas lets companies refresh their SAP screens without any disruption.

© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


Instructor Notes: 

For a given SAP screen, there could be multiple users that interact with that transaction, but each one needs to access different information. Example: For a VA03 Display Sales Order transaction, an inside sales rep might enter the data, which later gets validated by someone in shipping to determine how much the items weigh and where they are going. If they are going overseas, then export control will enter the system to check some values that shipping does not care about. Finally, if the customer calls to check on their order, that person needs to see still different information. By building flexibility for everyone to use the system, it is not optimized for anyone.

© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


Instructor Notes:  There are several ways that people have traditionally modified SAP screens to make the tasks of data entry or data lookup easier. Many of these involve creating an alternative interface to the SAP GUI. SAP designed Personas to be very easy to use with skills similar to a PowerPoint user. During this course, you will learn how fast and easy it is to modify SAP GUI screens using Personas. We will teach all the basic building blocks, so the day after the class you will be able to use Personas to streamline your specific use cases.

© SAP AG

SAPUX


Instructor Notes:  Personas is a productivity tool. Yes, you will learn to make the screens look much nicer, but this a means to and end. The goal is to improve usability, which will improve your users’ productivity and satisfaction with SAP. In fact, once you modify a screen using Personas, they may not even recognize that they are using SAP at all.  Above is an example of a simple cockpit. It includes launch buttons that take you directly to a transaction. This eliminates keystrokes so your user can jump directly to the information they need. The screen on the top right shows information from several tabs on a single screen. Again, this simplifies the process for the user. You will learn how to do all these things during the course.

© SAP AG

SAPUX



Here is a more complex scenario that involves the sequence of steps in the create notification transaction (IW21). Going through this use case would take more time than is available in the class, but you will have the skills afterwards to go and do this or something similar on your own.

© SAP AG

SAPUX



Going through the process of designing Screen Personas flavors is very much a team effort, with different skill sets coming into play at different phases of the project. To successfully go live with Personas in your environment, you will need three distinct skill sets: business process expertise, knowledge of how to use the Personas tool, and at least one person with user interface design skills. You can either have the expertise in-house, train your people to become proficient, or hire SAP or an external consultant or partner to fill in any gaps. One key person on the development team is the business user. This role should be involved from the beginning, starting with requirements and then iterating frequently first on the whiteboard and then in the software.

© SAP AG

SAPUX



Instruct the participants to use Design Thinking. Remind the class that each project should include business users on the development team. One can iterate very quickly and want to ensure you are addressing the key business issues as you move through the process.

© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX



Discuss that the architecture of SAP Screen Personas allows one to take any element on the SAP GUI and personalize it to suit his/her needs. One can hide fields you don’t use, move elements around to fit your work flow, pre-fill fields, change colors, and add your own graphics. This diagram shows the various layers and elements on an SAP screen. Personas give you granular control over any item on the screen. You can hide fields you don’t use, move elements around to fit your work flow, pre-fill fields, change colors, and add your own graphics. You can merge tabs together to simplify work flows and even automate keystroke using our powerful scripting engine. Best of all, most controls are drag and drop. Even scripting is simple as you just record your key strokes and attach them to a button.

© SAP AG

SAPUX


Instructor Notes:  Ensure that you mention that this course is focused on the Silverlight version of Screen Personas. This is a single download with a single installation process that installs the Silverlight version (as well as the HTML version which is not discussed here).

© SAP AG

SAPUX


Instructor Notes:  Discuss that SAP Personas is based on existing technologies … SAP NETWEAVER ABAP (Kernel 7.21 requires) and a web browser on the client. The client needs to have Microsoft Silverlight 5 or higher installed. Silverlight is supported by MSFT till 06/2021. The following 2 slides go into the architecture more deeply. Study these diagrams so that you can talk through them accurately.

© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX




There are many resources available if you want to learn more about SAP Screen Personas.

© SAP AG

SAPUX




We ran a webinar series on Persons during March, April, and May of this year. There is lots of great information about the solution and how to use it in different scenarios. The links on this slide take you to the frequently asked questions for each webinar. There is also a link to the recording on each page. While the screens might be slightly different with the new version of Personas, the value of the solution and examples remain relevant.

© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


© SAP AG

SAPUX


SAPUX SAP Screen Personas 2.0 Development

INSTRUCTOR HANDBOOK INSTRUCTOR-LED TRAINING Course Version: 99 Course Duration: 2 Days Material Number: 50121451

www.sap.com

SAP Copyrights and Trademarks © 2014

SAP AG. All rights reserved.

No part of this publication may be reproduced or transmitted in any form or for any purpose without the express permission of SAP AG. The information contained herein may be changed without prior notice. Some software products marketed by SAP AG and its distributors contain proprietary software components of other software vendors. • Microsoft, Windows, Excel, Outlook, and PowerPoint are registered trademarks of Microsoft Corporation. • IBM, DB2, DB2 Universal Database, System i, System i5, System p, System p5, System x, System z, System z10, System z9, z10, z9, iSeries, pSeries, xSeries, zSeries, eServer, z/VM, z/OS, i5/OS, S/390, OS/390, OS/400, AS/400, S/390 Parallel Enterprise Server, PowerVM, Power Architecture, POWER6+, POWER6, POWER5+, POWER5, POWER, OpenPower, PowerPC, BatchPipes, BladeCenter, System Storage, GPFS, HACMP, RETAIN, DB2 Connect, RACF, Redbooks, OS/2, Parallel Sysplex, MVS/ESA, AIX, Intelligent Miner, WebSphere, Netfinity, Tivoli and Informix are trademarks or registered trademarks of IBM Corporation. • Linux is the registered trademark of Linus Torvalds in the U.S. and other countries. • Adobe, the Adobe logo, Acrobat, PostScript, and Reader are either trademarks or registered trademarks of Adobe Systems Incorporated in the United States and/or other countries. • Oracle is a registered trademark of Oracle Corporation • UNIX, X/Open, OSF/1, and Motif are registered trademarks of the Open Group. • Citrix, ICA, Program Neighborhood, MetaFrame, WinFrame, VideoFrame, and MultiWin are trademarks or registered trademarks of Citrix Systems, Inc. • HTML, XML, XHTML and W3C are trademarks or registered trademarks of W3C®, World Wide Web Consortium, Massachusetts Institute of Technology. • Java is a registered trademark of Sun Microsystems, Inc. • JavaScript is a registered trademark of Sun Microsystems, Inc., used under license for technology invented and implemented by Netscape. • SAP, R/3, SAP NetWeaver, Duet, PartnerEdge, ByDesign, SAP BusinessObjects Explorer, StreamWork, and other SAP products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of SAP AG in Germany and other countries. • Business Objects and the Business Objects logo, BusinessObjects, Crystal Reports, Crystal Decisions, Web Intelligence, Xcelsius, and other Business Objects products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Business Objects Software Ltd. Business Objects is an SAP company. • Sybase and Adaptive Server, iAnywhere, Sybase 365, SQL Anywhere, and other Sybase products and services mentioned herein as well as their respective logos are trademarks or registered trademarks of Sybase, Inc. Sybase is an SAP company. All other product and service names mentioned are the trademarks of their respective companies. Data contained in this document serves informational purposes only. National product specifications may vary. These materials are subject to change without notice. These materials are provided by SAP AG and its affiliated companies ("SAP Group") for informational purposes only, without representation or warranty of any kind, and SAP Group shall not be liable for errors or omissions with respect to the materials. The only warranties for SAP Group products and services are those that are set forth in the express warranty statements accompanying such products and services, if any. Nothing herein should be construed as constituting an additional warranty.

SAP SCREEN PERSONAS 2.0 DEVELOPMENT – INSTRUCTOR HANDBOOK

CONTENTS ABOUT THIS HANDBOOK............................................................................................................................... 4 ABOUT SCREEN PERSONAS 2.0 ................................................................................................................... 5 LAB EXERCISE PREPARATION STEPS ........................................................................................................ 5 PART 1 – SAP SCREEN PERSONAS 2.0 DEVELOPMENT........................................................................... 6 EXERCISE 01 – GETTING STARTED WITH SAP SCREEN PERSONAS ..................................................... 7 EXERCISE 02 – YOUR FIRST SAP SCREEN PERSONAS FLAVOR .......................................................... 13 EXERCISE 03A – CREATING FLAVORS TO IMPROVE PRODUCTIVITY .................................................. 31 EXERCISE 03B – USING STATIC PREFIILS TO STREAMLINE TRANSACTIONS .................................... 44 EXERCISE 03C – TURNING A TEXT FIELD INTO A DROPDOWN LIST .................................................... 46 EXERCISE 04 – AN INTRODUCTION TO SCRIPTING AS A PRODUCTIVITY TOOL ................................ 49 EXERCISE 05A – ADDING EXTERNAL CONTENT TO A FLAVOR ............................................................ 59 EXERCISE 05B – TYING A FIELD TO A URL ............................................................................................... 61 EXERCISE 05C – EXTRACTING INFORMATION FOR A DIFFERENT SCREEN ....................................... 63 EXERCISE 05D– SKIPPING SCREENS ........................................................................................................ 72 EXERCISE 06A – TABLE FORMATING ........................................................................................................ 78 PART 2 – SAP SCREEN PERSONAS ADMINISTRATION ........................................................................... 81 ADMINISTRATION TOPICS - ......................................................................................................................... 82 TRANSACTION: /PERSOS/ADMIN_UI .......................................................................................................... 82 APPENDIX A– EDITING TOOLS .................................................................................................................. 102 APPENDIX B– SHORTCUT KEYS ............................................................................................................... 104 APPENDIX C– PROPERTY WINDOW ......................................................................................................... 105

@ Copyright. All rights reserved.

3


About This Handbook This handbook is intended to complement the instructor-led presentation of this course, and serve as a source of reference. It is not suitable for self-study. American English is the standard used in this handbook. The following typographic conventions are also used: Use

Example/Visualization

Demonstration by Instructor A hint or advanced detail is shown or clarified by the instructor – please indicate reaching any of these points to the instructor Warning or Caution A word of caution – generally used to point out limitations or actions with potential negative impact that need to be considered consciously Hint A hint, tip or additional detail that helps increate performance of the solution or help improve understanding of the solution Additional information An indicator for pointing to additional information or technique beyond the scope of the exercise but of potential interest to the participant Discussion/Group Exercise Used to indicate that collaboration is required to conclude a given exercise. Collaboration can be a discussion or a virtual collaboration. User Interface Text

Find the Flavor Gallery button

Solution or SAP Specific term

Flavors are transaction specific screen personaslization created and rendered using SAP Screen Personas.

This handbook is presented in two parts. Part 1 covers development of SAP Screen Personas 2.0 flavors, while Part 2 covers general administration tasks and topics. This is a heavily labs hands-on course. The instructor will present SAP Screen Personas 2.0 in its SAP User Experience context in class and then guide you through system access and the following exercises.


4


About Screen Personas 2.0 SAP Screen Personas is a browser-based rendering engine for classic SAP Dynpro screens. It provides consumer-grade personalization features that enable IT professionals, key-users, and end-users to simplify business application screens quickly and easily in order to improve the visual appeal, end-user productivity, and performance of SAP. SAP Screen Personas helps IT Managers reduce screen clutter for business users, allowing them to access only the data they need to transact business. This translates into increased business user productivity and a more satisfying user experience. SAP Screen Personas allows IT Managers to deliver increased transaction throughput and an improved user experience.

Lab Exercise Preparation Steps Before you begin the following exercises, you will need to make sure that you have all the necessary png and jpg files to perform the labs in this handbook. Please run the following script at the following: • Start All Programs  Initialize Course SAPUX  Initialize SAPUX folder.vbs. After you run the vbs script, you will find an SAPUX_99 folder containing the jpg and png files you need to perform your lab exercises. This folder is located in your virtual machine‘s N:\My Documents location. -

You find and need the following files: o Blue.png o City.jpg o FullyBrandedHeader.png o IceBerg.jpg o Portugal.png o SmokedGlass.png o Spain.png o White.png

As a student, you will access the training system by using an SAPUX-xx(xx:00-30) account with the word “initial” as your password. You will be asked to change your passowrd on the first login. Your instructor will lead you through access to your dedicated virtual machine.


5


Part 1 – SAP Screen Personas 2.0 Development


6


Exercise 01 – Getting started with SAP Screen Personas Start point:

Connect to the Personas Screen and familirize yourself with Personas

Objective:

Verify the connection learn about the basic concepts of SAP Screen Personas

Difficulty:

Easy

In order to perform the next exercise, you will need your Client, train-xx (the instructor will allocate the train-xx number to you during class) user account, and supply the “initial” password: • Client • User • Password


7


Task 1 Steps 1. Access your virtual machine. 2. Fill in the system and account login information and Press: Logon. 3. You will see the following dialog box:

4. Click Ok. You will then see the following storage dialog box:

5. Click Yes. 6. You are now in the Screen Personas system.


8


Once you connect you can see what SAP Screen Personas looks like. Identify those elements surrounding the actual dynpro screen that are personas specific.

In the right hand corner of Personas screen you can use the Instant Help button to help you get started in finding the relevant runtime elements and determine their purpose. Task 2 Steps 1. Make sure you identify the following:  Flavor bar  Personas Flavor menu  Flavor Gallery button  Instant Help button (Bottom Right Hand Corner)  Script recorder button


9


Flavor Bar

2. Open the Flavor Gallery. You might see some flavors in there or a blank list depending on whether you have a refreshed or existing system. This would be the library, where all the flavors that are saved and shared with you are stored. For example:


10


SAP Screen Personas caches flavors; the first time a flavor is opened it takes a bit longer afterwards flavor switches happen faster. The flavor will only be refreshed after the persona session is re-started – which usually means refreshing the page to reload the player. Local edit are applied without the reloading of the player.

3. You will now open the transaction SU01d. Flavors are created per transaction, so note how the flavor bar updates and only shows flavors you have chosen for this specific transaction.


11


4. Also, open the flavor gallery and see how the selection of flavors has changed to reflect the available flavors for this transaction. Please note you probably will not see anything if this is a new environment and no flavors have been created for this transaction. 5. Now, return to the SAP Easy Access Menu by using the yellow Exit button or putting “/n” into the t-code field. Again you will see the Flavor bar update.

SAP Screen Personas picks the flavor to render when you re-enter a transaction by remembering your last choice – in the same session. If you enter the session for the first time your defined “default” is selected, or if none is defined the basic view is chosen. All flavors in a user specific setup, across all transactions, as well as the user’s personal defaults are referred to as “user profile”.


12


6. Congratulations – you have connected to an SAP Backend System using SAP Screen Personas, and learned about the basic concepts “flavor” and “profile”.

Exercise 02 – Your First SAP Screen Personas Flavor Task Steps

Start point:

You are looking at the transaction SMEN in its “Basic View” flavor. Recall that you ran a script containing artwork. The required artwork for this exercise has been provided in the N/My Documents folder. If you have not yet run the VBS script, return to the exercise setup section at the beginning of this document.

Objective:

Understand how flavors are created and which desgin options are available

Difficulty:

Easy

1. In the SAP Easy Access screen, identify the “Create a copy” option in the menu on the upper right of the screen. Please note which options are available to you. 2. Create a copy of the SMEN Screen (SAP Easy Access Screen).


13


Since the “Basic View” cannot be directly altered you have to create your own flavor by creating a copy. You can create copies starting with the “Basic View” or with any existing flavor.

3. Provide a name for the flavor you are creating. The flavor name can be changed later through the sharing dialog, but should indicate for what purpose you are creating a specific flavor. For example, the name “Rapid Launch Screen” makes more sense than “SMEN”. The name of the flavor will be visible in the Flavor bar. 4. After creating a flavor SAP Screen Personas changes automatically into edit mode.

You can always distinguish edit mode from runtime by looking for the blue bar.

You can use the Instant Help button to help you get started in finding the relevant edit mode elements and determine their purpose. 5. In the Edit Mode, use the instant help to identify the following options on the screen:  Change colors and background  Hide and un-hide screen elements  Add launch buttons, foreground images, and labels  Add sticky notes


14


6. Leave the instant help and select the splitter container (select the vertical separator) by selecting the sliding vertical divider. Almost the entire canvas area will be highlighted. Hide it by using the hide icon identified before:

Please note that you might not have the splitter container, at that point you want to select the user area. 7. The SAP Easy Access (SMEN) screen includes a number of containers. The next steps will show you how to remove individual elements and configure the container elements on the screen.


15


Toolbar

UserArea

StretchableContainer

SplitterContainer

Application and System toolbar contain buttons

The UserArea is the largest container on the screen.

A StrechableContainer does not include any elements

A splitter container contains multiple sub containers which hold elements.

It will fill the entire canvas and cannot be removed.

This container can safely be hidden.

To select it click on the separator bar, this will select the entire container.

Hiding the toolbar will hide the buttons inside the toolbar.


16


When you click on the Properties Icon on the left unique Control ID and hierarchy for example:

, each asset on the screen has a

• Toolbar is ses[0]/wnd[0]/tbar[00] for the first toolbar on the screen, the second toolbar will be Toolbar is ses[0]/wnd[0]/tbar[01] and so on. • UserArea is ses[0]/wnd[0]/usrUSRAREA for the generic area (outlined in Red above), the specific Area (Green or Blue as outlined above) will have a longer name. • Buttons are ses[0]/wnd[0]/tbar/btn[0] if it’s the first button, btn[1] if its second and so on. The tbar indicates that this button was on the Toolbar. Each asset on the screen also has a Type, for example: • SplitterContainer has a Control ID name ses[0]/wnd[0]/usrUSRAREA….. and Type: SplitterContainer • StretchableContainer has in its Control ID the USRAREA, but the Type is TableTreeView • Buttons has a Type Button

Click once more into the center of the screen – an invisible stretching container will be selected. Hide it by using the hide icon identified before. 8. You want your screen to be completely empty, just like the screen below. For example:


17


9. Drag the “Go!” button (Green Checkbox) as well as the ok-code field from the system toolbar to the user area. 10. Select the application toolbar (the toolbar containing the other menu button highlighted in yellow) by clicking on its background. Hide it using the hide icon identified before. Your screen should now look like the following:

Please note the placeholders showing where hidden elements are located on the screen. Selecting one of these placeholders will not “unhide” the element but make is temporarily visible. To unhide a control you have to make it temporarily visible, select the specific element, and


18


select the unhide button in the toolbar. Also make sure to try the two icons underneath the “property editor” on the right. One will temporarily show hidden elements, the other will make them disappear again. 11. Find the Enter button (Green Check) that should be in the middle of your screen. Double-click it and select under the Alignment the Picture/Text icon and add the label to it (in this example “Go”).

Please note that the button changes its size to accommodate the label – this only works in the toolbar – in the user area the button will need to be resized manually. Also the default of the properties is icon only, so you will need to select text/icon button before the Label field becomes active. Also in Define button properties window you can change the following: Alignment of Text before/After image, or Image or Text only and Button color.

Please note that you can re-label the headline by just double clicking it – like the toolbar. In case of the toolbar the value will replace potentially dynamic values set by the backend


19


12. Select the user area – by clicking on the outer-most canvas.

Remember you can see what you have selected in the properties window also, the outermost canvas will have a name of ses[0]/wnd[0]/usrUSRAREA 13. As you can see, the color palette dialog becomes available. When you open it, you will find the option to add a background picture to the screen and to upload a picture from the local hard disk.

If you accidentally find yourself in the situation that you select a stretchable container left on the screen just hide it and click on the background again. 14. Select “upload” and upload the picture “iceberg.jpeg” (or “jpg”) from your N:/ My Documents location. Make sure to experiment briefly with the mode options – before selecting “stretch”.


20


Foreground and background images are different. A background image always fills the user area (or a group box), and is not independently moveable. Foreground images can be moved around the screen independently of a container. Additional controls such as images and labels can be added through the control toolbox drop-down menu. For more details you can always check the instant help.


21



22


15. Additionally, add a foreground image to the screen. Use the Open control toolbox button to upload the image “FullyBrandedHeader.png” and add the image to the screen. Make sure once you Browse and then find the file, click on the Upload button to actually upload the image. 16. See Screen Shot below. Use the mode “none” which will add the image without any transformation to the screen.

17. As you will see, the image will be sitting on the user area, on top of the background image. Position it as you desire. Please note that SAP Screen Personas uses absolute positioning from the upper left corner You can see and change the exact position when you open the “properties editor” (the icon in the upper right corner below the “cancel” button). The properties are called “left” and “top”.


23


18. Attempt to move the ok-code field into the transaction launcher area. You will realize that the ok-code field ends up behind the picture. Use the z-level control to bring it to the top. 19. Also, move the “Go!” button next to the ok-code field in the transaction launcher area. Make sure it is positioned at the same level or above the ok-code field (and not behind the image). . You can use the z-level control to increase and decrease the z-level of screen elements. Please note that not every increase has a visual effect (sometimes the selected control will be positioned above or below a control which does not currently overlap) – keep clicking until you reach the desired effect. 20. Your screen should now look like the image below:


24


21. Re-color the Go Button by first selecting the Go button. You will notice that the color pallet is available when you select a button.

Also please note the color picker which allows you to select any color from the background image or the personas rendering area. The buttons below the color selector allow you to change the alignment of icons and labels of the selected button(s).

22. Also add a sticky note to the screen and experiment with its “collapsed” status and its color choices using the color pallet.


25


Since the sticky note is designed not to interfere with existing screen content and was designed as a safe feature it has its own icon in the edit toolbar.

A simple double click on the note will re-open the default dialog for the control The sample applies to other custom controls such as images or labels. 23. Position the note to the right of the menu image:

When a collapsed sticky note is added to the screen it might show up in the upper left corner of the screen as a small triangle.

Task Steps: 1. Now will add 4 buttons to the screen. Below are the requirements: Button 1 – “Equipment Lookup” launching transaction IE03 Button 2 – “Exit” triggering the menu option “System/Log off” Button 3 – “Create Sales Order” triggering the transaction VA01 Button 4 – “sap.com” launching the webpage http://www.sap.com

When trying to define the launch buttons, use the dropdown menu to select “Menu Option” for the Button 2, and “Web Page” for Button 4.


26


2. Position them on the left white section on the menu. Make sure to ensure same sizes and align the buttons.

In the Properties window, find the tooltip option you can change the tooltip which will eventually be shown to the user of the flavor. In run-time mode on mouse over. SAP Screen Personas allows tooltips for most controls. 3. Select all 4 buttons and change their colors as shown in the screenshot.

When trying to change the color of the icon inside a button, double click on the button to bring up the Define launch button properties

4. Before you try/test the flavor on the system, also add a label to the screen next to the SAP logo. Please use the text “SAP Screen Personas Class” and make the text bold and white.


27


5. Finally, press the Save and Exit button to change back to runtime mode. The blue edit bar will disappear.

Depending on your edit speed your backend session might have expired. If it has please reconnect to the system, and select the flavor you just created.

You newly created Flavor is now useable and ready to go. Task Steps: 1. Set the new flavor as your default by using the flavor menu. 2. Also, share your flavors with your peers if possible in the training environment.

Open the flavor menu on the upper right, by selecting the little cog icon. Note that there are a number of new options available to you since you are the owner of the flavor.


28


You will only see flavors for the current transaction that have been shared with you or a group of which you are a member. 3. Your final screen should now look like the image below:


29


Congratulations! You have created your first full SAP Screen Personas Flavor.


30


Exercise 03A – Creating Flavors to improve Productivity Start point:

You are looking at the transaction IE03 in its “Basic View” flavor – open equipment 10003555 You can reach this transaction by using the corresponding launch button created in Exercise 2

Objective:

Improve the layout of an existing transaction with multiple tabs. The main focus is on productivity and not visual design

Difficulty:

Medium

Make sure you have entered the equipment number 10003555 and opened the equipment by pressing enter. Task Steps: 1. Start this exercise by creating a copy of the basic view – name it “Merged Tabs ”. You are on the second screen of the IE03 transaction.


31


2. Consider that the key goal of this rework is to consolidate data from 2 tabs into one tab, and then to streamline the overall design. To be able to merge content from multiple tabs their content needs to be cached. This is only possible for tabs not enforcing a specific workflow. The tab changes have to be possible without constraints. The tab control is a complex composite control: TabControl

TabItem

TabHeader

TabItemContent

Controls caching and visibility of contained TabItems

Controls appearance and visibility of the tab itself Double-click here to switch to cached tabs while in edit mode

Controls the color, visibility and text which appears on the tab

Controls the background of the tab content

Again, here is where the location under the Properties window can help you navigate. For example, TabControl has a name: ses[0]/wnd[0]/usrUSRAREA/tabstripTABSTRIP. The TabItem has the same Control ID as the TabHeader, but they have different Types. TabItem Type is TabItem, while the TabHeader Type is TabItemHeader. 3. Now, double click where indicated in the picture above to open the tab caching feature of the TabControl. Make sure to not click on the TabItem or the TabHeader.

A double click on the TabControl brings up a pop up window.


32


4. For this exercise, please enable Tab caching. Enable ” Caching” ONLY for the following tabs: • • •

General Location Organization

5. Make everything else not “cacheable”. 6. Make the following tabs Visible: • • • • •

General Location Organization Structure Sales and Distribution

7. Hide all the other tabs. Please verify that your selection matched the one shown in the screenshot above. 8. Confirm with OK, and note the “cache indicator icon” on the upper right corner of the tab container. A red indicator shows that the tabs have not been cached successfully. Please note that tabs are only cached in runtime mode.

A green indicator shows that the defined tabs have been cached successfully. If this tab is shown in edit mode you can move elements between tabs through drag and drop. 9. Press Save & Exit to return to runtime mode. You will see the indicator turn green. If it is not green, Save & Exit again. 10. Return to edit mode. 11. Hide the group box/container “General Data” in the General tab. 12. Double click the TabItem of the “Location” tab. you will see the tab content change in edit mode.


33


Due to SAP server side rendering switching of tabs in edit mode in only possible when using cached tabs. Tabs which are not cached will show up empty.

If you are having issues clicking on TabItem to switch tabs, click on Save & Exit, select the Tab and turn on the edit mode. 13. On the “Location” tab, grab the “Address” group box/container and move it to the user area (the large blue empty space to the right). 14. Change back to the “General” tab (double click the TabItem). And drag the control into the area freed up before.


34


Changing the screen hierarchy can be very demanding computationally when large containers are moved. Depending on your local computer please allow personas to execute the action and verify the result before continuing. 15. Back on the General Tab, hide the group boxes for “Reference data” and “Manufacturer data” and move in the Address box that you grabbed from the Locations tab. Your screen should look as shown below – if it does not please contact your instructor:


35


16. Next, you will add the “Responsibilities” group box to the “General” tab. To do so: • • •

Switch to the “Organization” tab Drag the “Responsibilities” box to the user area Switch back to the “General” tab

17. Drag the “Responsibilities” box to its new place on the “General” tab below the “Address” box.


36


To drag a box into a general area you need to select the box, hold and let go in the general area. Sometimes it takes several tries to get a hang of it. 18. After obtaining all the required information from the cached “Location” and “Organization” tab, you will not need to show these to the end user – but keep caching them. Please adjust the caching configuration of the tab strip control accordingly.


37


A cached but invisible tab will still be transferred to the client, but will not be rendered. It has the same impact on network bandwidth as a visible tab You can easily rename tabs by just clicking on the “Tab item header” entry in this table.

19. By double-clicking a group box, you can change its label. In this case, add the information from which tab the data was obtained. 20. Also rename the tab “General” to “Key Information”. You will have 3 tabs visible now.


38


You can easily rename tabs by just double-clicking on the TabItemHeader.

If you need to reset the value of a changes label or text to the system default setting you can use icon shown to the left. If you attempt to select a group box, but the color pallet does not light up, but the ungroup icon does light up, you have selected a container surrounding the group box, you can either click again to select the group box inside the container, or dissolve the container by clicking the ungroup icon.


39


Task Steps: After improving the detail part of the screen, let’s now focus on the header data. When you attempt to select elements you quickly realize that they are all grouped together in nested sub-screens. Sub-screens are ABAP development artifacts which are used to group elements together for various reasons. In SAP Screen Personas sub-screens are handled as groups. In ungrouping nested sub-screens you need to follow the hierarchy top to bottom

1. Make sure you ungroup all elements until you have only the atomic elements left. This will take several steps.


40


2. In order to improve the usability of the screen, we will now remove certain elements we don’t need in this scenario. You can keep the shift key pressed to select multiple elements on click. Alternatively you can use a box selection by using your mouse (with a key pressed) to draw a box onto the user area. Any element fully inside the box will be selected. Make sure to start the selection on the user area since any other element will be dragged by the same motion. 3. Hide the following elements after selecting them: • Category • Status Number • Valid To Date 4. Shorten the following fields: • Description • Status


41


5. Your screen should look like this:

6. Also do the following: • • • • • • •

Change the user area background to white. Select the TabItemHeaders one by one and change their background to white Select the TabItemHeaders one by one and change their border to blue Select all the Buttons in the menu bar and make the Background grey (you can use multi select) Hide any menu bars that you don’t need On the “Key Information” tab change the colors of the group boxes Select one shade of gray for the title/border and one for the background

7. Save & Exit

The currently selected TabItem will always be of a darker shade of the color selected.


42


8. Your screen should now look as shown above, otherwise consult with your instructor. Congratulations – you have streamlined an existing SAP screen for a specific use case. Without writing a single line of code. Make sure to set this flavor as your default flavor for the IE03 transaction.


43


Exercise 03B – Using static prefiils to streamline transactions Start point:

Make sure you are looking at the SAP Easy Access Menu transaction – in the flavor created before. “/n” will return you to the Easy Access Menu

Objective:

Learn how to use static pre-filled values to further streamline transactions.

Difficulty:

Medium

Task Steps: 1. If you are not there yet, navigate back to SMEN (put “/n” into the OK-code field, press enter). Your previously created flavor will come up (see Exercise 02). Select the Equipment Lookup button. You will see that the initial screen of your IE03 transaction is still unchanged, and requires you to populate the equipment field. 2. To prefill a default value follow these steps: a. Delete the content of the field, and press enter – you will get an error message. b. Change to edit mode. c. Double click the field and put in 10003555 d. Press enter e. This defines 10003555 to always be the default setting for this field. A prefilled value is only stored when it is different from the value already in the field when you enter the transaction. Also you can always tell that there is a default value in the field by the yellow arrow that you see in the edit mode. You will also see the default value in the properties. 3. While in edit mode, also change the look of this screen. After changing colors and pre-filling fields the screen should look like the following:


44


4. Save and Exit. Congratulations – you have created a flavor spanning more than one screen. The flavor has also merged tabs, hidden values, and prefilled required fields with default values - without writing a single line of code.


45


Exercise 03C – Turning a Text field into a DropDown List Start point:

Make sure you are looking at the SAP Easy Access Menu transaction – in the flavor created before. “/n” will return you to the Easy Access Menu

Objective:

Instead of only using a static prefill this exercise shows how to convert a textfield into a drop down list

Difficulty:

Medium

Task Steps: 1. Go back to the SMEN transaction that you previously created. Press the Equipment Lookup button, then go to the edit mode. In the previous exercise, you prefilled the Equipment field with the Equipment:


46


2. To change the single default into a drop down list do the following: a. Go to Edit Mode, reset the value using the orange arrow to return to the backend or default value, or you can clear the value by going to the properties window and deleting the value under Text field. b. Select the text field 3. Open the control conversion menu in the tool bar entries: Maxitec-R 3100 Engine PW100

and select the option “Dropdown List”. Add two

10003555 (make default by selecting the radio button in the first column) 10003550

Press the little “+” icon to add additional option to the dropdown list.


47


Please note that your drop down list will have a blank line as part of the List of Values (LOV). If the user by accident selects the default value will pre-fill the text field.

4. Confirm by pressing OK. 5. Save and Exit. Congratulations – you have created a flavor spanning more than one screen, merged tabs, hidden values, and prefilled required fields with default values and a drop down - without writing a single line of code.


48


Exercise 04 – An Introduction to scripting as a productivity tool Start point:

You are looking at the SMEN transaction in your preferred flavor (see Excersice 2)

Objective:

Learn how you can use script buttons to automate often repeated actions - Exercise 03B focused on pre-filling with a single value to streamline a process. This exercise expands on this by showing how to handle multiple dependent inputs,

Difficulty:

Medium to Advanced

Press the “Create Sales Order” button in your flavor on SMEN (or open VA01 manually). Please note that the second screen of VA01 is beyond the scope of this exercise.


49


For this exercise you will be creating a screen which allows Sales Representatives on the Iberian Peninsula – (Spain and Portugal) to create purchase orders for both Rush Orders as well as Cash Sales with a single click. To automate these steps – we will use the script recorder. To automate these steps – we will use the script recorder. To enable recording of backend actions press the red camera icon on the upper right side. A red border will indicate that your backend interactions will be recorded. While you are recording the speed of your interactions is irrelevant – accuracy is more important. Also ensure never to rely on already existing data on the screen. It is considered a best practice to only record in “Basic View”.

1. Start the Recorder. 2. Fill in the data for a Rush Order in Portugal: a. Order Type: RO (Rush Order), Sales Organization: 2100. b. Press the “Sales” button in the application toolbar. 3. See screenshot below: ,

-

4. Once you reach the next screen, press the record button again and store the recording temporarily on your hard disk.


50


When you are in recording mode, the screen is surrounded by a red frame and the record button is red. In summary: Step 1

Step 2

•

Start the recorder and fill in one set of data:

•

Order Type: RO

•

Sales Organization: 2100

•

Press the “Sales” button in the application toolbar

Step 3

•

Reach the desired screen

•

Stop the recording

•

Save the file locally

•

Navigate back using the “back”

•

Return to the initial screen of VA01

•

Create a copy (using the manage flavor menu).

button

Screen recordings are saved as text files containing JSON description of all actions taken during the recording. Only data that is actually sent to the backend is recorded. Data that is defaulted in by the back-end will not get send to the backend again.

5. In order to design this transaction, perform the following: a. Hide all elements on the screen. b. Set the background to “city.jpg” Please note that the mandatory fields can only be hidden after a value is entered. Since values set by the backend are not set by the user they will not allow the field to be hidden. The the Order Type field is mandatory and can only be stored hidden after a value is entered. • Prefill Order Type to XX The value will be overwritten by our script.


51



52


6. To upload additional images for the background, please use the Image button. Upload the background image half transparent image “smokedglass.png” to create a canvas area for the screen. 7. Also layer the two flag images “spain.png” and “portugal.png” on top of the smoked glass. Your screen should look like the following so far:


53


8. Take the time to use the provided images (blue.png and white.png) to design a menu. When uploading the images, make sure to select fill mode to stretch them.


54


9. You are now going to create a Rush Order and Cash Sale for Portugal and Spain. Here is the data you will use. Please review the details: RO CS RO CS

Rush Order Cash Sale Rush Order Cash Sale

2100 2100 2300 2300

Portugal Portugal Spain Spain

10. Click on the add script button. Use the upload button to upload the script that you have recorded earlier. The button will now create a Rush Order for Portugal.

Use the upload button in the lower left to upload the previously recorded script.

11. After importing the script, your screen should look as shown in the screenshot. If you see discrepancies, please consult with the instructor. 12. Click OK to save the button.


55


13. 14. 15. 16.

Now, you will create a button for Portugal. Click on the Script Button in the menu. Upload the Script that you have recorder earlier. Change the Value from RO to CS. As shown in the screenshot. Create two more script buttons: a. RO & 2300 b. CS & 2300 You will have 4 buttons in the end: RO &CS for 2100 and RO & CS for 2300. Previously in Exercise 2 we discussed names and hierarchies of assets that are on the screen. In the script pictured above you will be able to tell that the following actions are being executed in the script: st 1 Line: ses[0]/wnd[0]/usrUSRAREA/ctxtVBAKAUART is Control ID for the Order Type entry field : nd

2 Line: ses[0]/wnd[0]/usrUSRAREA/frameTEXT/ctxtVBAKVKORG is the Control ID for the Sales Organization entry field: 3rd Line: ses[0]/wnd[0]/tbar[1]/btn[5] this is the Control ID for the Sales button


56


17. Also add a launch button which triggers “/n” and name it “Main Menu” to the screen. 18. Now to finish up the rework of this screen: a. Add some labels to the screen. b. Experiment with colors, fonts and sizes


57


19. After you save your changes, the screen should look like the screen above. Feel free to contact the instructor, if your screen appears differently. Congratulations – you have created a simplified screen using scripting and providing an intuitively usable design.


58


Exercise 05A – Adding external content to a flavor Start point:

You are looking at the SMEN transaction in your preferred flavor

Objective:

Introduce external content to a screen using the HTML control. Extending Exercise 02.

Difficulty:

Advanced

Task Steps: 1. On your SMEN screen go back to edit mode. 2. Add an HTML control to the screen (Select HTML Viewer) 3. Try adding one of the following URL’s: a. http://www.htmliseasy.com/buttons/clock/demo_clock.html b. http://www.weather.com 4. Position the HTML control in the upper right white area of the menu (as large as possible). 5. Save & Exit.

Think about what this could do if pulling in a screen specific WDA or BSP URL – especially when passing screen content as parameters to it. Depending on your browser security settings or domain security settings this might not work. Also your Personas security setting might prevent this from working. The URL needs to be added to the white list in the Admin transaction. Please contact an instructor to discuss. The HTML control does not render its content while in edit mode, or when overlapped by a different control. Keep in mind that you can use the property editor to adjust the positioning and size of any control manually.


59


6. After adding the HTML control, your screen should look as shown in the screenshot above. Congratulations – you have created a screen using background images, foreground images, buttons, labels, sticky-notes and trying in external content.


60


Exercise 05B – Tying a field to a URL st

Start point:

Open an equipment in IE03 (1 screen, enter equipment and press enter)

Objective:

Launch external content by passing context information to the launched web destination Extending Exercise 03.

Difficulty:

Advanced

Task Steps:

.

1. Go Back to edit mode. (You are on the second screen of the IE03 transaction). 2. From the menu, add a launch button and label it “lookup” – for launching a web page. 3. In the “Define launch button properties menu” Select “Webpage” from the drop down menu. 4. Add the following URL: http://www.google.com/search?q={1} 5. Press the little “+” icon which will close the popup window and allow you to select screen content which you can than reference in your url. 6. Once you click on the “+” button select the Description Content, once you select it the lookup popup screen will open up Press the little “+” icon, which will allow you to select screen content which you can than reference.

Note that the {1} refers to key 1 in the list. Please note that if you made a mistake, you can’t change the Key number, just make sure that the Key Number corresponds to the Search number in the URL.


61


7. Press OK to position the launch button where needed. 8. Save & Exit.

9. Your screen should look like the screen above. If you press the new “lookup” button, a new browser tab will open and trigger a web search for the equipment in question.

Your Personas security setting might prevent this from working. The url needs to be added to the white list in the Admin transaction. Please contact an instructor to discuss. 10. Congratulations – you have incorporated SAP content to an external application (in this case google.com).


62


Exercise 05C – Extracting Information for a different screen Start point:

You are looking at the transaction IE03 in “Basic View”

Objective:

Navigate to a different screen, extract information and return the information to the current screen Extending Exercise 03.

Difficulty:

Advanced

Task Steps: 1. You are now going to start recording a script from the IE03 first screen in “Basic View”. Make sure the Equipment field is first set to empty. nd 2. Start recording: enter equipment number, going to the 2 screen , selecting the status field, returning to the first screen. 3. Stop recording. 4. Now, add a label “Status” to the screen. 5. Add a label “status value” to the screen. 6. Add a script button to the screen.

Step 1

•

Step 2

Start the recorder open the equipment 10003555

Step 3

•

Reach the desired screen

•

•

Navigate back using the “back” button

Back on the initial screen of IE03

•

Stop the recording

•

Save the file to your hard disk

Remember to record in basic view. To avoid interference with the cached tab logic.


63


7. Now that the overall screen flow is recorded, switch to your flavor and return to edit mode. In Exercise #3 you added a drop down list to the Equipment you will have to click on the entry field and revert to the original by clicking the back button next to the TextBox label.

8. Open the previously added script button and upload the script you recorded. 9. Test your script.

The script as of now will only go to the next screen and return – so it will not show any observable behavior when clicked.


64


10. The current script looks like the above. Below are the values you should enter: a. b. c. d.

Enter Value 10003555 into the Equipment field. Press Enter. Click on Value in the Status Field. Go Back to Screen 1.

11. Save to make sure you don’t lose your work. 12. Got to the basic view of IE03, enter the equipment number and go to the second screen. Make sure you are on your customized screen and then go to the edit mode. 13. You want to grab the Control ID for the status field and perform the following: a. b. c. d.

In Edit mode click on the status txt field. Open the Properties window. Left click on the Contro lD. Open your notebook.

14. Paste the Control ID into the notebook. Your screen should look like the following:


65


In case SAP Screen Personas requests authorization to write content to the clip board please be sure to grant the permission. A single left click on the Control ID will copy its value to the clip board.. 15. Be sure to copy the control ID. a. Close the properties editor. b. Leave edit mode (Press Cancel). c. And return to the initial screen of IE03. st

16. You are in IE03 1 Screen. Go to the edit mode: a. Add Label Status. b. Add a Label or Text Box to paste the status value into. c. Open the script button you created.


66


As mentioned before, the current script is doing the following: • • • •

Entering equipment number 1003555 nd Going to 2 screen Focusing on the Status field Going back to first screen

Script actions are always added at the end of the script, to move them up or down you can use the up and down buttons above the script steps on the left side. 17. To grab the status, you will need to add 2 script items and change one script item. Use the up arrow at the bottom to add script items: a. Add Refresh Screen. b. Move the Refresh Screen right after the Enter action. c. Change the Focus transaction (where your curser was on the status field on the second screen) to Copy and in the text field enter a variable name like “Status”. d. Add a Paste to the bottom of the script after you return to the first screen; you want to paste the “status” value into the text box you created. Use the arrow key to click out of the script window and to select the Text Box where you will paste the status text.


67


Everytime you hit a new screen in your script you need to add the Refresh Screen action.

If your script did not record cleanly you always have the Control ID of the status txt field from screen number 2, that you have copied earlier.

To select the Control ID required use the picker and select the “control value” label by clicking on it

18. Now, add a copy value action of the field value for the field identified before, right after the Refresh Screen action – paste the control ID into the field identifier box. Give the copied value a name. For example, “status”. Your script should look like the following:


68


Your script is doing the following: • • • • • •

You are Entering the Equipment number 10003555 You are going to the next screen (Screen #2) The screen is being Refreshed You are copying the value of status text and putting it in the variable “status” st You are coming back to the 1 screen You are pasting the value into the personas text field

19. Now, you will do the copy with the equipment number so you don’t need to hard code it. The first script item where there is hard coded equipment number, you want to change to Copy and enter the value into a variable “Equipment”.


69


20. The first script item, we changed to a Copy Value and entered the value into a variable “equipment”.

Please note you will have to added 2 line items to the script: Refresh Screen (always add when going to a new screen), and Paste Value. You also changed 2 script line items, the one that originally Focused on the Status text field, and the script item that hard coded the equipment number.

21. Save & Exit. 22. And Press the new lookup button. Your screen should now look like the following:


70


23. Review your changes. Congratulations – you have learned how to “merge” two screens. While the screens are not technically merged, you have learned how to carry values between different screens.


71


Exercise 05D– Skipping Screens Start point:

You are looking at the transaction SMEN

Objective:

Skip entirely the 1 screen of transaction IE03 and bring back the values from the 2 transaction IE03 to the SMEN screen.

Difficulty:

Advanced

st

nd

screen of

Task Steps: 1. Start on the SMEN screen that you have created earlier.

2. Add 2 text fields and 2 labels: one set for entering the equipment number and one set for receiving the status back. Add a script button. See screen below:


72


3. Start recording a script from the Basic View SMEN screen. a. Enter transaction IE03. b. Press Enter. c. Enter Equipment number 1000355. d. Press Enter. e. Click on the Status field. f. Click back button 2 times to go back to SMEN Screen. The basic script without any editing should look similar to the following:


73


4. We want to change the screen by making it more dynamic. So instead of Equipment number being hard coded, we want the user to enter any Equipment number. To do so, perform the following steps: a. b. c. d. e. f. g. h. i. j. k.

The first line item of the script needs to be a Copy of the Equipment number (New Line) Then you execute the transaction IE03 Refresh Screen (remember to refresh everytime you hit a new screen) (New Line) Paste the Value of Equipment Number (New Line) Refresh Screen (New Line) nd Go to the 2 IE03 screen by pressing enter Select the value in the Status field Copy the Status Value (New Line) Go Back (you are at screen 1 of IE03) Back you are the SMEN Screen Paste the value of Status into the Status text box (New Line)

5. The script should look like the following screens:


74



75


6. Save and Exit and Test the script.

You can enable the history for the equipment text box by going to the properties window finding the following two fields: IsLocalHistoryEnabled ( set it to True), and MaxNumberofHisotryEntries (set to the number you want to see in the drop down) Please note that in personas you will need to use the ARROW keys to see history, not the back button how you see it in SAPGUI.


76


7. When you are complete, verify that your screen appears similar to the following:

8. Test your revised screen. Congratulations – you have learned how to create a flavor that “skips” screens.


77


Exercise 06A – Table Formating Start point:

You are looking at the SMEN transaction in your preferred flavor (see page 13)

Objective:

Format a table for Transaction VA05N

Difficulty:

Easy

Task steps: 1. On SMEN, execute a transaction VA05N. 2. Execute the transaction, so that you can see the following table: (Screen #2 for transaction VA05N)

3. Create a copy of the Basic View. 4. Select the table in the right hand corner and double-click until you see the Define Rules window:


78


5. Now, click the add button to add formatting.

Congratulations – you have formatted a table.


79


SAPUX SAP Screen Personas 2.0 Development Part 2: Administration


80


Part 2 – SAP Screen Personas Administration


81


Administration Topics Transaction: /persos/admin_ui Task Steps: Start point:

Administratation UI

Objective:

To learn what is possible to do with the Administration

Difficulty:

Advanced

1. Launch n/PERSOS/ADMIN_UI. The screen should be the following:


82


2. We will now cover an overview of General Actions. Feel free to launch these administrative areas to get a good idea of the general look and feel of the UI. •

Flavor Maintenance - Flavor Maintenance allows you to assign flavors to a group, a person or a system. Please remember that a flavor is created per transaction. See screen example below:


83


•

Media File Maintenance – As admin user, you can manage different media files that can be utilized by the business users of personas systems. See screen example below:


84


•

ShortLink Maintenance – This allows you to generate short links. Remember short links are per flavor/system/transaction code. See screen example below:


85


•

Transport Objects – This allows you transport flavors, groups and media files between systems. See screen example below:


86


• Maintain Control Id Overwrite Logic – If it is required that two or more controls dynamically generated on the same flavor are handled as the same, then they will need to be maintained in this area. o Some SAP screens use sub-screens with different ids as a wrapper for other controls. These sub-screens are invisible to the user. Therefore, it can lead to unexpected behaviors, if changes are applied to children that dynamically change their parent subscreen. o To map these controls to the same id, it is possible to define control overwrite logic for specific control ids. o See screen example below:


87


Brief Exercise Steps: 1. Create a Short Link for one of the flavors you have created. 2. Add a flavor to a group in the Flavor Maintenance screen. We will now have a brief review of other topics followed by short exercises. •

User Maintenance – Per user shows you to what groups and roles the user is assigned. See following screen example:


88


•

Mass User Maintenance – This allows you to do mass user management. See following screen example:


89


Brief Exercise Steps: 1. Go to User Maintenance and lookup you’re your user. Group Management – Users belong to a group, and the same group can exist in multiple systems. See below for screen example:


90


•

Mass Group Maintenance –. Allows you to assign roles to system/client. Roles can then be assigned to user groups or to users. See following screen example:


91


Brief Exercise Task Steps: 1. Create a new Group and yourself to the new group. We will now cover Profile Wide Settings, each followed by a brief exercise: •

Control Specific Profile Settings – This form allows you to set properties for a specific control. For example, you can set Back Color for all Enter buttons. See following screen example:


92


•

Type Specific Profile Settings – Unlike the Control Specific Settings above which you do per control, this allows you to set the setting per Type. So you will do all Buttons, or all Checkboxes. See following screen example:


93


•

Global Text Replacement – This allows you to do Global Text Replace. See following screen example:

Brief Exercise Steps: 1. You will now learn how to change the background color for the Save Button. Go to transaction /n/persos/admin_ui. 2. Expand “Profile Wide Settings”. 3. Double-click the “Control Specific Profile Settings”. 4. Select the user and the system and click on “Edit Profile Settings” button

.

In the exercise here, we are showing how a specific user’s screen elements can be modified, so that the control shows differently across all flavors on that system for that user. Personas administrator can make the same change applicable for a group of users, by selecting the group instead of the user in the Profile Wide Settings screen.


94


5. Locate the “SAVE BUTTON” from the control list and click on 6. Set the “BackColor” for the button to blue “#0000FF”, and Save:


.

95


7. Repeat the same steps to change the background color of the “Back Button”, “Cancel Button” and “Exit Button”. 8. Now, re-launch personas and you will notice the background color for the buttons are changed. Personas already comes with a list of commonly used controls which an administrator can make use of. If you wish to add new controls to the existing list, this can be achieved through IMG settings in SPRO. In SPRO navigate to Cross Application Components -> SAP Screen Personas -> Maintain Controls for Control Specific Settings. Here you will be able to add new controls which aren’t already defined in the admin screens. Task Steps: 1. We will now change all the buttons to appear with a Rounded Edge. To do so, go to transaction /n/persos/admin_ui. 2. Expand “Profile Wide Settings”. 3. Double-click on “Type Specific Profile Settings”. 4. Select the user and the system and click on “Edit Profile Settings” button. 5. Click on “BUTTON” Control:


96


6. Set the “CornerRadius” for the button to 10, and Save. 7. Re-launch Screen Personas and you will notice that all buttons appear rounded at the corners. Task Steps: 1. You will now learn how to change screen text across all screens. To do so, go to transaction /n/persos/admin_ui. 2. Expand “Profile Wide Settings”. 3. Double-click the “Global Text Replacement”. 4. Select the user and the system. 5. Click on the “Edit Profile Settings” button. See screen below:


97


6. Click on “Insert Row” and enter “SAP Easy Access” in the “Original Text” being replaced by the “Replacement Text”, “Menu”.


98


7. Save your changes and re-launch Personas. You will notice that the original text is replaced by Replacement text. In this next section overview, you will learn about the translation features in Screen Personas. •

Prepare for Translation – this allows you to transport groups and flavors to different systems. See screenshot below:


99


•

Cleanup Redundant Translation – Clean redundancy in translations. See screenshot below:


100



101


APPENDIX A– Editing Tools The table below is to be used as a reference for the different tools available to edit a flavor:

Icons

Tool

Function

Undo last action

Reverses the last editing action

Redo last action

Reverts to the last editing action

Group selected controls

Groups a set of selected controls

Ungroup selected controls

Ungroups a set of selected controls

Bring Forward

Brings the required control forward

Move Backward

Moves the required control backward

Make field mandatory

Adds an asterix mark to a field indicating the field is mandatory

Undo mandatory field

Removes the asterix mark from a mandatory field making it an optional field

Decrease Fontsize

Decreases the fontsize of the text

Increase Fontsize

Increases the fontsize of the text

Add or update tooltip

Adds or updates a tooltip

Delete tooltip

Deletes a tooltip

Hide selected controls

Hides the selected controls

Unhide selected controls

Unhides the selected controls

Convert control

Changes the type of control of a text field

Dropdown List

Adds a drop-down list to the control

Radio Buttons

Adds radio buttons to the control

Add a sticky note

Adds a sticky note

Open control box

Opens the control box with options to add Launch button, Script button, Group box, Label, Text box, Check box, Image, HTML Viewer

Launch button

Adds a launch button to launch a Transaction, Webpage, or a Menu Option

Script button

Adds a script button to specify a set of rules and actions


102


Group Box

Adds a panel with a title field

Label

Adds a text label

Text Box

Adds a text input field

Check Box

Adds a check box

Image

Adds a box to upload an image or selects picture from the library

HTML Viewer

Adds a box to render a Webpage URL

Delete prefill or control (Delete)

Deletes the color modifications and restores default text value

Open color palette

Opens the color palette with options to add or change colors and alignment of the controls and also to

Additional Tools Icons

Tool

Function

Show/Hide Properties

Shows or hides the properties of a selected control

Hide all Hidden controls

Hides all the hidden controls while editing

Make all hidden controls visible while editing

Makes all the hidden controls visible while editing


103


APPENDIX B– Shortcut Keys The table below provides a reference guide for keyboard shortcuts for the Personas tools: User Action Add new check box button Add or update tooltip Add a group box Add an Html Viewer Add an image Add a label Add a launch button Add a script button Add a sticky note Add a text box Convert back to original control type Convert to combo box Convert to radio buttons Decrease Fontsize Increase Fontsize Delete prefill or control Group selected controls Hide selected controls Make field mandatory Make field optional Open color palette Redo last action Remove tooltip customization Add new rule Move rule down Move rule up Remove rule Save Button Tooltip Save Exit Button Tooltip Show/Hide Properties Undo last action Ungroup selected controls Make selected controls visible Add new user action Remove user action Move user action down Move user action up Move Backward Bring Forward


Shortcut Keys Ctrl+Alt+N , Ctrl+Alt+7 Ctrl+Alt+L Ctrl+Alt+N , Ctrl+Alt+4 Ctrl+Alt+N , Ctrl+Alt+9 Ctrl+Alt+N , Ctrl+Alt+8 Ctrl+Alt+N , Ctrl+Alt+5 Ctrl+Alt+N , Ctrl+Alt+2 Ctrl+Alt+N , Ctrl+Alt+3 Ctrl+Alt+N , Ctrl+Alt+1 Ctrl+Alt+N , Ctrl+Alt+6 Ctrl+Alt+T , Ctrl+Alt+B Ctrl+Alt+T , Ctrl+Alt+C Ctrl+Alt+T , Ctrl+Alt+R Ctrl+(-) Ctrl+(+) Delete Ctrl+Alt+G Ctrl+Alt+H Ctrl+Alt+M Ctrl+Alt+O Ctrl+Alt+C Ctrl+Y Ctrl+Alt+J Insert Ctrl+Down Ctrl+Up Delete Win+S Win+Shift+S Ctrl+Alt+P Ctrl+Z Ctrl+Alt+U Ctrl+Alt+S Insert Delete Ctrl+Down Ctrl+Up Ctrl+PageDown Ctrl+PageUp

104


APPENDIX C– Property window The table below is a reference with the list of properties available for each control and their descriptions.

Property

Editable

Description

Common Index TreeIndex

No No

ZIndex

Yes

TabIndex ToolTip IsFrontEndOnly

Yes Yes No

Index of the control in the children list Index of the control in the control's tree (When traversing control tree from root to bottom, from left to right) Shows layer index for specific screen element. The higher the number, the higher the screen element is on the screen. Defines the tab ordering on the screen. Contains the tool tip for the specific field. Has control a back-end counter part

Basic Control IsEnabled

Yes

IsAvailable IsFocused Visibility

No No Yes

Standard enabled state for GUI control. Disabled control cannot be edited or interacted with. And it's visual state changes. Is control located on the top-most modal dialog Is control focused Shows whether the field is visible or not.

Position and Size Left Top Width Height MinWidth MinHeight

Yes Yes Yes Yes Yes Yes

Defines position on the screen. Defines position on the screen. Defines width of the control Defines height of the control Defines minimal width of the control (cannot shrink beneath it) Defines minimal height of the control (cannot shrink beneath it)

X1 X2 Y1 Y2 Title Title TitleToolTip TitleIconId

Yes Yes Yes Yes

Defines position at the screen (used for Line control) Defines position at the screen (used for Line control) Defines position at the screen (used for Line control) Defines position at the screen (used for Line control)

Yes Yes Yes

TitleIconToolTip

Yes

Title of screen element Tool tip of title element Icon of the title element (e.g. TableView, GridView column can have title with icon) Tooltip of the icon title element

Coordinates


105


Grid RowIndex ColumnIndex ColumnId RowCount ColumnCount FixedColumnCount

No No No No No Yes

FixedRowCount

Yes

RowSelectionType ColumnSelectionType CellSelectionType IsBoxSelectionMode

No No No No

HasTitleBar HasColumnHeader

Yes Yes

HasRowHeader

Yes

ShowHorzLines ShowVertLines ResizableColumns ResizableRows IsCsvExportAllowed

Yes Yes No No Yes

IsCachingAllowed

Yes

IsCachingEnabled

No

IsCachable

Yes

Index of the row to which control belongs Index of the column to which control belongs Unique column identifier Number of rows Number of columns Number of fixed columns (TableView, GridView - columns that cannot be scrolled horizontally and are always visible) Number of fixed rows (TableView, GridView - rows that cannot be scrolled vertically and are always visible) Row selection type (None,Single,Multi) Column selection type (None,Single,Multi) Cell selection type (None,Single,Multi) Indicates if Box selection mode is enabled (Selection on cell causes whole row to be selected) Show/ Hide Title bar Is column header visible (e.g. Some GridView's do not have column header ) Is row header visible (e.g. Some GridView's and TableView's do not have row selectors) Indication whether horizontal lines are shown Indication whether vertical lines are shown Is it possible to resize table columns Is it possible to resize table rows Is table data export to CSV is possible (for GridView and TableView) Is control caching is switched on for current control (GridView, TableView, TabControl) Is control caching enabled (can be temporary disabled when control cache cannot be updated) Is specified control should be included in the parent control's cache (used for TabControl to disable caching for specified TabItems)

Miscellaneous OrderNumber

Yes

Text TextToolTip

Yes Yes

IsReadOnly

Yes

Used to calculate rendering sequence for control children. E.g. OrderNumber can be used to change order of the toolbar children or TableView,GridView columns Text associated with the control ToolTip that is shown on the Text associated with the control Is control editable

AlignmentRight

Yes

Is control Right aligned (content alignment)

MaxLength

No

Maximum text length used for TextBox control

IsOutputField IconRight

No Yes

Is TextBox an output field (not editable, without border) Defines the position of the icon relative to the text


106


IconId

Yes

OnIconId

Yes

IconToolTip

Yes

ProportionalFont FontFamily FontSize FontWeight FontStyle TextDecoration TextAlignment IsFlushing

Yes Yes Yes Yes Yes Yes Yes No

IsSelected

Yes

IsSelectable ValueSet

No No

ValueSetDelta

No

RadioGroupId

No

Url Stretch

No Yes

IsHighlighted

Yes

IsChecked

Yes

IsClickable IsCurrent

No Yes

IsHotspot

No

Deleted

No

IsConfigurable

No

Tooltip for the icon associated with the control (control can have different tooltips for icon and for text) Is font proportional (as opposed to monospaced) Font family name that is used for the control Size of the font Silverlight font weight (enum Normal,Bold) Silverlight font style (enum Normal,Italic) Silverlight text decoration (enum None,Underline) Alignment of the text (Left,Right,Center,Justify) Does user action on the control causes refresh (in the back-end) of the whole screen. E.g. If check action on the check box or select item action on the combo box Is control selected (e.g. GridViewRow, TableTreeViewNode) Is it possible to select the control Technical object that contains collection of key value pairs and some other information for ComboBox Technical object that contains information about changes made to ValueSet object. Created when ComboBox items are edited using Editor Radio button group id. Radio buttons with equal group ids are considered of the same group. Resource URL (Image content, HTML page) Indicates how image should be stretched (None,Fill,Uniform,UniformToFill) Indicates whether text of the Label or TextBox control is highlighted. (e.g. Control can be highlighted when invalid data was entered) Indicates whether control is checked (CheckBox,RadioButton) Does control support back-end click action Indicates whether specified control from the collection is currently selected (GridView,TableView cell) Specifies whether label should work as link (underlined and clickable) Technical information for Personas client. Is control deleted. Does TableView supports Config button

IsContextMenuAvailable

No

Indicates whether control has a context menu

IsFixedSize

No

Value

No

RowSpan ColumnSpan

No No

Indicates whether scrollable container has fixed size (defined by Width and Height properties) Additional string value associated with a control. E.g. For HTML viewer it is URL. Table cell row span Table cell column span


Defines the icon shown in buttons. Ids defined in transaction ICON Defines icon id that is used when mouse is over the button

107


Id FieldId IsMinimized Name

No No Yes No

Id of the control Id of the input field Is Sticky Note control in minimized state Name of the control

BackImage BackImageXAlignment

Yes Yes

Defines URL of the background image of the container Describes how background image is aligned horizontally in a container

BackImageYAlignment

Yes

Describes how background image is aligned vertically in a container

BackImageStretch

Yes

Describes how background image is resized to fill its allocated space

BackColor

Yes

Defines background color of a control.

ForeColor BorderColor ConditionalRules

Yes Yes Yes

Defines foreground color of a control (text color). Defines border color of a control. Defines conditional rules object for a control. Technical information should not be editable. Is set by editor when rules are created for a control.

TreeElementStyleInfo

Yes

TreeElementAlignment

No

"Defines style of a tree element (Node,Item). SAP ABAP style. public enum TreeElementStyle { Inherited = 0, Default = 1, Intensified = 2, Inactive = 3, IntensifiedCritical = 4, EmphasizedNegative = 5, EmphasizedPositive = 6, Emphasized = 7, ColumnHeading = 8, ColumnKey = 9, ColumnGroup = 10, }" Defines alignment of the tree element (Node, Item). Left, Right, Center, Auto

Formatting

Tree

Scroll VertScrollPosition VertScrollSize VertScrollExtent HorzScrollPosition


No No No No

Defines position of the vertical scroll bar Defines vertical scroll bar size Defines visible extent of the vertical scroll bar Defines position of the horizontal scroll bar

108


HorzScrollSize HorzScrollExtent

No No

Defines horizontal scroll bar size Defines visible extent of the horizontal scroll bar

No No

ABAP program name ABAP screen number

VKey Accelerator Validation IsNumeric IsRecommended

No No

Virtual key code Item accelerator character

Yes Yes

IsRequired

Yes

Is associated text is of numeric type Indicates whether input field should display recommended input icon Indicates whether user input is required for specified field. It is not possible to leave a current screen if at least on required field is not entered

Screen ScreenProgram ScreenNumber Main Menu

Tabstrip TabRows

No

Number of TabControl tab item header rows

Yes Yes Yes

Indicates whether associated text has Bold style Indicates whether associated text has Underlined style Indicates whether associated text has Italic style

HorizontalAlignment

Yes

VerticalAlignment

Yes

IsLookupSupported

No

Indicates where an element should be displayed on the horizontal axis relative to the allocated layout slot of the parent element (Left, Center, Right, Stretch). Describes how a child element is vertically positioned or stretched within a parent's layout slot (Top, Center, Bottom, Stretch). Indicates whether input field supports value lookup feature (F4,Lookup Popup)

IsLocalHistoryEnabled

Yes

MaxNumberOfHistoryEntries

Yes

Font IsBold IsUnderlined IsItalic Alignments

Indicates whether input field local history is enabled (Previously entered values can be accessed using UP,DOWN arrow keys) Defines maximal number of input field local history entries that are stored in local storage

ToggleButton IsUncheckSupported


No

Condition to check whether uncheck state is supported for toggle button

109


Toolbars HasStaticMenu

No

Has toolbar button a static context menu (Do not required back-end request to get it)

WordWrapModeInfo

No

WordWrapPosition

Yes

ScrollPos Modified SelectionStartLine SelectionStartColumn SelectionEndLine SelectionEndColumn ToolbarVisible StatusBarVisible StatusBarText

No No No No No No No No No

Defines word wrap mode (NoWrap, Wrap, WrapAtPosition) Character position at which word wrap is performed. Only relevant in WrapAtPosition word wrap mode. Editor's scroll position. Not used. Is editor's content modified Index of the top-most line of the selection Index of the left-most character in the first selection line Index of the bottom-most line of the selection Index of the right-most character in the last selection line Indicates whether toolbar visible Indicates whether status bar visible Text that is displayed in the status bar

Yes No

Control has a 3D border Field for information only

No Yes

Is image is visible Defines alternative tooltip for the Image control. Alternative tooltip is used when there is no tooltip from back-end.

No No No No No No No No No No No No No No No

First year of the calendar Last year of the calendar Today's date First date of the calendars visible range Last date of the calendars visible range First selection date Last selection date First day that can be selected in the week Last day that can be selected for the week Focused date Is date picker control visible Date format of the date picker control Selected date in the date picker Field for information only Is week number visible

TextEditor

HtmlControl Has3DBorder Headers ImageControl IsImageVisible AltText

Calendar BeginYear EndYear Today FirstVisibleDate LastVisibleDate FirstSelectedDate LastSelectedDate WeekFirstSelectableDay WeekLastSelectableDay FocusedDate ShowDatePicker DatePickerDateFormat DatePickerDate DatePickerFocusField ShowWeekNr


110


Date

No

Calendar cell date string

FieldType MaxHitsField ValueSizeLimit HighValue LowValue

No No No Yes Yes

Sign Operator

Yes Yes

Search criteria input field type Is this a max hits entry fields Maximal length of input field text Defines low value (first operand) of the search condition Defines high value (second operand) of the search condition Defines sign of the condition Defines operator of the search condition

Search Control

ComboBox ShowKeys

Yes

Is ComboBox item keys should be visible (Each ComboBox item consists of key value pair)

Yes

Technical object that contains information about scripted actions that are assigned to specified control.

ControlReferences

Yes

PushOnEnter PushOnClick

Yes Yes

Technical object that provides information about control references Will execute a script defined by Will execute a script defined by

Scripting UserActions Referenced controls


111

SAPUX - SAP Screen Personas 2.0 Development

Recommend Documents