This method enables video to be used across the board in the HTML editor so it can be added wherever it is needed. It uses the HTML5 video tag and does require the user to be at least a little familiar with HTML but at this point that is difficult to avoid.

The first thing to do is whitelist the video and source tags in the HTMLSanitizerConfig script include. To do this replace this:

HTML_WHITELIST : {
  globalAttributes: {
    attribute:[],
    attributeValuePattern:{}
  },
},

With this:

HTML_WHITELIST : {
  globalAttributes: {
    attribute:[],
    attributeValuePattern:{}
  },
  video: {
    attribute:["width", "height", "controls", "autoplay", "loop", "muted", "poster", "preload", "src"],
    attributeValuePattern:{}
  },
  source: {
    attribute:["type", "src", "media", "sizes"],
    attributeValuePattern:{}
  }
},

To embed a video, open the article (or other record with an HTML field) and upload the video file.

Get the Sys ID of the attachment. An easy way that end users can do this is by clicking the “View” link next to the attachments.

Then copy the Sys ID from the URL.

Next click the “<>” icon to view the HTML source.

Paste in the following code, changing the value for the Sys ID parameter to that of the attachment.

<video controls="controls" width="100%" height="150">
  <source src="/sys_attachment.do?sys_id=[Sys ID of the attachment goes here]&view=true" type="video/mp4" />
</video>

NOTE: mp4 video looks to have the best support across browsers at the time of writing. The video tag has a number of options that allow for tailoring the content to the browser, device size, and other things as needed.

The post Adding Video to Knowledge Articles appeared first on ServiceNow Guru.

The first step to making this work is to define your style sheet as shown in the screenshot above. What I’ve done is obviously just an example and you can customize this however you want. Style sheets can be defined under the ‘Content Management’ application in your left navigation toolbar.

Next, right-click the style sheet record header and copy the sys_id value. You’ll need the sys_id in order to tell the system which style sheet to use.

Now comes the tricky part. You need to determine where to add the link to your style sheet. In the knowledge base example, there are a couple of options. The first is simply to place the following html tag into your article text field while in the HTML code view (where the ‘href’ attribute includes the sys_id for your CMSstyle sheet record).

Shannon’s idea was to leverage the ‘kb_view_custom’ UI macro to include the style sheet link in one place for all articles. You can do this by creating or modifying the ‘kb_view_custom’ UI macro under ‘System UI -> UI macros’ to include the same code as shown above (where the ‘href’ attribute includes the sys_id for your CMS style sheet record).

Here’s one example of what this might look like…

The post Custom CSS style sheets in non-CMS pages appeared first on ServiceNow Guru.

1) Install the Content Management and Chat Plugins

This solution doesn’t change the fact that end-user chat capability is only supported by the CMS plugin. You don’t have to set up a full-fledged CMS site, but you will need to install the plugin. Here’s the CMS wiki link for more information. You’ll also need to make sure you have the chat plugin installed.

2) Set up a new ‘Site’ record

This tutorial assumes that you don’t want to use a full CMS implementation. In order to get the chat functionality we need, you can set up a basic CMS site with a single page. Navigate to ‘Content Management->Sites’ and create a new site record. You only need to fill in the following information…
Name: Standalone Chat
Suffix: chat

IMPORTANT!!! You’ll need to come back to your site record after completing step 3 below to fill in the ‘Home page’ value for your site!

3) Create a new page for your chat site

The page is what will actually display the chat widget. The important thing here is to choose a layout that will look good in the widget we’ll create later and to make sure to associate the page to the site you created in step 2. Here are the page settings you should use based on the input from step 2 above.
Name: Chat page
URL suffix: chat
Layout: CMS 1 Column
Content site: Standalone Chat

IMPORTANT!!! Once you’ve created this page you should go back to the site record created in step 2 and set this page as the ‘Home page’ value in your site record!

4) Add a new Dynamic Content block to your page

From your new page, click the ‘Edit Page’ link at the bottom of the form. Once in the edit view, click the ‘Add content’ link and add a New Dynamic Content block as shown here…

Your Dynamic Content block should be configured with the following settings…

<div style="padding-top: 100px;">
<div class="live_workqueue_button cms_menu_vertical_blocks_container" style="margin: 0; padding: 1px 4px;">
<table>
<tbody>
<tr>
<td style="vertical-align: middle;"></td>
<td class="cms_menu_vertical_blocks_title" style="vertical-align: middle; white-space: nowrap;">
<h2>Help Desk Chat</h2>
 </td>
</tr>
</tbody>
</table>
 

</div>
</div>

CustomEvent.fire(LiveEvents.WINDOW_JOIN_QUEUE_QUERY, 'c54f0abf0a0a0b452db84664f409c79c', 'Help Desk Chat'); return false;

5) Create a UI page with an iframe for your chat page

This is really the key to the entire solution. As I’ve explained above, the ESS chat queue only works in the CMS setup. That’s why we’ve gone through all of the trouble of steps 1-4 :). Now we just need to put our CMS page in an iframe so that we can view it on a regular homepage. You can do this with a simple UI page created by navigating to ‘System UI->UI pages’, but if you want it to work in a homepage widget this step needs to be followed exactly.

<iframe id="chatframe" style="height: 320px; width: 100%;" src="chat" frameborder="0" scrolling="no"></iframe>

