Visual Builder provides a built in "Fire Notification" action that is used to show messages to end users. This is part of the default template we provide for your apps. You might be looking to customize the way that messages are shown in your app. For example, you might like to bunch multiple messages in a single notification instead of showing each one individually. In this blog we'll show you how to customize the way messages are shown.

The fireNotification action leverages a message component that is located in the shell page of the default Visual Builder app template. Since the shell page is shared across the pages in your app you then don't need to define your own message component in each page. In the video below we customize the way this component shows the messages.

We are using this Oracle JET cookbook sample that shows how to group messages as the base for our implementation. The oj-messages component is based on an Array Data Provider (ADP) variable with a specific data structure that includes properties for the messages – such as their severity, summary and more. See the Oracle JET documentation for the full set of properties you could use oj.ojMessage.Message.

Since we want to set the list of errors from specific pages in the app, we are defining an ADP variable at the application level. This way the variable is accessible by all the pages in our app. The ADP variable is based on an Array variable with this structure:

Array Structure

In the page's JSON code:

  "variables": {
    "errrorsArray": {
      "type": [
        {
          "closeAffordance": "string",
          "errors": "string[]",
          "severity": "string",
          "summary": "string"
        }
      ]
    },

Now that the variable that will hold our messages is created, it is time to configure the UI part. We modify the HTML of the shell page to add a template for displaying messages, and point it to the app level ADP as the source of messages. Here is the HTML segment:

		
		
			
				

						
							
  • 
									
    •

    The last step is to update the variable with the specific messages we want to show – which we do in individual pages. In the video we use a static list of messages – but in real implementation you can generate the array data in a dynamic way.

    The value we assign as an example:

                  [
                {
                  "closeAffordance": "defaults",
                  "severity": "warning",
                  "summary": "some warning for you",
                  "errors": [
                    "warning number one",
                    "warning number two"
                  ]
                },
                {
                  "closeAffordance": "defaults",
                  "severity": "error",
                  "summary": "some errors for you",
                  "errors": [
                    "error number one",
                    "error number two"
                  ]

    The fireNotification action will still execute the logic in the shell page to show the notification, but they will now be formatted the way we want them, with the content structure we sent them.