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.

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.

Business Scenario

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.

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
Copy code
Switch to dark mode
1
Application.setCommentModeEnabled(!Application.isCommentModeEnabled());

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
Copy code
Switch to dark mode
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); } }

Run Script Object

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

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
Copy code
Switch to dark mode
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(); }

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
Copy code
Switch to dark mode
1
Popup_Error.close();

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
Copy code
Switch to dark mode
123
var sel = RB_CommentID.getSelectedKey(); TBL_Planning_Enabled.getDataSource().getComments().removeComment(sel); SO_Comments.readComments();

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
Copy code
Switch to dark mode
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); } }

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
Copy code
Switch to dark mode
123
CW_ProductGroup.getCommentingDataSource().removeDimensionFilter("ProductGroup"); CW_ProductGroup.getCommentingDataSource().setDimensionFilter("ProductGroup",DD_ProductGroup.getSelectedKey());

Extend Comment Features with Scripting

Task 1: Extend Comment Features with Scripting

What skills will you develop in this practice exercise?

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

What skills will you develop in this practice exercise?

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