Update Notes Widget (SP Code Example)

Exercise: Update Notes

In this exercise, you will update the Notes List and Notes Body widgets to allow users to update Notes from the Notes Body widget.

Preparation

  1. Return to the tab/window you have been using to test the Notes List and Notes Body widget and reload the page. If you closed the tab/window, open a new one:

    https://<your_instance>.service-now.com/notes?id=notes_home
  2. Click a Note record in the Notes List widget.

  3. In the Notes Body widget, edit the Note record title and description.
  4. Examine the Notes List widget. Do you see the record updates?
  5. In the Notes List widget, click a different Note record then click the Note record you edited in the last step.

Attempting to update a Note record through the widgets has a couple of issues:

  • Changes are not saved
  • The Notes List widget is not notified of changes in the Notes Body widget

Update the Notes Body Widget HTML Template

Add the ng-change directive to both the note-title and note-body HTML elements so the widget can respond to changes.

  1. Open the Notes Body widget for editing in the Widget Editor.
  2. Replace the contents of the HTML template with this HTML. The ng-change and ng-model-options directives were added to the note-title input and the note-body textarea (lines 5 and 10).
    <div class="panel panel-default" ng-show="c.data.noteID">
      <div class="panel-heading clearfix">
        <div class="row">
          <div class="col-md-12">
            <input class="form-control" id="note-title" ng-model="c.data.title" ng-change="c.updateNote('title')" ng-model-options="{debounce: 1000}"/>
          </div>
        </div>
      </div>
      <div class="panel-body">
        <textarea class="form-control" id="note-body" ng-model="c.data.note" ng-change="c.updateNote('body')" ng-model-options="{debounce: 1000}" ></textarea>
      </div>
    </div>
  3. Examine the use of the ng-change directive. What function is it calling on the Client Script?

  4. Click the Save button.

Update the Notes Body Widget Client Script

The ng-change directives in the HTML Template call updateNote(). You must add a function to the widget’s Client Script to handle the updates. The function must specify the action name, pass necessary properties and values to the server so the updates can be written to the database, and supply a callback function for the server.get().

  1. Add this new function to the Notes Body widget Client Script. Do not replace the entire Client Script. It is up to you to determine where to place the new function in the Client Script. If you aren’t sure, scroll to the Answers section at the bottom of this page.

    c.updateNote = function(updateType) {
    		c.server.get({
    			action: 'updateNote',
    			noteID: c.data.noteID,
    			noteBody: c.data.note,
    			noteTitle: c.data.title
    		}).then(function(r) {
    		});
    	}
  2. Examine the Client Script to make sure you understand what it does. The script is currently not doing anything with the updateType value passed in from ng-change.

  3. Click the Save button.

Update the Notes Body Widget Server Script

The Server Script must update the Notes record in the database using the new values received from the Client Script.

  1. Add this else if to the Server Script. Do not replace the entire Server Script. It is up to you to determine where to place the else if in the Server Script. If you aren’t sure, scroll to the Answers section at the bottom of this page.

    else if (input.action == 'updateNote') { 
    		note.title = input.noteTitle; 
    		note.note = input.noteBody; 
    		note.update(); 
    	}
  2. Examine the logic to make sure you understand what it does. Recall that:

    • The input object is received from the Client Script
    • The GlideRecord update() method writes new values to an existing record to the database
  3. Click the Save button.

Test the Record Update Feature

  1. Return to the tab/window you have been using to test and do a hard reload of the page to make sure the widgets are not running using cached logic.
  2. Click a Note record in the Notes List widget.
  3. In the Notes Body widget, edit the title and description. You may see a message about cross-scope privilege which you can ignore.
  4. Click a different note in the Notes List widget.
  5. In the Notes List widget, examine the record you edited. Do you see the changes in the Note record?
  6. In the main ServiceNow browser window (not Studio), use the Application Navigator to open CreateNotes > Notes. Do you see the changes to your record?
  7. Return to the test tab/window and reload the page. Do you see the changes now?

    QUESTION: Why did you have to reload the page to see the updates to the record in the Notes List widget? If you aren’t sure, scroll to the Answers section at the bottom of this page.

Challenge

As you have seen, the Notes List widget does not know about changes made to Note records in the Notes Body Widget. Your Challenge is to emit the update for the Note record title and body from the Notes Body widget. The Notes List widget will listen for the event and will update the appropriate record in the list in response to the event.

If you get stuck, scroll to the Answers section at the bottom of this page to find out how to see a solution.

Answers

Question: Where should I place the c.updateNote() function in the Client Script?

Answer: Place the c.updateNote() function on line 4 OR line 15:

Place the function on line 4 or 15.

———–

Question: Where should I place the else if logic in the Server Script?

Answer: Place the else if logic on line 11:

Place the else if logic on line 11.

———–

Question: Why did you have to reload the page to see the updates to the record in the Notes List widget?

Answer: The Server Script was able to successfully update the Note record in the database but the Notes List widget had no way of knowing about the change. That is to say, the change was not emitted.

Question: How can I see a Challenge solution?

Answer: Any set of requirements can be solved in many ways. There is a working solution in the devtraining-createnotes-jakarta repository. To see the solution:

  1. Save your work to the GitHub repository.
    1. In Studio, open the Source Control menu and select the Commit Changes menu item.
    2. Add a Commit Message of your choice.
    3. Click the Commit Changes button.
  2. In Studio, open the Source Control menu and select the Create Branch menu item.
  3. For the Branch Name, use the name of your choice such as UpdateNotesChallengeSolution.
  4. In the Create from Tag field, choose Solution_UpdateNotes_WithChallenge then click the Create Branch button.

The changes to the code for both widgets is commented. You will see code changes in:

  • Notes Body Widget: Client Script, Server Script
  • Notes List Widget: Client Script