We may come across scenarios where we would like to display Fire Notification action message and summary in an action chain at the web application scope. Let's consider a use case where we would like to implement a generic error handler action chain at the application scope so that it can be called from all the flows, pages and fragments using Call Action Chain action in an action chain.

In this generic error handler action chain, error messages (returned from REST API response or any other custom error message) needs to be displayed as notification. However, by default in Visual Builder, Fire Notification action message and summary are not displayed at web application scope. In this blog, we will discuss on the steps to be implemented so that Fire Notification action message and summary can be displayed at the web application scope.
 

Step 1: Add oj-messages component

At the web application scope, add oj-messages component. This component is required to display notification.
Open HTML file and add below line.

 

<oj-messages id="vbDefaultNotifier" display-options.category="none" position="{}" display="general"></oj-messages>

oj-messages

Step 2: Import oj-messages component
 

At the application scope, navigate to Settings tab and select the Imports child tab. Click on the Component button and enter oj-messages for Component Name and ojs/ojmessages for Module Path.

Import oj-messages

Step 3: Create a type messageType and a variable messagesADP of messageType

At the application scope, create a custom type messageType and a variable messagesADP of type messageType. This variable will hold the notification messages and will be assinged to the messages property of oj-messages.

Below is the JSON metadata code of messageType and messagesADP varaible.

"messageType": {
     "id": "string",
      "severity": "string",
      "category": "string",
      "summary": "string",
      "detail": "string",
      "timestamp": "string",
      "autoTimeout": "number"
}
"messagesADP": {
      "type": "vb/ArrayDataProvider2",
      "defaultValue": {
        "itemType": "messageType",
        "keyAttributes": "id"
      }
}


Step 4: Add an Event Listener to listen for vbNotification life cycle event

At the application scope, create an event listener to listen for vbNotification life cycle event. In the new application chain that gets created, add a parameter eventPayload of type messageType.

eventPayload Parameter

Step 5: Assign value to the eventPayload parameter created in step 4

Open the Event Listeners tab and select the action chain under vbNotification event. Click on the Assing link to assign value to eventPayload parameter.

Assign the below expression to eventPayload.

{ id: $event.key, summary: $event.summary, detail: $event.message, severity: $event.type, autoTimeout: $event.displayMode === 'transient' ? 0 : -1 }

Value to eventPayload parameter

Step 6: Mutate messagesADP

In the action chain created in Step 4, use Fire Data Provider Event action to mutate messagesADP by adding eventPayload to data property and eventPayload.id to keys property. 


Mutate messagesADP

Step 7: Assign messages property of oj-messages

At the application scope, create an action chain ConfigureMessage to assign messages property of oj-messages component to messagesADP.

Also write a code in the action chain to listen for oj-close event of oj-messages component. This code will filter out the messages after the notification is removed from the screen.
 

class ConfigureMessage extends ActionChain {

    /**
     * @param {Object} context
     */
    async run(context) {
      const { $application, $constants, $variables } = context;

       //Code to populate message property
      const msg = document.getElementById('vbDefaultNotifier');
      msg.messages = $application.variables.messagesADP;

      //Register event listener to clear the message from the messagesADP
      msg.addEventListener('ojClose', async (e) => {
        if (e && e.detail && e.detail.message && e.detail.message.id)
          $application.variables.messagesADP.data = $application.variables.messagesADP.data.filter(el => el.id !== e.detail.message.id);
      });
    }
  }

Step 8: Invoke ConfigureMessage Action Chain

Create an event listener to listen for application vbEnter event. Select action chain ConfigureMessage created in step 7 to be triggered when vbEnter event is fired. 

Step 9: Add target as current in Fire Notification

Add target property of Fire Notification action as current. This needs to be done in all the action chain at the web application scope where Fire Notification action is used.

Fire Notification type

Step 10: Remove oj-messages component from the shell page

In the shell page, delete the oj-messages comonent. Else all the notifications fired below web application scope will be displayed twice.


Conclusion:

In this blog we discussed in details the steps and configuration required to display notification action message and summary at the web application scope.