skip to Main Content

SAP Screen Personas

At Mindset, we’re big fans of Fiori. As ERP user experience technologies go, it’s the Cadillac to others’ Pintos. But just because we’re fans doesn’t mean we can’t do other things! We’re not interested in one-trick-ponyhood. When our customers come to us for UX solutions, we bring a full suite of technologies to bear. Also, sometimes that means Fiori isn’t the exact fit for a problem.

Enter SAP Screen Personas.

Where Fiori/SAPUI5 come to the table with a new user interface paradigm, Personas takes your existing SAP t-codes and allows you to refine them without losing functionality. Further, if you have a clunky SAP GUI screen, Personas gets the job done without hassle. Additionally, it’s so light on the hassle that a quick example is in order. This example will also feature some custom coding. How could I even bear to call myself a developer if I wasn’t constantly tweaking stuff with code?

  • Firstly, start up your Personas environment at http(s)://<your sap web gui system>/sap/bc/personas.
  • Secondly, enter the transaction with screen(s) you want to change. In our case, we’ll make an example of XD03 (customer display).
  • Thirdly, enter a customer number in the initial screen. We’ll leave that screen alone and focus on the customer detail display.
  • When the detail display loads up, find the blue bar at the top of your web screen. If you hover over it, you’ll see the Personas “P” drop down and you can click it. That will take you to the Personas Flavor editor.
  • Finally, click on “Create New Flavor”. Enter something descriptive for what you’ll be doing.
  • When you’re in the Flavor editor, you can easily start hiding and rearranging the screen elements. However, for our case of really trimming down the screen, I like to select an entire set of items in a row and choose the “Hide” button.
  • You can also rearrange stuff that’s in the screen tabs. I wanted to create a very simple customer info screen, so I looked at only the address pane. Additionally, you can grab sections of the control and move them out of the tab section. Further, see here how I moved them to the right side.
  • So I hid the entire tab area on the left and then moved the elements I pulled out back over to the left. However, note that it’s very easy to use the numeric position indicators in the main menu to the right of the “Group Objects” and “Align Objects” buttons.

 

  • When you’ve hidden and arranged everything you want, you can add an HtmlViewer control to the screen as well. Use the “Insert” menu and choose HtmlViewer. I positioned it right below our set of controls that we rearranged. It’s the big gray area under the scroll bar:

 

  • I also changed the description of the application, just so users would know they’re using the pared-down version of the screen. Double-click on the title bar and you can enter another description. This one went from “Display Customer: General Data” to “Display Customer: Quick Data”.
  • Trying out the screen real quick before I add my custom code. Note the huge reduction in active screen fields. The HtmlViewer is not visible because there’s nothing in it yet – that’s what we’ll be adding.
  • Cool – our screen is very slimmed-down. Let’s add some context information to it – stuff that isn’t even there in the original SAP screen. I want to see the last ten orders that this customer put in to my company.
  • First step is create an RFC-enabled function module. For our demo purposes it’s a super-easy FM – select the latest 10 orders for this customer. Yeah, I know there’s no error handling or anything. It’s a demo, people!

 

FUNCTION zcustomer_orders_webrfc.

 

*”———————————————————————-


*”*”Local Interface:


*”  IMPORTING


*”     VALUE(IV_CUSTOMER) TYPE  KUNNR


*”  TABLES


*”      T_ORDER STRUCTURE  VBAK



*”———————————————————————-

 

 

  DATA: lv_kunnr     TYPE kunnr.
  CALL FUNCTION ‘CONVERSION_EXIT_ALPHA_INPUT’
    EXPORTING
      input  = iv_customer
    IMPORTING
      output = lv_kunnr.
  SELECT * FROM vbak UP TO 10 ROWS
    INTO CORRESPONDING FIELDS OF TABLE t_order
    WHERE kunnr = lv_kunnr
    ORDER BY vbeln DESCENDING.
