Skip to Content
Author's profile photo Murali Kothapalli

Magic of HTML with Screen Personas

We all have read some in-depth articles from our Screen Persona guru Steve Rumsby , and other contributions from experts Sebastian Steinhauer, Tamas Hoznek, Tobias Queck, Cheryl Sutton, Manu Kapur and other community members.

In his latest article Steve touched upon the topic of tables in Personas: Creating a custom table in Personas and Personas v3, JavaScript and tables

I really wanted to share with you an approach that we adopted. I used to be a web developer in my previous life šŸ˜‰ before SAP, so I thought we could use the Screen Persona HTMLControl to our advantage by feeding the HTML to it from an ABAP function module.

How this approach is different is that, the HTML table and related javascript is built in ABAP and there is very minimal coding in Persona itself.


Here is how we did it.

Login to personas and to the basic screen


Create a new copy as “Material Search”

Select all the visible frames and hide them, after hiding it should look like below



Add 2 textboxes, a script button, and an image icon


We will use the top textbox as the search box, and the bottom for filter

The standard script button will be needed later and is invoked indirectly by clicking the search Image Icon.

Before that we need to build an RFC enable function module, (see–simply-calling-an-rfc-from-javascript) I named mine as Z_MATLOOKUPRFC




Here is a bit of code to validate the parameters inside the function module.


Once the function module is built and ready. We are ready to use it in the Screen Persona front end .

Before that make a note the URL below


You need to  replace <SERVERNAME> with your own server name  and change port 8000 to something else, if needed

Once you have a valid url, go back to the Screen Persona, a New HTML control


In the Url text box, paste the URL http://<SERVERNAME>:8000/sap/bc/webrfc?_FUNCTION=Z_MATLOOKUPRFC&_Name={1}&_Plant={2}

Remember to change  the <SERVERNAME> to your servername


Hit the  Plus key and click on the First textbox, hit + key again and click on the second textbox.

Once you are done, it should look like this


Move the HTML control around and place it next to text box and stretch the box big enough to stretch across the screen.

Before hiding the textbox2 and script button, we need to add one line of script to the script button

Double click the “material search” script button , in the dialog , click the + button and select Refresh HTMLViewer from the dropdown


Click the Arrow Icon and selec the HTMLControl you previously added.and select checkmark to confirm the entry. The finished dialog will look like this.


To hookup the Image Icon to invoke the script button,/wp-content/uploads/2014/12/blog1_pic17_608566.png

First select the script button and click on properties window and left click on the control id (left click copies the control id to the clipboard)


Now select the image icon, and click on properties, scroll down to a property “PushOnClick” and paste the  script control id here, that’s it, now whenever you click image it should fire the script button. Now you can click on Scriptbutton and Hide. Hit save and Exit.

Now the screen runtime mode should display something like this.


Let’s type “hex bolt” in the text and click on the searchicon, here is how the results will appear.


Once you sprinkle a bit of javascript and CSS in the HTML output, you can even produce outputs like these


To get the same level of detail that you saw above from MM03 t-code would take a typical user at least are collected from about 6 tabs in the MM03



The WebRFC function module that we wrote earlier does the heavy lifting of returning these details by doing some database queries, it also responds to the simple search criteria by combining these Search dialogs as well.


This solution provided our users a simple and quick way to search the materials, before they proceed their next step in their workflow. We built this to reduce the number of clicks/steps to boost productivity, keeping up the SAP Screen Persona spirit.

Hope you liked it šŸ™‚

Thanks to the community, I learnt a lot from you all.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      This is awesome Murali! It's so amazing when I see developers still finding new and creative ways to push the boundaries of Personas capabilities. I remember meeting you last year at ASUG AZ when you were just getting started, and it looks like you are making great progress! Congrats to you and your team.

      ~ Cheryl

      Author's profile photo Murali Kothapalli
      Murali Kothapalli
      Blog Post Author

      Thank you Cheryl.

      Author's profile photo Former Member
      Former Member

      Your article is very descriptiveĀ which is very useful for all and I have used all procedure which is given in this article.Ā  The magic of HTML is applied in my own projects.I see this onĀ Verizon Routers Customer ServiceĀ Ā