Extension:Echo/Creating a new notification type

The Notifications system allows logged in users to receive alerts and notices about their interactions with connected wikis. In Wikimedia projects, users receive cross-wiki notifications from almost all wikis in the cluster. However, the Notifications system can also be used by third-parties. Third parties can install it on a single wiki or on a series of connected wikis (using the cross-wiki notification system). The system allows extension developers the ability to add new notification types that users can receive under certain circumstances. This document will outline the way to create such notifications, explain best practices and formulate the known pitfalls to avoid.

Introduction to how notifications work
Notifications are, very generally, made of two concepts - the Event and the PresentationModel. The event stores details of the triggered event and the presentation model defines the way it is presented in the user interface.

EchoEvent
The EchoEvent class defines general events, collects information about the related page, user and wiki and inserts them into the database. Events are general, and one even may define multiple views. For example, mentioning 4 people will create a single event, that will then be referenced (and 'trigger' a notification) for the four mentioned users. All of their individual notifications, however, will reference the same event.

EchoPresentationModel
Every type of notification requires a presentation model, a way to define what the notification will display, where it will link to, and what secondary actions it will present. The front-end components of the notifications system (the notifications popup and the Special:Notifications page) read that information to produce a proper display of the notification.

The presentation of a notification type is always based on the base definition in EchoEventPresentationModel. That class defines the base behavior of all notifications, and each child notification must extend it, and then adjust the details to its needs.

How events work
If you are creating a new notification type, you should first create an event. The logical process is: ''Note: This is a slight generalization of the process for the sake of clarity. Explaining how things work in practice with database table rows (per user, wiki, cross-wiki, etc) is outside the scope of this tutorial.''
 * 1) When relevant, your code creates the event using
 * 2) As part of the definition of the event you should detail which users receive a notification from this event. This is defined by the parameter   (For an example of this, see Flow's 'user-locators' method used to locate users who are following a title)
 * 3) The event is stored in the database, and as notifications for the relevant users
 * 4) When users request their notification list from the API, the system looks for the relevant presentation model and creates the data - title, primary link, secondary links, relevant user, etc.
 * 5) The front-end uses the structured data to present the notification.

Event definition
Event definitions happen in the method that responds to the  hook. That hook includes three variables: $notifications, $notificationCategories and $icons.

Defining the event category
Users are generally allowed to check/uncheck the option of receiving notifications in web or email in the preferences. The preference category has a tooltip, and should be defined with  The category name is used as the key, and is what the event definition then refers to in the "category" parameter. You also need to define a message with the name echo-category-title-, replacing  with the actual category name. This is used in Special:Preferences under the Notifications tab.

Defining the notification icon
Notifications appear with icons. If an icon is not set up, a default icon will appear. If the icon is a new one, it must be loaded and defined using $icons.

Define the icon using the full url of the icon:

Alternatively, you can use a file path that is relative to relative to $wgExtensionAssetsPath:

Event creation details
When we create and trigger the event, we need to supply details as well:

Presentation model definition
Presentation models are meant to be very flexible, so as to allow the creation of notification types with specific displays. Unlike event definition and creation, the presentation model is a class on its own, and requires extending it and making the methods specific to the notification case. These are the definitions of the base  class:

Structure of secondary links
The secondary links information allows notifications to specify sub-links to actions that are extending the main primary link for the notification. For example, a notification about some revision edit can have its primary link point to the revision diff page, but also have secondary links pointing for the user page of the user who made the change, or a link to view the page that was changed.

Secondary links also allow API-directed actions ('dynamic' actions) for actions like 'stop watching a page' or others that require the front-end to request an AJAX request to the API directly from the notification. Further details about dynamic actions are outside the scope of this tutorial.

The general structure of secondary links:

Walkthrough: Creating a new notification type
Let's say we have an extension that keeps a list of users who are interested in new titles created with specific words in them. The extension allows users to add and remove themselves from a watch-list for a certain list of words in a title, and listens to the hook for creating new pages on the wiki to identify relevant pages. When a relevant page is created, the extension code will create an event with the relevant details, and notify the users that are on the list for that combination of words.

This section will demonstrate how to create this new notification type.

Defining the event
We need to make sure our event is defined in the system. This is done by listening to the hook  and defining the event definition: You can see another example of this in the Thanks extension.

Identify relevant users to notify
The Notifications system will try to notify relevant users, but it can't guess who those are. The code that creates the event needs to supply that information. To do that, we should create a function that is then inserted into the definition of the new event.

In this case, we will want to go over the list of users and add them all:

Adding code to trigger the event
Now that we have a way to identify who we want to notify, we need to actually trigger this event. Our hypothetical extension listens to page creation hook and then checks to see if the new title has words that fit the list. However the extension code does this, once it identifies a title that fits a list, it will create an event and notify the relevant users.

The code below skips the actual operation of listening to new page creation and checking the words, and jumps straight into defining the new event: You can see an example of filtering out mentioned users in Flow's event for flow-new-topic.

Creating a presentation model
Now that everything is set up, we can create our presentation model. We will have to extend EchoEventPresentationModel and implement our methods. You can see a few examples of these type of models in several extensions like Flow  , Thanks and inside Echo   itself.

Here's an example of a presentation model for our hypothetical extension: And that's it! Our new notification is now active and will be displayed to the relevant users with the header and body messages and the primary and secondary links we defined.

How to bundle notifications

 * Make sure your bundle config is set to true in the echo event definition:
 * Add a hook for bundling rules:


 * Hook up the function in extension.json:


 * You can use  to check if you're in a bundled notification, and vary the header and body messages accordingly:
 * When an expandable bundle is expanded, each sub-notification is rendered individually. By default  is displayed, but it is recommended that you supply a shorter message for this case using  :

And you're done! Don't forget to add your messages. Also note that bundles may or may not be expandable.

Pitfalls and warnings
