Chat: Using "Quick Messages" (sys_email_canned_message) from email editor in chat - Solution

[TrevorK]

I did some digging before I wrote this and found many references to people who wanted a "Quick Message" functionality within Chat. However, I could not find anyone who had an entire solution put together (most people stopped at just displaying a static message through the Chat Actions), so I developed the following code. Hopefully this can help some people, I know our analysts that use Chat are really looking forward to using this because it can cut down on their typing time quite a bit.

Limitations:

- Chat does not allow HTML code, so I strip it out. I still save the links (otherwise it would just show the display text)

- You have to press "enter" after you select the message / close the window. I could insert into the chat_message table, but thought that might be something for round 2

I would appreciate any and all feedback on this on improving the code or functionality.

There are two pieces - UI Page and Chat Action.

Chat Action

var gdw = new GlideDialogWindow("chat_quick_message_popup");
gdw.setTitle("Chat Quick Message");
gdw.render();

UI Page (HTML)

<?xml version="1.0" encoding="utf-8" ?>
<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">

<g:ui_form>

<!-- Build our table -->
<table width="320px">
   <tr>
       <td align="left">
           Quick Message:
       </td>
       <td align="left">
           <g:evaluate jelly = "true">
               var qm = new GlideRecord("sys_email_canned_message");
               qm.addQuery('user',gs.getUserID());
               qm.orderBy("title");
               qm.query();
           </g:evaluate>
           <select id="quick_message_dropdown" onchange="Edit_QM(this)" style="width:200px">
                   <option value="">-- NONE --</option>
               <j:while test="${qm.next()}">
                   <option value="${qm.sys_id}">${qm.title}</option>
               </j:while>
           </select>
       </td>
   </tr>
</table>


<textarea id="quick_message_itself" rows="10" cols="100"></textarea>
<br /><br />
<g:dialog_buttons_ok_cancel ok="return OK_Click()" ok_id="ok_button" cancel_type="button" />

</g:ui_form>
</j:jelly>

UI Page (Client Script)

function OK_Click() {
       var gr = new GlideRecord("sys_email_canned_message");
       gr.addQuery('sys_id',gel('quick_message_dropdown').value);
       gr.query();

       if (gr.next()) {
               // This puts the text into the "textarea", which is where you
               // type in the chat message
               var body = document.getElementById('quick_message_itself').value;
               document.getElementsByTagName("textarea")[0].value = body;

               GlideDialogWindow.get().destroy();

               // If we return true, it reloads the UI Page and navigates away from chat
               return false;
       }
       else {
               GlideDialogWindow.get().destroy();
       }
}

function Edit_QM(qm) {
       var qm_sys_id = gel('quick_message_dropdown').value;

       var gr = new GlideRecord("sys_email_canned_message");
       gr.addQuery('sys_id',qm_sys_id);
       gr.query();

       if (gr.next()) { 
               // Stripping HTML - Chat is plain text so HTML shows in code form
               // This strips all HTML and removes the line breaks.

               // Replacing all the tags for line breaks with \n so they show up
               fixed = gr.body.replace(/<a href=\"([^\"]*)\"(.*?)<\/a>/ig, "(External Link: $1 )")
                       .replace(/<(?:br|\/div|\/p)>/g, "\n")
                       .replace(/ /g,"\n")
                       .replace(/<.*?>/g, "");
               // why don't I do something here to put the URL in? Check for href, etc..?
               /* Translation:
               - starts with <a href="
               - all characters up to and including the next "
               - The ">
               - (.*?) - make it lazy so it matches first, otherwise it matches last and you only ever end up with one
               - ends at /a>
               - i = case insensitive
               - g = global */

               var myTextArea = document.getElementById('quick_message_itself');
               myTextArea.innerHTML = fixed;
       }
       return false;
}

[rexter]

Hi Trevor!

Many thanks for your post, very helpful, I'm looking for a very similar solution.

I have one problem with your solution, may you can help me out.

So the Quick message button is there, the Page popups and I can select from drop down what message is associated with the agent.

But the body itself is not filled with the quick message body

So the quick_message_itself textarea remains empty. Cannot figure it out why. Do you have any suggestion?

Thanks a lot!

[TrevorK]

If I understand correctly, the problem is that you cannot get the text from the quick message onto the UI page (to edit before putting into the chat area)?

The area of code that deals with this is the "Edit_QM" function (line 22-52 above). My sequence to troubleshoot would be:

1) Comment out the stuff in the Edit_QM function. Add in the following instead:

var myTextArea = document.getElementById('quick_message_itself');   

myTextArea.innerHTML = "Test"; 

return false;

This will just put the phrase "Test" in the field.  

a) If this does not work, we know it's a problem that could be as simple as the field name wrong (quick_message_itself). We would use the browser tools (like the "inspect element" in chrome) to see what is erroring out. This would typically be a spelling mistake/missed copying something.

b) If this does work, then we would begin troubleshooting the client script. I look at whether you are obtaining the right sysid for the query (line 23), whether the query actually returns a result, whether the regex is stripping everything away (so what is gr.body before we mess with it), etc. You can use alerts or console.log statements to do the troubleshooting (whatever you are comfortable with).

Hope that helps! Any questions let me know!

[rexter]

Thank you Trevor,

My college helped me out, as you mentioned one of the solution could be that comment out that section.

Also we figured out that an ACL needed on sys_email_canned_message to have read right for 'itil' roled users.

We are in a really good progress, also making some improvement as

- control the quick messages listing by groups, not only agents. so we could use the group field also.

- have the quick messages submit to chat window directly after hit the OK button on Quick messages page.

thanks again, may I will update this topic later with our developments.

regards,

Laszlo

[TrevorK]

Sorry - the ACL must have been something we set in our environment long ago! I didn't even think of it.

In regards to submitting to the window directly, we attempted to mimic the "enter" press, but could only do it on older browsers (newer ones didn't do it for security reasons). We were going to write directly to the chat queue entry table directly on press, but have not got around to testing it yet. On the surface this seems like the easiest way to do it.

It's definitely something our contact centres want (less clicks makes them more efficient), so I would love to see what you come up with and will share what we come up with (if you do not come up with it first) but this is way down on my priority list right now so it might be awhile.

[zica]

Hello Snow Community,

To start, I would like to thank you for your post.

I would like to have further information please.

I did not understand correctly the purpose of the quick message.

However, I tried to implement the script and the window popups but when I set a message, nothing is happening.

It just opens a new window on the browser. Please see the screenshot below :

Where should the message go ? Where in the Servicenow interface could I find the quick message ?

I am sorry, I started working on servicenow recently.

I look forward to your reply and thank you again

Kind regards

ZA