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;
}

[chrisp1]

Hi Trevor,

Love the idea here and this is something I have been asked to implement. I've put your code in but I just get page not found when I click the link from within chat, is there any other setup required?

cheers

Chris

[TrevorK]

No, that should be it since it just calls a UI Page. I am going to ask the dumb question - did you call your UI Page "chat_quick_message_popup"? And the "Chat Action" piece is in the OnClick Action Script piece? If you cannot get any UI Page to load, I would assume it has more to do with the Chat Action piece.

If you are using Fuji I am more than happy to pop it into my Developer Instance and give you the XML of it working from within there. Otherwise if you are using Eureka I can give you the update set I used to push it into our production environment.

[chrisp1]

Ha, not a dumb question aftrer all! Thanks it's displaying the page now, but none of my quick messages are displaying in the dropdown.

[TrevorK]

Does the user account that you are performing the test under have any quick messages directly associated to them through the "user" column in the quick messages table?

In our environment a requirement was that the users only be able to see their personal quick messages, they do not want to see those of other people. Because of this, line 14 of the UI Page (HTML) section has a filter to limit the results to only those of the user that is logged in. So if your admin account (or whatever you do development and testing under) does not have any associated (via the "user" field), you will see nothing.

You can comment out line 14 and just see them all during testing. Let me know if that does the trick!