Extending Comment Features with Scripting

Objective

After completing this lesson, you will be able to extend comment features with scripting.

Comments

Using Built-in Functionality to Add Comments

You can easily add comments in planning stories using the built-in functionality in SAP Analytics Cloud.

Comments can be added to:

  1. A cell in a data table using the built-in Add Data Point Comment option. If a cell already has comments, an indicator is displayed in the cell. Planners can view the comment by selecting the data cell.
  2. A separate column(s) in a data table. Only the latest comment is displayed in the comment column.

Viewing and finding relevant comments can be time consuming if comments are used extensively as you have to scroll to the end of the story to the comment column or click on each cell to view the comments.

Planning story with Comment column on left. Planning story with Data Point Comment on right.

Business Scenario: Extend Comment Features with Scripting

Watch this video to learn more about the team's requirements for extending comment features in a story with scripting allow for easier viewing and creation of comments.

The team values effective communication and collaboration and knows how critical it is for successful planning. They regularly document their planning assumptions as they work on forecasts. While they use both the comments column and data point comments, they wish it was easier to view, add, and delete comments. They also present their forecasts regularly to other teams in the company and have often forgotten to hide the comment indicator before sharing their screens!

After working with your colleague Frank to fully understand the business requirement for extending the comments features, you suggest creating:

  1. An Enable/Disable Comment Mode button that displays or suppresses the aqua green comment indicator in data cells.
  2. A text widget and button that allows planners to enter comments in an input field and use the Add Comment button to add them to the database. This includes a popup for an error message that will be displayed if the planner tries to add a comment without selecting a product group in the data table.
  3. A fixed area in the story to display comments by product group. This includes a radio button to select specific comments in order to delete them.
  4. A fixed area in the story to display the comment audit trail (who and when) information.
  5. A button to delete comments.
  6. A dropdown to display or add comments in the comment widget by product group.
Story with all extended commenting features numbered from 1 to 6 that corresponds with the numbered list above.

Code Used in this Scenario

In the following examples, you can see the code used in the scenario and exercise to extend the planning story's comments features.

Enable/Disable Comment Mode

The following script is added to BTN_EnableComment - onClick to display/hide the comment indicators in a story:

Code Snippet
1
Application.setCommentModeEnabled(!Application.isCommentModeEnabled());
Code for enabling comment mode using a button.

Read Comments

The following script is added to script object SO_Comments - readComments script object to allow it to:

  • Clear out the radio button group RB_CommentID and the text field TXT_Display_Comments if a non-data cell is selected in the table.
  • Update the radio button group RB_CommentID with comment(s) ID and text for the selected data cell.
  • Display the comment text, creation time, and the created-by information in the textbox TXT_Display_Comments.
Code Snippet
12345678910111213141516171819
var sel = TBL_Planning_Enabled.getSelections(); var cellSelected = TBL_Planning_Enabled.getDataSource().getData(sel[0]); if (cellSelected === undefined) { RB_CommentID.removeAllItems(); TXT_Display_Comments.applyText(" "); } else if (sel.length > 0) { var comments = TBL_Planning_Enabled.getDataSource().getComments().getAllComments(sel[0]); RB_CommentID.removeAllItems(); TXT_Display_Comments.applyText(" "); for (var i=0;i<comments.length; i++){ var comment = comments[i]; RB_CommentID.addItem(comment.commentId, comment.text); var comments_text = TXT_Display_Comments.getPlainText() + "\n" + "Created by :" + comment.createdBy.displayName + "\n" + "Created at :" + comment.createdAt + "\n" + "Comment :" + comment.text; TXT_Display_Comments.applyText(comments_text); } }
Code for allowing comments to be read.

Run Script Object

The following script is added to TBL_Planning_Enabled - onSelect to run the script object when the table is selected:

Script added to the table to run the script object..

Add Comments

The following script is added to BTN_Add_Comment - onClick to:

  • Display the Popup_Error if a data cell is not selected.
  • Read the user defined comment from the INF_Enter_Comment input field and add it to the selected data cell.
  • Refresh the comments displayed in the radio button and the textbox.
Code Snippet
12345678910111213
var sel = TBL_Planning_Enabled.getSelections(); var cellSelected = TBL_Planning_Enabled.getDataSource().getData(sel[0]); if (cellSelected === undefined) { Popup_Error.open(); } else if (sel.length > 0) { var comment = INF_Enter_Comment.getValue(); TBL_Planning_Enabled.getDataSource().getComments().addComment(sel[0], comment); INF_Enter_Comment.setValue(""); SO_Comments.readComments(); }
Code for adding comments using a button.

Popup Error

The following script is added to Popup_Error - onButtonClick popup to close the error message that will appear if a data cell is not selected by the planner when trying to add a comment:

Code Snippet
1
Popup_Error.close();
Code added to the Popup_error popup that closes the error message.

Delete Comments

The following script is added to BTN_Delete_Comment - onClick to delete the data cell comments by its ID and refresh the comments displayed in the radio button and the textbox:

Code Snippet
123
var sel = RB_CommentID.getSelectedKey(); TBL_Planning_Enabled.getDataSource().getComments().removeComment(sel); SO_Comments.readComments();
Code for deleting comments using a button.

Populate the Product Group Dropdown on Page Initialization

The following script is added to Page_1 - onInitialization to populate the DD_ProductGroup dropdown box with the dimension values of ProductGroup (except the value # unassigned) when a planner opens the story:

Code Snippet
12345678
var ProductGroups = TBL_Planning_Enabled.getDataSource().getMembers("ProductGroup"); for (var x=0; x<ProductGroups.length; x++){ var ProductGroup = ProductGroups[x]; if (ProductGroup.id!=="#"){ DD_ProductGroup.addItem(ProductGroup.id,ProductGroup.description); } }
Script to populate Product Group dropdown when the story opens.

Product Group Dropdown

The following script is added to DD_ProductGroup - onClick to define the values for the dropdown that are used to filter the comment widget:

Code Snippet
123
CW_ProductGroup.getCommentingDataSource().removeDimensionFilter("ProductGroup"); CW_ProductGroup.getCommentingDataSource().setDimensionFilter("ProductGroup",DD_ProductGroup.getSelectedKey());
Code for the product group dropdown.

Extend Comment Features with Scripting

Task 1: Extend Comment Features with Scripting

Task Flow: In this practice exercise, you will:

  • Enable comment mode by adding scripting to the Enable/Disable Comment Mode button
  • Add a script object to read comments from a data table cell and display in a text box
  • Add a script to configure a comment box to include selecting comments with radio buttons, as well as created by and time information
  • Add scripts buttons to allow the creation and deletion of comments
  • Add a custom popup for error messages and the relevant script to hide it

Task 2: Optional: Test Extended Comment Features in a Planning Story

Task Flow: In this practice exercise, you will:

  • Test all of the scripts added to the story by adding, selecting, and deleting comments using the text widgets and buttons
  • Test the filtering comments by product group dropdown

Log in to track your progress & complete quizzes