Using heatmaps in Screen Personas part 2

[Former Member]

Hello again,

You have hopefully read my blog:Using heatmaps in Screen Personas part 1

This blog will give you the how on how to get the heatmaps working in Screen Personas

Alright let's get started. I created a little recipe list for what we need:

• Table to store the coordinates.
• Function Module to capture the click coordinates.
• Function Module to fetch the click coordinates.
• Whitelist the Function Modules used in the personas admin transaction.
• Scripts in screen personas to capture clicks.
• Script in screen personas to present the clicks in a transaction.

I have already posted the needed scripts on github and you can also download a zip file with the backend content.

Use lars.hvam's great tool AbapGit

to upload it.If you want to do it manually, then we need the following:

Z-table to store the click coordinates

Function module to capture click coordinates. Remember to RFC enable it.

1. FUNCTION ZFM_HEATMAPS.
2. *"----------------------------------------------------------------------
3. *"*"Local Interface:
4. *"  IMPORTING
5. *"    VALUE(IV_PROGNAME) TYPE  CHAR8
6. *"    VALUE(IV_SCREEN) TYPE  CHAR4
7. *"    VALUE(IV_X) TYPE  CHAR4
8. *"    VALUE(IV_Y) TYPE  CHAR4
9. *"----------------------------------------------------------------------
12. TYPES: BEGIN OF insert,
13.   timestamp type timestamp,
14.   progname type char8,
15.   screen type char4,
16.   x type char4,
17.   y type char4,
18. END OF insert.
20. data ls_insert TYPE insert.
23. GET TIME STAMP FIELD ls_insert-timestamp.
24. ls_insert-progname = iv_progname.
25. ls_insert-screen = iv_screen.
26. ls_insert-x = iv_x.
27. ls_insert-y = iv_y.
29. INSERT INTO zheatmaps VALUES ls_insert.
32. ENDFUNCTION.

Function Module to fetch the click coordinates. Remember to RFC enable it.

1. FUNCTION ZFM_HEATMAPS_GEN.
2. *"----------------------------------------------------------------------
3. *"*"Local Interface:
4. *"  IMPORTING
5. *"    VALUE(IV_PROGNAME) TYPE  CHAR8
6. *"    VALUE(IV_SCREEN) TYPE  CHAR4
7. *"  TABLES
8. *"      ET_COORDINATES STRUCTURE  ZHEATMAPS
9. *"----------------------------------------------------------------------
12. SELECT * INTO TABLE et_coordinates FROM zheatmaps WHERE PROGNAME = iv_progname AND screen = iv_screen.
15. ENDFUNCTION.

Now go to the /personas/admin

transaction and select the FM whitelist

And add the function modules.

NB: If you want to use this for WDA, then you need to add them with that framework as well.
Now we are done for the backend, easy right?Go to the webgui and access the transaction you want to track.

Create a flavor and go to the scripting engine.Create a new script and paste the following code

1. // Add event listener to the click event
2. window.addEventListener("click", function(e) {
3. // Load the custom function module
4. var rfc = session.createRFC("ZFM_HEATMAPS");
5. // Capture the screen program. Couldn't use the session.info.program parameter
6. rfc.setParameter("IV_PROGNAME", session._private.props()._parent.children[0].children[0].properties.ScreenProgram.toString());
7. // Capture screen number to we can filter out the right heatmap
8. rfc.setParameter("IV_SCREEN", session._private.props()._parent.children[0].children[0].properties.ScreenNumber.toString());
9. //Capture X and Y coordinates.
10. rfc.setParameter("IV_X", e.clientX.toString());
11. rfc.setParameter("IV_Y", e.clientY.toString())
12. rfc.send();
13. });

Now enable this script on the onload event in screen personas

Now create another flavor to visualize the heatmaps.In this flavor go to the scripting engine once more and add the following code

// First capture the program name and screen number

var progname = session._private.props()._parent.children[0].children[0].properties.ScreenProgram.toString();

var screenNo = session._private.props()._parent.children[0].children[0].properties.ScreenNumber.toString();



// Generate the RFC that we are going to call to get all the coordinates for the heatmap

var rfc = session.createRFC("ZFM_HEATMAPS_GEN");

rfc.setParameter("IV_PROGNAME", progname);

rfc.setParameter("IV_SCREEN", screenNo);

rfc.requestResults(JSON.stringify(["ET_COORDINATES"]));

rfc.send();

var coordinates = JSON.parse(rfc.getResult("ET_COORDINATES"));



//Fetch the heatmap

$.getScript("https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js").done(function() {



// minimal heatmap instance configuration

var heatmapInstance = h337.create({

  // only container is required, the rest will be defaults

  container: document.getElementById("webguiPage0")

});



//The points are our click coordinates 

var points = [];



$.map(coordinates, function(el) {

var point = {

x: el.X,

y: el.Y,

value: 10

  };

  points.push(point);

});

var max = points.lentgh;

var data = {

  max: max,

  data: points

};

heatmapInstance.setData(data);

});

Now go to edit mode and create a script button and add add the script to it.

And now the hard work is done!

All you need now is to add the capturing flavor to your users and then start recording their movements in the GUI.