neo-notifications

Back to Index

This project contains the client code for the neo notification server.

Notification hub

The notification signalr client will display user popup notifications sent to the notification server.

Templating UI

The templating UI allows users to edit the templates defined on the notification server.

Config

• Register the notifications module in your app startup code:

import { NotificationServiceModule } from '@singularsystems/neo-notifications';

appService.registerModule(NotificationServiceModule);

• Add a notification config property to your app config:

public get notificationServerConfig(): INotificationServiceConfig {
    return {
        basePath: this.notificationServer.basePath,
        apiPath: this.notificationServer.basePath + "/api",
        popupHideTime: 4,
        appId: 1,
        allowBodyHtml: false
    }
}

• Register the config with DI in your app module:

// Where AppConfig is your main app config model.
container.bindConfig(NotificationServiceTypes.ConfigModel, (c: AppConfig) => c.notificationServerConfig);

• Initialise the notification service after user login:

// Add this to your authentication service:
protected afterUserLoaded() {
    AppService.get(NotificationServiceTypes.Services.NotificationService).initialise();
}

Override services

The service which creates the popup notifications is called NotificationPopupCreator. By default this adds a notification to the global notifications list, which results in a toast being shown.

You can override this by implementing your own INotificationPopupCreator or by creating a subclass of NotificationPopupCreator.

Register the new implementation in your startup code:

container.bind(NotificationServiceTypes.Services.NotificationPopupCreator).to(MyNotificationPopupCreator).inSingletonScope();

Components

This package contains the following components:

• TemplateLayoutsView - Lists all the template layouts which have been registered, and allows the user to override the layout by tenant / culture.
• TemplatesView - Lists all the template types which have been registered, and allows the user to override the template type by tenant / culture.
• NotificationSettings - View, Modal and component to allow editing of notification settings.
• EditTemplateComponent - This allows you to show the edit template ui in your page (for a specific template type and record id).
• EditTemplateModal - This displays the EditTemplateComponent in a modal.
• NotificationsView - Allows the user to search for notifications which have been queued / sent.
• HtmlView - Use this to show output html. Do NOT output html directly using innerHtml or dangerouslySetInnerHTML.

TemplateLayoutsView / TemplatesView

To add these view to your main menu, import the views into your routes file, and create menu items for them.

import { TemplateLayoutsView, TemplatesView } from '@singularsystems/neo-notifications';

EditTemplateComponent

To use this component in your view, create an instance of TemplatesVM, passing in the task runner from your view. When you need to load the template for your record, call initialise on the VM.

public templatesVM = new TemplatesVM(this.taskRunner);

editTemplate() {
    this.templatesVM.initialise("MyTemplateType", this.recordId);
}

In your UI, pass the view model to the edit template component:

<EditTemplateComponent viewModel={this.templatesVM} />

TemplatesVM has an afterSave property which you can set to be notified once the template has been saved by the user.

If you want to control saving of the template, you can set the hideSave prop.

EditTemplateModal

<EditTemplateModal viewModel={this.templatesVM} />

This component also accepts a TemplatesVM via the viewModel prop. To show the modal, call initialise on the VM. (See the EditTemplateComponent section for details). The modal will be dismissed if the user clicks close, or saves the template.

Styles

Import the notification style sheet into your main scss file:

@import "~@singularsystems/neo-notifications/styles/notifications.scss";

Server messages

When sending a popup notification to a user, you may want to also send a signal message to your view model to perform some action such as refreshing the page.

To subscribe to one of these messages in your view model, inject the ServerMessageSubscriber service in your view model constructor:

serverMessageSubscriber = AppService.get(NotificationServiceTypes.Services.ServerMessageSubscriber)

Also in the constructor, subscribe to incoming messages by calling the subscribe method, passing in a key which differentiates this process from any others you may have in your app:

this.autoDispose(serverMessageSubscriber.subscribe("my-key", this.messageReceived.bind(this)));

The callback method will be passed whatever data you sent from the server. E.g:

// Simple value
private messageReceived(id: number) {

}

// Or custom object
private messageReceived(message: IMyCustomMessage) {

}

Server side

You can send a process message to the server either by creating a process message recipient:

Recipient.ProcessMessageRecipient(UserGuid, "my-key", id);

Or by adding a process message to a recipient:

Recipient.PopupRecipient(UserGuid, new PopupData() {...}).WithProcessMessage("my-key", id);

When using the above recipient type, the SendNotificationsAsync method on the notifications service will send a process message in addition to a popup message / email / sms.

If you want to only send a process message, use

NotificationService.SendProcessMessageAsync(
    Recipient.ProcessMessageRecipient(UserGuid, "my-key", idOrObject))