There are 3 important parts of this UI page. The first is the name. Because we want this to be included as a homepage widget, we need to name our UI page starting with ‘render_gadget_’. Second is the ‘src’ value from the iframe tag. This points to the suffix name of the CMS site set up in step 2 above. The third important piece is the height of the iframe. You can adjust this to meet your specific needs, but I’ve found that it should be no less than 320 pixels if you want it to look right.

6) Create or modify a Widget record

This step is only necessary if you want to display the chat button on a homepage. I’ve explained how to set up a widget and a UI page like this before so I’ll link to that solution for the instructions. Just follow the part about the widget, not the UI page there.
https://servicenowguru.com/system-ui/creating-knowledge-search-homepage-widget/

7) Add the widget to a homepage

Once you’ve set up your UI page and Widget record correctly you can open up a homepage and click the ‘Add content’ link in the top-left corner of the page. You’ll see your widget category name followed by the name of your widget in the second box to add to a homepage.

If you’ve followed the steps above correctly, you should have a working chat link on your homepage that looks like this…

Because the entire chat functionality is part of a dynamic content block, you can change the look of the button any way you like by modifying that HTML. Here’s a quick example I came up with to change the icon and the text a bit.

The post Adding ESS Chat Capability to a Standard Homepage appeared first on ServiceNow Guru.

The approach I had seen taken in the past with collapsible menus was to leverage some sort of jQuery plugin to pull in the menu items from the database. I considered this approach, but wanted something that was closer to the existing menu setup. I really didn’t want to have to include jQuery and deal with the extra burden of a completely separate library just for this purpose.

What I came up with is a fairly simple solution that overlays the existing menu HTML of a ‘Vertical Blocks’ menu with some javascript that manages the expand/collapse functionality.

Setting up the menu(s)…

The first step is to set up your menus. The only important part of this step for this solution is to make sure your menu is a VERTICAL BLOCKS menu. Other than that, simply create the menu, add sections and items below it, and include any icons you want to use. If you want to have a page with a 2-column menu setup, you’ll need to create a separate menu for each column.

Creating the content blocks…

Once you’ve created the menu(s) you need to create a dynamic content block that contains the code to add expand/collapse functionality to the menu. The code below can be used as-is in a dynamic content block in your system.

<!--?xml version="1.0" encoding="utf-8" ?-->
<table cellpadding="5">
<tbody>
<tr>
<td id="expandAllImg"><a><img src="images/icons/nav_expandall.gifx" /><b> Expand all</b></a></td>
<td id="collapseAllImg" style="display: none;"><a><img src="images/icons/nav_collapseall.gifx" /><b> Collapse all</b></a></td>
</tr>
</tbody>
</table>
<script>
Event.observe(window, 'load', function() {
  var sections = $$('tr.cms_menu_vertical_blocks_top_section');
   sections.each(function(s) {
      //If subitems
      if(s.next()){
         //Hide the subitems and add the collapse image
         s.next().hide();
         var collapseImg = s.down().insert({
            top: '<a><img src="images/arrows_expand_sm.gifx" alt="Expand" title="Expand" class="collapse_menu_icon"></img></a>'
         });
         collapseImg.down('img').observe('click', toggleSectionItems);
      }
   });
});

function toggleSectionItems(event) {
   var element = event.element();
   if(element.getAttribute('title') == 'Expand'){
      element.title = 'Collapse';
      element.src = 'images/arrows_collapse_sm.gifx';  
      element.alt = 'Collapse';
   }
   else{
      element.title = 'Expand';
      element.src = 'images/arrows_expand_sm.gifx';  
      element.alt = 'Expand';
   }
   element.up('tr.cms_menu_vertical_blocks_top_section').next().fadeToggle();
}

function showSectionItems() {
   var sections = $$('tr.cms_menu_vertical_blocks_top_section');
   sections.each(function(s) {
      //If subitems
      if(s.next()){
         s.next().fadeIn();
      }
   });
   $('collapseAllImg').show();
   $('expandAllImg').hide();
   $$('.collapse_menu_icon').each(function(i) {
      i.title = 'Collapse';
      i.src = 'images/arrows_collapse_sm.gifx';  
      i.alt = 'Collapse';
   });
}

function hideSectionItems() {
   var sections = $$('tr.cms_menu_vertical_blocks_top_section');
   sections.each(function(s) {
      //If subitems
      if(s.next()){
         s.next().fadeOut();
      }
   });
   $('collapseAllImg').hide();
   $('expandAllImg').show();
   $$('.collapse_menu_icon').each(function(i) {
      i.title = 'Expand';
      i.src = 'images/arrows_expand_sm.gifx';  
      i.alt = 'Expand';
   });
}
</script>

If you are setting up a 2-column menu page you’ll also want to create a spacer content block so that your menus line up correctly on the page.

<!--?xml version="1.0" encoding="utf-8" ?-->
<div style="margin-top: 27px;"></div>

Setting up the page

Finally, you can set up the actual CMS page containing your menu and the content block (or blocks if you’re doing a 2-column menu). The page setup should look something like the screenshot here…

If you’ve set everything up correctly you should have a nice menu page with collapsible menus! Each menu section can be expanded individually to show the items underneath it. You can also use the ‘Expand all/Collapse all’ toggle to show and hide all items under all sections on the page.

The post Collapsible CMS Menus appeared first on ServiceNow Guru.