ENDFUNCTION.
  • Make sure it’s RFC-enabled and activate it.
  • Back in Personas, navigate back to the Flavor and open the “Scripting” menu. Right side of this picture:
  • Personas comes with a cool API that’s exposed in javascript: you can call RFC functions through it. The scripting interface also lets you know which screen elements you’re going to be controlling and easily adds them to the script. Further, click on the little mouse pointer on top of the square icon on the right hand side of the screen to be able to click on a screen element and add it to your code.
  • I mentioned that we’ll be using the HtmlViewer object to display our RFC data. See the below listing for how to do that in a basic way. Note that I’m calling the RFC, getting the results, building an html string, and adding that raw html to the HtmlViewer object.

 

var htmlTable = session.findById(“wnd[0]/usr/htmlViewerPersonas_1447099196504”);

 

 

var customer = session.findById(“wnd[0]/usr/subSUBKOPF:SAPMF02D:7001/ctxtRF02D-KUNNR”).text;
var rfc = session.createRFC(“ZCUSTOMER_ORDERS_WEBRFC”, ”);
rfc.setParameter(“IV_CUSTOMER”, customer);
rfc.requestResults(JSON.stringify([“T_ORDER”]));
rfc.send();
var orders = JSON.parse(rfc.getResult(“T_ORDER”));
var finalHtml = “<table style=’font-family:Arial, Helvetica, sans-serif;font-size:12px;”;
finalHtml += “border:1px solid lightgrey;’>”
finalHtml += “<tr><th style=’text-align:right;font-size:16px’>Order</th>”;
finalHtml += “<th style=’text-align:right;font-size:16px’>Sales Org</th>”;
finalHtml += “<th style=’text-align:right;;font-size:16px’>Dist. Channel</th>”;
finalHtml += “<th style=’text-align:right;font-size:16px’>Net Value</th></tr>”;
for(var i = 0; i < orders.length; i++){
finalHtml += “<tr style=’text-align:right;’>”;
finalHtml += “<td style=’width:80px;border:1px solid lightgrey;color:#666′>” + orders[i].VBELN + “</td>”;
finalHtml += “<td style=’width:80px;border:1px solid lightgrey;color:#666′>” + orders[i].VKORG + “</td>”;
finalHtml += “<td style=’width:80px;border:1px solid lightgrey;color:#666′>” + orders[i].VTWEG + “</td>”;
finalHtml += “<td style=’width:80px;border:1px solid lightgrey;color:#666′>” + ‘$’ + orders[i].NETWR + “</td>”;
finalHtml += “</tr>”;
}
finalHtml += “</table>”
htmlTable.content = finalHtml;
  • However, please note that you can use the “Execute” button to test out your script. Further, if you’ve done things correctly, when you press it you’ll see the information pop up in the screen.
Finally, that’s how you can quickly and easily trim down and jazz up your SAP GUI screens. With the scripting libraries you can actually start to do some serious stuff. However, even just removing and rearranging screens will get you a lot of value for not a lot of work.

If you are interested in viewing similar articles, visit our blog, here

View our LinkedIn, here

Paul Modderman loves creating things and sharing them. He has spoken at SAP TechEd, multiple ASUG regional events, ASUG Fall Focus, Google DevFest MN, Google ISV Days, and several webinars and SAP community gatherings. Paul's writing has been featured in SAP Professional Journal, on the SAPinsider blog, and the popular Mindset blog. He believes clear communication is just as important as code, but also has serious developer chops. His tech career has spanned web applications with technologies like .NET, Java, Python, and React to SAP soutions in ABAP, OData and SAPUI5. His work integrating Google, Fiori, and Android was featured at SAP SAPPHIRE. Paul was principal technical architect on Mindset's certified solutions CloudSimple and Analytics for BW. He's an SAP Developer Hero, honored in 2017. Paul is the author of two books: Mindset Perspectives: SAP Development Tips, Tricks, and Projects, and SAPUI5 and SAP Fiori: The Psychology of UX Design. His passion for innovative application architecture and tech evangelism shines through in everything he does.

Back To Top