Hi All,

Just happened to work on a requirement (a question asked in the community) to be able to preview a notification from a record itself before triggering it.

Then I thought, when could that be needed?

Well, it could be handy when the notification is an on demand notification and you want to preview it before it is actually sent.

The Problem

The out of the box preview functionality uses the following UI Action (Preview Notification) to render the preview of the notification:

function showSimulator() {
    var generationType = g_form.getValue('generation_type');
    if (!g_form.getValue('collection') && generationType == 'engine')
        g_form.addErrorMessage(new GwtMessage().getMessage("Table is required to preview this notification"));
    else {
        if (typeof rowSysId == 'undefined')
             sysId = gel('sys_uniqueValue').value;
        else
             sysId = rowSysId;
        var dialogClass = window.GlideModal ? GlideModal : GlideDialogWindow;
        var dd = new dialogClass("notification_preview");
        dd.setTitle("Notification Preview");
        dd.setWidth(800);
        dd.setPreference('sysparm_notification_id', sysId);
        dd.setPreference('sysparm_changed_fields',g_form.serializeChangedAll());
        dd.render();
    }
}

You can see that it uses UI Page "notification_preview" to render the HTML preview for the notification. But on checking the UI Page, you will find the following code:

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="true" xmlns:j="jelly:core" xmlns:g="glide" xmlns:g2="null" xmlns:j2="null">
    <g:inline template="notification_preview.xml"/>
</j:jelly>  

Here is the preview which gets generated:

You can see, apart from the notification, the other required parameters for the preview are the "Preview Record" and the "Event Creator". But in the UI Action code, we can't see those parameters being set.

So, we can check the parameters in the UI Page, right? Nope, here is the problem.

The UI Page uses the template "notification_preview.xml" which is hidden. You can't find its implementation code (or maybe I didn't find it correctly).

How are we going to find / set those other required parameters then?

Well, I tried to check the processing behind the scenes, identified the page which was being rendered from the UI Page.

Here is the URL which could show you the preview of your notification:

https://.service-now.com/notification_preview_html_body.do?sysparm_record_id=&sysparm_user_id=&sysparm_event_id=&sysparm_notification_id=

The Solution

I utilized the URL in an IFrame in a UI Page, and then with the use of GlideModal API call in a UI Action, I was able to create a solution to Preview a particular notification from your ticket / request record. The solution involves the following components:

Create a UI Page:

Name: custom_preview_notification

HTML / XML

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null"> 
<j:set var="jvar_notification_id" value="${sysparm_notification_id}"/>
<j:set var="jvar_record_id" value="${sysparm_record_id}"/>
<j:set var="jvar_user_id" value="${sysparm_user_id}"/>
<style>
.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}   
</style>


<div class="iframe-container">
<iframe scrolling="yes" src="/notification_preview_html_body.do?sysparm_record_id=${jvar_record_id}&amp;sysparm_user_id=${jvar_user_id}&amp;sysparm_event_id=&amp;sysparm_notification_id=${jvar_notification_id}"/>
</div>

</j:jelly>

Create UI Action on that custom table

Name: Preview Notification

Table: Your custom table

Client: true (checked)

Form Button: true (checked)

Onclick: previewNotification()

Script

function previewNotification() {

    //Replace the sys_id of your notification here
    var notificationID = "5d078413c0a801640144dc7bc70871ce";
    //This is the sys_id of your current record
    var recordID = g_form.getUniqueValue();
    //This is the logged in user's sys_id
    var userID = g_user.userID;

    var dialogClass = GlideModal ? GlideModal : GlideDialogWindow;
    var dd = new dialogClass("custom_preview_notification");
    dd.setTitle("Notification Preview");
    dd.setWidth(800);
    dd.setPreference("sysparm_notification_id", notificationID);
    dd.setPreference("sysparm_record_id", recordID);
    dd.setPreference("sysparm_user_id", userID);
    dd.render();
}

You just need to replace the sys_id of the notification record which is to be previewed.

And here is the result:

On clicking the button, you get:

That's all ! I believe it could be handy, so thought of sharing it

Thank you for taking the time to look at this. I hope it can be of some use to you and your feedback is appreciated.

Cheers,

Manish Vinayak