SAP Screen Personas Flavor with Dynamic URL List from Database via RFC

In this SAP Screen Personas tutorial, I want to demo a Personas flavor which reads data from SAP database table using RFC remote-enabled function module and displays URL data on label controls dynamically. The tutorial shows how script developers will use Javascript array and JSON methods, loops and session variables in their developments for implementing this requirements using SAP Screen Personas flavor.

Create Web Links on SAP Screen Personas Flavor Dynamically

Before continue with additional steps let's define onLoad event and javascript function for the SAP Screen Personas flavor we have created. In this onLoad Javascript event, I plan to assign text and target URL properties dynamically to a set of label controls by reading URLs using an RFC remote-enabled ABAP function module.

Click on an empty space on flavor, go to "Insert" menu on the Flavor Editor menu.
Click on Screen Events dropdown where custom Javascript functions can be defined on various page events including:
onAfterRefresh,
onBeforeRefresh,
onEnter,
onLoad,
onResize

Create a new script for onLoad event

attach onLoad event to SAP Screen Personas flavor

We will edit source codes of onLoad event later in the following sections of this tutorial.

Now continue with editing the flavor.
Insert a Label control on your SAP Screen Personas flavor.

add new label control on SAP Personas flavor

Highlight recently added label control and attach a script function to onClick event of the control.
To do this, select label on flavor layout.
On Personas editor, switch to Insert tab.
Using Script Events create a new Javascript function for onClick event.

create onClick Javascript event for label control

I have named the sample onClick event created for this SAP Screen Personas tutorial as launchURL

Now we are ready to add new labels on our Personas flavor. Just to gain time, you can clone the label control to create a number of new labels.

To clone a control, select the source control then switch to Insert tab.
You will see Clone Control on the far-right part of the menu items.

clone controls on SAP Screen Personas flavor

By cloning the label control, I have 5 labels on my sample flavor at the end.

label controls on flavor editor for dynamic URL creation

ABAP Repository Object for Links

On ABAP Repository, create a SAP table for storing the links that you want to keep

SAP custom table for storing links and URL addresses

Here is the table structure I preferred to use for keeping link metadata for this SAP Screen Personas flavor.

MANDT MANDT CLNT 3
USAGETYPE INT2 INT2 5
URLTEXT CHAR100 CHAR 100
URL CHAR255 CHAR 255
SORTORDER INT2 INT2 5

Here are the links for this SAP Screen Personas tutorial's demo purposes

sample URL data for Personas demo

Create RFC Function Module

Next step for ABAP programmers is to create the RFC function module which will provide the URL list data to the UI where this information will be consumed and displayed using label controls.

Create a function module using SE37 transaction and mark remote-enabled function module option

create remote-enabled RFC function module

Programmers can use following ABAP source codes for the newly created RFC function module:


select * into table et_urls

from zsom_links where usagetype = 1

order by sortorder.

Code

ABAP RFC remote-enabled function module source codes

SAP Screen Personas Script Editor for Javascript Codes

Now switch to Script Editor. Using Script Editor, programmers will create the Javascript codes required to call RFC and read URL data and assign to label controls, etc.

Let's start with onLoad event Javascript codes.
When Personas flavor is loaded, onLoad Javascript event is triggered which executes script onLoad.

Please note that the RFC function name is "Z_URLLIST_CH".
The output parameter is named "ET_URLS" which returns the same data structure as the ABAP table repository object for links data.
Please add the RFC function name to the whitelist RFC list using the Personas Administrator transaction.
SAP Personas administrators can refer to tutorial add RFC Function Module to SAP Screen Personas FM Whilelist for details.

Following code calls RFC function from backend SAP system and stores the output table parameter into a local variable.
SAP Screen Personas developers can use following Javascript code block in their further developments easily.


var oRFC = session.createRFC("Z_URLLIST_CH");

oRFC.requestResults(["ET_URLS"]);

oRFC.send();

var _ET_URLS = oRFC.getResultObject("ET_URLS");

Code

The second part of the Javascript codes is creating the array of label control IDs named "links".
Here the problem is that, when you create your own flavor and add your own labels onto the flavor surface, you will have a different set of label ids.
So please update below code, with your own values.


var n = 5;

var links = new Array(n);

links[0] = "wnd[0]/usr/lblPersonas_151574201177120";

links[1] = "wnd[0]/usr/lblPersonas_151574229364081";

links[2] = "wnd[0]/usr/lblPersonas_151574609881754";

