Notifications for New Items in a SharePoint Library

In our previous article about the document management app we explained the search functionality. This time we want to highlight a specific feature: an automated notification that flags new entries in a SharePoint library.

Notification for new entries

Our document management app lists all entries inside the SharePoint libraries. One of them keeps track of open tasks assigned to a user. To draw attention to new tasks we added a notification badge – a small red circle that shows the number of open tasks, similar to other platforms. Users immediately see when new tasks require their attention.

Automatic updates

Whenever the list of open tasks changes we refresh the notification badge in a fixed interval. When a new task arrives or a user completes one, the indicator updates automatically. We use the JavaScript setInterval method to run the command every 300,000 milliseconds (five minutes).

private loadOpenTasksCount() {
  // Call it the first time without delay
  this.executeLoadOpenTasksCountCommand();

  // Check open tasks every 5 minutes
  this.interval = setInterval(this.executeLoadOpenTasksCountCommand, 300000);
}

Query the list items

To show the number of open tasks for a user we query SharePoint. For performance reasons we only select the Id field, filter by the current user and the task status, and return the count of matching items. The resulting number is displayed in the red badge.

public static getOpenTasksCount(): Promise<number> {
  const service: SPRestService = SPServiceProvider.GetCurrentSPService();
  let selectQuery = "Id";
  let filterQuery = `AssignedToId eq ${AppContext.currentUser.id} and Status eq 'In Progress'`;
  return service
    .getListItemsByFilter(AppContext.taskList, selectQuery, filterQuery)
    .then(items => {
      return items && items.value ? items.value.length : 0;
    });
}

The service call that fetches the items from the SharePoint library looks like this:

public getListItemsByFilter(list: IList, selectQuery?: string, filterQuery?: string) {
  const restAPI = `${this.context.pageContext.web.absoluteUrl}/_api/web/Lists(guid'${list.Id}')/items?${
    selectQuery !== null && "$select=" + selectQuery
  }${filterQuery !== null && "&$filter=" + filterQuery}`;
  return this.context.spHttpClient
    .get(restAPI, SPHttpClient.configurations.v1)
    .then(response => {
      return response;
    });
}

With this setup our users never miss new tasks again.