Skip to Content

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

/wp-content/uploads/2016/05/2016_04_11_1203_958390.png

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. *”———————————————————————-
  10. TYPES: BEGIN OF insert,
  11.   timestamp type timestamp,
  12.   progname type char8,
  13.   screen type char4,
  14.   x type char4,
  15.   y type char4,
  16. END OF insert.
  17. data ls_insert TYPE insert.
  18. GET TIME STAMP FIELD ls_inserttimestamp.
  19. ls_insert-progname = iv_progname.
  20. ls_insertscreen = iv_screen.
  21. ls_insert-x = iv_x.
  22. ls_insert-y = iv_y.
  23. INSERT INTO zheatmaps VALUES ls_insert.
  24. 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. *”———————————————————————-
  10. SELECT * INTO TABLE et_coordinates FROM zheatmaps WHERE PROGNAME = iv_progname AND screen = iv_screen.
  11. ENDFUNCTION.

Now go to the /personas/admin

transaction and select the FM whitelist

/wp-content/uploads/2016/05/2016_04_11_1213_958445.png

And add the function modules.

/wp-content/uploads/2016/05/2016_04_11_1214_958446.png

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

/wp-content/uploads/2016/05/2016_04_11_1219_958447.png

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

  1. // First capture the program name and screen number
  2. var progname = session._private.props()._parent.children[0].children[0].properties.ScreenProgram.toString();
  3. var screenNo = session._private.props()._parent.children[0].children[0].properties.ScreenNumber.toString();
  4. // Generate the RFC that we are going to call to get all the coordinates for the heatmap
  5. var rfc = session.createRFC("ZFM_HEATMAPS_GEN");
  6. rfc.setParameter("IV_PROGNAME", progname);
  7. rfc.setParameter("IV_SCREEN", screenNo);
  8. rfc.requestResults(JSON.stringify(["ET_COORDINATES"]));
  9. rfc.send();
  10. var coordinates = JSON.parse(rfc.getResult("ET_COORDINATES"));
  11. //Fetch the heatmap
  12. $.getScript("https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js").done(function() {
  13. // minimal heatmap instance configuration
  14. var heatmapInstance = h337.create({
  15.   // only container is required, the rest will be defaults
  16.   container: document.getElementById("webguiPage0")
  17. });
  18. //The points are our click coordinates
  19. var points = [];
  20. $.map(coordinates, function(el) {
  21. var point = {
  22. x: el.X,
  23. y: el.Y,
  24. value: 10
  25.   };
  26.   points.push(point);
  27. });
  28. var max = points.lentgh;
  29. var data = {
  30.   max: max,
  31.   data: points
  32. };
  33. heatmapInstance.setData(data);
  34. });

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

/wp-content/uploads/2016/05/2016_04_11_1224_958448.png

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.

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

  1. pradeep kumar Akula

    Hi Jakob, I tried the code that was given and I do not see my RFC being triggered at the first stage .I think there is some issue with the first script code. Please suggest . Best regards, pradeep.

    (0) 

Leave a Reply