Preview Notification option on a Custom Form

Ankur31
Kilo Contributor

I have a custom table and I am using that to send notification once a certain state is reached. Is there a way for me to give a preview notification that is going to be sent?

1 ACCEPTED SOLUTION

Manish Vinayak1
Tera Guru

Hi Ankur,

That's an interesting one and a tough one. The OOB preview notification button uses a UI Page to process the preview, the UI Page is:

notification_preview

But on opening that UI Page you will find that it uses some template to generate the preview:

<?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>	

And you can't find that notification_preview.xml anywhere 😞

 

However, I tried to check the processing behind the scenes, identified the page and I was able to deduce a solution for your requirements 🙂 

Following is the solution:

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.

Hope this helps!

Cheers,

Manish

View solution in original post

6 REPLIES 6

Manish Vinayak1
Tera Guru

Hi Ankur,

That's an interesting one and a tough one. The OOB preview notification button uses a UI Page to process the preview, the UI Page is:

notification_preview

But on opening that UI Page you will find that it uses some template to generate the preview:

<?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>	

And you can't find that notification_preview.xml anywhere 😞

 

However, I tried to check the processing behind the scenes, identified the page and I was able to deduce a solution for your requirements 🙂 

Following is the solution:

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.

Hope this helps!

Cheers,

Manish

Thanks Manish.. I will give it a try over the weekend 

Hi Ankur,

Just wanted to check if that worked for you. How did it go?

Cheers,

Manish

Hello Manish,

I had referred your suggestion to one of my colleagues and he was able to get it done while I was out 

Thanks for your help