links[3] = "wnd[0]/usr/lblPersonas_151574609881780";

links[4] = "wnd[0]/usr/lblPersonas_151574613156066";

Code

session.utils.put method is used to create session parameters and store string values in these session parameters.
The first parameter to the session.utils.put() method is the session variable name, it is string.
And the second parameter is the value of the session variable which must have string data type.
Because I have some array data or tabular data, I preferred to use JSON.stringify() in Javascript to convert array value into string.

I keep the links which has the IDs of label controls and the data from SAP database table in session variables. The reason is that when the users click on a label control, the onClick event will be triggered and I'll use these session variables there too.

session.utils.log() can be used to test the results in Script Editor Log windows, so it is a tool to troubleshoot your Javascript code just like other debugging tools.

The first for loop Javascript code, enables SAP Screen Personas script developer to assign new text to each label in our links array object.
So after this code, on your flavor you will be able to see text coming from database table.

The second for loop which is in if clause alters the visibility property of labels which are left unassigned values.
Let's make it more clear, if you have 10 labels on the flavor, but only 8 URL is read from database table via RFC, the remaining 2 labels' visibility property is changed to hidden using .hide() method.

Here is the all Javascript code I used for onLoad event.


// onLoad



var oRFC = session.createRFC("Z_URLLIST_CH");

oRFC.requestResults(["ET_URLS"]);

oRFC.send();

var _ET_URLS = oRFC.getResultObject("ET_URLS");





var n = 5;

var links = new Array(n);

links[0] = "wnd[0]/usr/lblPersonas_151574201177120";

links[1] = "wnd[0]/usr/lblPersonas_151574229364081";

links[2] = "wnd[0]/usr/lblPersonas_151574609881754";

links[3] = "wnd[0]/usr/lblPersonas_151574609881780";

links[4] = "wnd[0]/usr/lblPersonas_151574613156066";





session.utils.put("ET_URLS", JSON.stringify(_ET_URLS));

session.utils.put("LINKS", JSON.stringify(links));



session.utils.log(JSON.stringify(_ET_URLS));



for (i = 0; i < _ET_URLS.length; i++) {

 if(links[i] != undefined) {

  session.findById(links[i]).text = _ET_URLS[i].URLTEXT;

 } else {

  session.utils.log("no label control for link" + i);

 }

}

if ( _ET_URLS.length < links.length ) {

 for (i = _ET_URLS.length; i < links.length; i++) {

  session.findById(links[i]).hide();

 }

}

Code

That's all for the onLoad event of our sample flavor in this tutorial.

SAP Screen Personas flavor onLoad script Javascript codes

Flavor editors will guess when a label is clicked, launchURL script is executed because we have already assigned onClick event to each label.
Here is the Javascript codes to be added in Script Editor to open the target URL in a new browser tab or window.

First, I read session variables using session.utils.get() method.
Then I parse string session variable values into an array structure using JSON.parse() Javascript method.

Flavor editors might have the following question in mind.
We have assigned the same launchURL event to all cloned label controls. So how we can distinguish which control is clicked on Personas flavor?
How script editors can seperate which flavor control triggered the script event?

To identify the flavor control which has triggered, launched or called the script event, Javascript developers can use source.id which returns the ID of the clicked control.
In fact, source.id or source object is an input object which is not seen as a parameter in your script events but exists there by definition of SAP Screen Personas script events.

When I query links array with the source.id I can get an index.
And using this index I can get the target URL address from the URLs array.

To open a web browser and display a predefined URL address is as easy as executing following Javascript command:
window.open(URLAddress,"_blank");


// launchURL



var _ET_URLS = session.utils.get("ET_URLS");

var links = session.utils.get("LINKS");



var arrLinks = JSON.parse(links);

var arrURLs = JSON.parse(_ET_URLS);



var labelId = source.id;

var ind = arrLinks.indexOf(labelId);

window.open(arrURLs[ind].URL,"_blank");

Code

Javascript codes to launch the web URL in a new browser tab for our demo SAP Screen Personas flavor.

open web URL in a new browser window in Javascript editor of SAP Screen Personas flavor

When you run and display the SAP Screen Personas flavor in display mode, the output of the screen will be as follows:

display links on SAP Personas flavor dynamically by reading from database

In this SAP Screen Personas tutorial, I wanted to demo how SAP Personas flavor editors and script editors can create links using label control and read target URL addresses from database tables using ABAP RFC function modules.
I hope you find this tutorial useful.