Stumbling through Service Portal: Embedding Video Tags in KB Articles

My journey through the Service Portal continues this week with an unexpected turn – adding video tags to the HTML of knowledge articles.  This started from a request from a manager in another group, asking if it was possible.  We found a few questions and answers on the community, but no complete answers.  Finally, we recently had a breakthrough, and in the spirit of sharing knowledge (pun intended), I thought I’d make it known.

The Manual Way

If you’re interested in the manual way, the guys over at ServiceNow Guru have written a good piece about handling this manually.  My co-worker had sent me this article, and to be honest, I was expecting something like what I’m about to explain below.  Editing the source code is good for technical users (probably like you!), but as I’ve run into lately, I should be designing solutions for the every-user, not just users who have some technical knowledge.  Making some person in a non-IT role edit HTML is probably going to scare them off, even if it’s really simple to you and me.  Everyone has different strengths – the people who can’t write HTML are probably a hundred times better than me at doing something in Finance, HR, Communications, etc.  So I’m not knocking their solution, I just think we can enhance it!

The TinyMCE Editor

Having said the above, I need to add yet another preface: This solution is only good for as long as ServiceNow uses the TinyMCE editor for HTML fields.  So if you’re in a future where that no longer applies, I apologize, since this probably won’t be that helpful.  But if you’re in 2017 like I am as of this writing, the TinyMCE editor is in use, and this next bit is the key to the whole solution.  Go to your instance, and append “scripts/tinymce4/tinymce.full.jsx” at the end of the url.  (So it’ll look like “https://my-instance.service-now.com/scripts/tinymce4/tinymce.full.jsx”.)  Take some time to examine that script.

Replacing “Embed” with “Video”

Search through the code for “embed”.  It should put you into a function called SNTinyMCEMedia.  This is the function we need to override.

Warning: Overriding this function can cause breaks in the future.  ServiceNow will likely at some point update this code for bug fixes or system optimizations.  It’s possible by doing this today, you’re going to break something in the future.  Just keep that in mind before proceeding.

Create a new UI script.  Name it, and make it Global.  Copy the SNTinyMCEMedia function, and paste it into your UI script.  Edit the “createVideoText” function to look something like this:


Now, assign that function to a variable, perhaps something like MySNTinyMCEMedia.  Now for any form where you have an HTML field, you’ll need an onLoad client script, where you set window.SNTinyMCEMedia to be MySNTinyMCEMedia.  Voila.  You’ve replaced the OOB function with your own, and the editor will now create “video” tags instead of “embed” tags.  Of course, there are more attributes for the video tag that you may wish to add, so feel free to add those to your code.  I’m not here to tell your videos how to appear or load.  Just how to get them to show up in the first place.

If your HTML is stripping them out after save, refer to the SN Guru article on adding them to the HTML_WHITELIST object/script include.

Of course, you can take this same logic and replace the functionality of any of the TinyMCE editor buttons.  Again, let me warn you.  Doing this is a risk.  As long as you’re willing accept the risk (and not blame me for pointing this out), feel free to use it.  Ok, you can blame me, I guess.  But I’ll take no responsibility for your breaks.

Enabling mp4 in your instance

Out of the box, mp4 is not a recognized video type.  Fortunately, lots of smart people in the ServiceNow community have figured out how to allow it.  Navigate to System UI > Embed Object Types.  Create a new record with the following information:

  • Extension: mp4
  • Active: true
  • Clsid: 22D6F312-B0F6-11D0-94AB-0080C74C7E95
  • Embed type: video/quicktime
  • Codebase: http://www.apple.com/qtactivex/qtplugin.cab
  • Pluginspage: http://www.apple.com/quicktime/download

You may be wondering why we’re doing this with Quicktime and not Windows Media Player.  In our testing, we’ve noticed that Safari doesn’t like it when you do the configuration below.  Chome and Firefox don’t care either way.

  • Extension: mp4
  • Active: true
  • Clsid: 22D6F312-B0F6-11D0-94AB-0080C74C7E95
  • Embed type: video/mp4
  • Codebase: https://activex.microsoft.com/activex/controls/mplayer/en/nsmp2inf.cab
  • Pluginspage: https://www.microsoft.com/Windows/MediaPlayer/

You can only enter one of these, so I’d chose the former over the latter.  Unless you hate Safari, that is.  But since it’s a default on Macs, and people like Macs, I’d still probably go with the first one.

You can find all the files (including the Embed Object Types, the UI script, and the Client Script for the kb_knowledge table) here.

Hopefully you find this useful, and can even extend the functionality of other buttons on the TinyMCE editor.  Once more, a warning: it can cause breaks, and HI Support is just going to tell you “you shouldn’t have messed with this functionality”.  Maybe they’re right…but what’s the fun in that?

EDIT: Updated some sentences where I obviously forgot how to English.

Advertisements

2 thoughts on “Stumbling through Service Portal: Embedding Video Tags in KB Articles

  1. I think it’s nuts we have to do this in 2017… anyway I noticed these:

    1. You’ve replaced the OOB function with your own, and the editor will now create tags instead of tags.

    2. Once more, a warning: it can cause breaks, and HI Support is just going to tell you “you should’ve have messed with this functionality”. Maybe they’re right…but what’s the fun in that?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s