Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
Karol-K
Product and Topic Expert
Product and Topic Expert

Describes how to make user-dependent commentary with Portable Fragment Bookmarks. Basically, next show case what can you do with the portable fragment bookmarks.

Purpsose

Allow the user to save some comments on data, using the selection of crosstab or chart.

Animated App (click to animate)

The Concept

Portable Fragment Bookmarks can

  • be assigned to a "groupIdentifier" which allows selective load from data base
  • can store any type of fragments (and by this any content you can pack into a container)

This means, using very basic components - input fileld, text filed and panel we can create simple application-dependent and user-dependent commentary solution.

How to Start?

The main object in our application is:

  • a Croosstab - with activated selection option, here:

  • a Panel containing some components to implement an interaction for commentary

    • I) text "Add..." which just informs about the input (static one)
    • II) dynamic area which changes on selection - the selection information will be given there
    • III) a placeholder for commentary content, with scroll by local CSS... (as this part will be saved, better would be a CSS class)
    • IV) button for adding new comment on top
    • V) delete the complete comment on current selection (I do not want to be too restrictive here, I just delete the whole content...)

  • a Button "Commentary" just to show the panel...

On Selection in Crosstab

Prerequisite for this code (as it is not a generic function for all drill down states) : you know the query drilldown. Of course, you can rewrite the code with loops on dimensions, etc..

The logical description of the function:

  • ask crosstab for the selection...

  • we create a selection-specific group identifier and internalPattern (by binding the internalKeys)
  • set the selection information into the text filed (just for info)
  • ask for portablefragmentbookmarks on the groupIdentifier
  • loop on all bookmarks given byy the framework and check if the internalPattern is in description
  • if it is, load the bookmark - and this sets the commentary content on the prepared textfield
  • if not, clean up the text filed manually



  • we ask crosstab for the selection...



var characteristic1 = "0BC_PROD1";


var selection1 = CROSSTAB.getSelectedMember(characteristic1);




var characteristic2 = "0BC_PERS1";


var selection2 = CROSSTAB.getSelectedMember(characteristic2);




  • we create a selection-specific group identifier and internalPattern (by binding the internalKeys)



var internalKeyPattern = "| " + selection1.internalKey + "|" + selection2.internalKey;


var groupIdentifier = "COMMENTS_" + characteristic1 + "_" + characteristic2;




  • set the selection information into the text filed (just for info)



TEXT_SELECTION.setText(selection1.text + " and " + selection2.text);




  • ask for portablefragmentbookmarks on the groupIdentifier



var frBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(groupIdentifier);




  • loop on all bookmarks given byy the framework and check if the internalPattern is in description




var bookmarkId = "";



frBookmark.forEach(function(element, index) {


  if (bookmarkId == "") {


   var description = element.description;


 


   if(description.indexOf(internalKeyPattern) > -1) {


    // there is one.


    bookmarkId = element.id;


   }


  }


});




  • if it is, load the bookmark - and this sets the commentary content on the prepared textfield




if(bookmarkId != "") {


  Bookmark.PortableFragmentBookmark.loadBookmark(bookmarkId);


} else {




  • if not, clean up the text filed manually




  TEXT_COMMENT_CONTENT.setText("");


}



By this, every selection will lead to reload, and to check if there is a specific bookmark on this groupIdentifier / internalPattern.

Saving a Comment

Now, having a selection and user created content, the idea here is just to append it into the TEXT_COMMENT_CONTENT, which is part of the container saved in the bookmark.

The logical sequence..

  • again, check the current selection
  • create same groupIdentifier and internalKeyPattern (this could be externalized into global script functions)
  • check again in a loop if a bookmark already exists (to get the key for overwrite), also here the loaded key could be back-uped when loading the comment
  • append the text with "\n" for new line
  • save or overwrite the bookmark.


  • again, check the current selection



var characteristic1 = "0BC_PROD1";


var selection1 = CROSSTAB.getSelectedMember(characteristic1);



var characteristic2 = "0BC_PERS1";


var selection2 = CROSSTAB.getSelectedMember(characteristic2);




  • create same groupIdentifier and internalKeyPattern (this could be externalized into global script functions)



var internalKeyPattern = "| " + selection1.internalKey + "|" + selection2.internalKey;


var groupIdentifier = "COMMENTS_" + characteristic1 + "_" + characteristic2;




  • check again in a loop if a bookmark already exists (to get the key for overwrite)



if(selection2.internalKey != "")  {


  var frBookmark = Bookmark.PortableFragmentBookmark.getAllBookmarkInfos(groupIdentifier);



  var bookmarkId = "";




  • append the text with "\n" for new line



  TEXT_COMMENT_CONTENT.setText(APPLICATION.getInfo().dateNow + ": " + INPUTFIELD_COMMENT.getValue() + "\n" + TEXT_COMMENT_CONTENT.getText());



  frBookmark.forEach(function(element, index) {


  if (bookmarkId == "") {


   var description = element.description;


  


   if(description.indexOf(internalKeyPattern) > -1) {


    // there is one.


    bookmarkId = element.id;


   }


  }


  });




  • save or overwrite the bookmark.



  if(bookmarkId != "") {


  Bookmark.PortableFragmentBookmark.saveBookmark(groupIdentifier, PANEL_COMMENTARY_CONTENT, "", internalKeyPattern, "", bookmarkId);


  } else {


  Bookmark.PortableFragmentBookmark.saveBookmark(groupIdentifier, PANEL_COMMENTARY_CONTENT, "", internalKeyPattern, "");


  }



  INPUTFIELD_COMMENT.setValue("");


}


By this, all user comments can be saved. I have used the date for append, but this is up to you. you can also use user name, but this makes more sense when the bookmarks will be sharable (not in 1.4 release).

Example App (you can download the ZIP)

Release SCN_SIMPLE_COMMENTARY · KarolKalisz/DesignStudioBiAppRepository · GitHub

Have Fun!

4 Comments