Custom notifications for Flex Workflow¶
Note
This procedure assumes that you have a back end for notifications and want to display them in the notification system used by the Flex Workflow.
To create a custom notification, you have to provide two plugins in the flex-workflow
bundle,
one for the notificationsPopupView
and second for the notificationIndicatorView
.
Start with creating a plugin for notificationIndicatorView
which is responsible for displaying a text in the notification bar.
You have to start with adding dependencies in Resources/config/yui.yml
:
1 2 3 4 | mb-notificationmessagecreatorplugin: requires: ['plugin', 'ez-pluginregistry'] dependencyOf: ['fw-notificationindicatorview'] path: '%mybundle.public_dir%/js/plugins/mb-notificationmessagecreatorplugin.js' |
Now you can create your plugin (as declared in yui.yml
, you need to create it in ./js/plugins
).
It will be stored in a file named mb-notificationmessagecreatorplugin.js
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 | YUI.add('mb-notificationmessagecreatorplugin', function (Y) { 'use strict'; var PLUGIN_NAME = 'mbNotificationMessageCreatorPlugin'; /** * Add the notification message creator * * @module mb-notificationmessagecreatorplugin */ Y.namespace('mb.Plugin'); /** * @namespace mb.Plugin * @class mbNotificationMessageCreator * @constructor * @extends Plugin.Base */ Y.mb.Plugin.NotificationMessageCreator = Y.Base.create(PLUGIN_NAME, Y.Plugin.Base, [], { initializer: function () { var notificationIndicatorView = this.get('host'); /** * This will add a message creator to the `notificationIndicatorView`. * In the public method `addNotificationMessageCreator` you have to provide: * 1. The notification type. * 2. The callback to be invoked to create the message in the notification bar. */ notificationIndicatorView.addNotificationMessageCreator('myNotificationType', this._createNotificationMessage.bind(this)); }, /** * Creates a notification message. * * @method _createNotificationMessage * @protected * @param notification {Object} the notification * @return {String} */ _createNotificationMessage: function (notification) { /** * In this method you have to return a string which will be displayed in the notification bar. * The notification object provided from back end is passed to this method. * This recipes assumes that the message is in object `data`. */ return notification.data.message; }, }, { NS: PLUGIN_NAME }); Y.eZ.PluginRegistry.registerPlugin( Y.mb.Plugin.NotificationMessageCreator, ['notificationIndicatorView'] ); }); |
Now create a plugin for the notificationsPopupView
. It will be responsible for creating a proper notification struct.
Again, start with creating a dependency in yui.yml
:
1 2 3 4 | mb-notificationstructparserplugin: requires: ['plugin', 'ez-pluginregistry'] dependencyOf: ['fw-notificationspopupview'] path: '%mybundle.public_dir%/js/plugins/mb-notificationstructparserplugin.js' |
And create a plugin named mb-notificationstructparserplugin
:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 | YUI.add('mb-notificationstructparserplugin', function (Y) { 'use strict'; var PLUGIN_NAME = 'mbNotificationStructParserPlugin', TIMESTAMP_MULTIPLIER = 1000; /** * Add the notification struct parser * * @module mb-notificationstructparserplugin */ Y.namespace('mb.Plugin'); /** * @namespace mb.Plugin * @class mbNotificationStructParser * @constructor * @extends Plugin.Base */ Y.mb.Plugin.NotificationStructParser = Y.Base.create(PLUGIN_NAME, Y.Plugin.Base, [], { initializer: function () { var notificationsPopupView = this.get('host'); /** * This will add a notification parser to `notificationsPopupView`. * In the public method `addNotificationStructParser` you have to provide: * 1. The notification type. * 2. The callback to be invoked to create the proper notification struct. */ notificationsPopupView.addNotificationStructParser('myNotificationType', this._createNotificationStruct.bind(this)); }, /** * Creates a notification structure required to render notifications * * @method _createNotificationStruct * @protected * @param item {Object} notification data * @return {Object} */ _createNotificationStruct: function (item) { var creationDate = new Date(item.created * TIMESTAMP_MULTIPLIER); /** * In this method you have to return an object with proper notification struct. * The proper struct looks like this: * { * id {Number}: notification id * isPending {Number}: is the notification pending (0 or 1) * date {String}: the date of the notification * time {String}: the time of the notification * type {String}: notification type * messageType {String}: type message * link {String}: the URL to redirect user on click (if omitted will only close popup) * shortText {String}: short description text * text {String}: long description text (if omitted only shortText will be displayed) * } */ return { id: item.id, isPending: parseInt(item.isPending, 10), type: item.type, date: Y.Date.format(creationDate, {format: '%x'}), time: Y.Date.format(creationDate, {format: '%X'}), link: item.data.link, messageType: item.data.contentName, shortText: item.data.message, text: item.data.message }; }, }, { NS: PLUGIN_NAME }); Y.eZ.PluginRegistry.registerPlugin( Y.mb.Plugin.NotificationStructParser, ['notificationsPopupView'] ); }); |
Now you can clear cache by running: php app/console --env=prod cache:clear
.
Your notification should be displayed properly.
In the image below you can check what is what in the notification struct: