Next-generation platform

Implementing the Notes widget

Store associates use the Notes widget to capture and view details such as the order history or any other additional information associated with a customer profile. This section describes the APIs, services, and other components that are used to implement the Notes widget in Sterling Store Engagement.

Assumptions and limitations

  • Notes are sorted based on the creation date.
  • Notes filters are reset on adding new notes or on closing the Notes widget.
  • Notes widget support client-side pagination.
  • By default, Notes filters are not selected.

Solution

The Notes widget is available in multiple pages in Sterling Store Engagement such as the TO summary page, and the various receive inventory and lookup inventory pages. Notes widget is also available in the order summary, customer details, and cart details pages.

You can mark a note as important if you want to flag the note as important. You can also filter the list of notes based on the user who added it, System or User, and the Important flag.

The getNoteList API is called to retrieve notes based on TableKey and TableName. Same API is used to filter the notes based on whether it is logged by the user, system generated, or the Important flag is set. These actions are handled within the Notes component itself.

In cases where fetching the note list do not use the generic API, the notes list data can be passed directly to the child component. The Add new note mashup logic and implementation will remain as it is. As the input parameters and the API for adding a note is mostly different based on the screen, new notes data will be emitted to the parent component.

It, then, adds a new note and resets the notesList in the child Notes modal component by either of the following methods:
  • Calling the AddNewNote method in the Notes modal component.
  • Directly updating the noteList property by using componentInstance.

By default, filters are available. However, you can configure to hide the filters by passing showFilters as false to the Notes component

Component details

  • If the input parameters or the API that is used to fetch the notes is not generic, the parent component can directly pass notesList. Else, noteTableEntityobject must be passed with the entityTableKey and entityTableName properties, which the Notes widget uses to get the notes.
  • The Customer details page uses the getParticipantNoteListAPI. In this case, you must pass isParticipantNote as true and only the entityTableKey property is required. Based on this, the Notes widget fetches and filters the data.
  • In cases where the notesList data is passed from parent component, on update of filters, data is emitted to the parent component. The parent component then fetches the notesList data again and update in the child Note component.
  • To change the Notes widget title from Notes (count), you must pass modalTitleKey, which is the translation key, from the parent component. Count can be used as a translation parameter in the title.

Input decorators

The input decorators that are used in notes-modal are the following:
  • notesList. Used if an API other than the getNoteList API is used to fetch the notes list.
  • showFilters. Used to display the filters, namely, System, User, and Important. The default value is true.
  • noteTableEntity. Passed when the input or API used to fetch notes is not generic.
  • isParticipantNote. Set to true if you want the Notes widget to use the getParticipantNoteList API instead of the getNoteList API. The default value is false.
  • modalTitleKey. Use this translation key to change the modal title from Notes (count).
  • noNotesMessage. Optional. Use if you want to display a unique message when the note count is 0.

Output emitters

  • newNoteItem. Used to add a new note.
  • noteFilterCriteria. Used if an API other than the getNoteList API is used to fetch the notes list.

Usage

Option 1 (Generic). Pass entityTableKey and entityTableName as part of the noteTableEntity object. The getNoteList API mashup is called internally within this component. On applying filters, the notes list is updated within the component.

Option 2. Pass isParticipantNote as true if you want to use the getParticipantNoteList API instead of the getNoteList API to fetch and filter the notes. In this case, you have to pass only entityTableKey as part of the noteTableEntity object. You do not have to pass entityTableName.

Option 3 (Specific). The getNotes call is made from the parent component as the API or mashup input is unique. Then, noteList is initialized while opening the modal by using componentInstance. In this case, when filters are applied, the noteFilterCriteria emitter emits the complex query, which can be used by the parent component to re-fetch the notes and reset the notesList in the child component. The updateNotesCount method can be used to update notesCount from the parent component.

Implementation

The following mashups are used for the implementation of the Notes widget:

To get the Notes list
  • API - getNoteList or in case of Customer details page, getParticipantNoteList.
  • Input - { 'Note': { 'TableKey': tableKey, TableName: tableName } }
To add a new note
  • API - Specific to the parent component. For example, changeOrder.
  • Input - Specific to the parent component. For example, for the changeOrder API, the input can be as follows:
    { 'Order': { 
'OrderHeaderKey': key, 
'Notes'; {
'Note': [
'NoteText': text,
'Priority': 0
]
}
}