Blog

Non-Scrolling News Widget

There is a news widget included with ServiceNow with a scrolling feature.  I don't like the scrolling feature, because I would rather just see a list of items all at once.

So I made a gadget that doesn't have the scroll.  

Screenshot

News Widget (Click to Expand)

Notes

1. This widget has html formatting you can remove or adjust to match your instance.
2. This widget can be used on a homepage or cms site.  You may want to create two news widgets, one for homepages, and another for a cms site, depending on what is needed.

How to create the News Widget

Step 1: Adjust the "Gadgets" Widget

1. In the Left Navigation Bar, Go to System UI > Widgets.
2. Open the "Gadgets" widget.
3. Adjust the function sections() to include your new widget.

function sections() {
return {
'Sticky Note' : { 'type' : 'sticky', 'content' : 'Default sticky note text here.' },
'News' : { 'type' : 'news' },
'SNE News' : { 'type' : 'sne_news' },
'System Information' : {
'Overview' : { 'type' : 'system', 'action' : 'overview' },
'Last Upgrade' : { 'type' : 'system', 'action' : 'upgrade_history' }
},
'Priority 1 Incidents' : { 'type' : 'priority_incidents' },
'Priority 1 Problems' : { 'type' : 'priority_problems' },
'Emergency Changes' : { 'type' : 'emergency_changes' },
'Knowledge Search' : { 'type' : 'knowledge_search' }
};
}

4. Click Save

Step 2: Add the UI Page

1. In the Left Navigation Bar, Go to System UI > UI Pages.
2. Click New
3. Add New UI Page

UI Page: render_gadget_sne_news

HTML:
<g:ui_form>
      <g:ui_table>
        <table id="sne_news_gadget" cellspacing="0" cellpadding="0" align="center" style="background:#EEEEEE;border:none;width:700px;padding-bottom:10px;">
         <tr style="background:#003F5D;"> 
            <td colspan="2" style="padding-left:10px;text-align:center">
               <p><span style="color:#FFF;font-size:30px;"><strong>NEWS</strong></span></p>
            </td>
         </tr>
         <tr style="height:10px;"><td></td></tr>
         <g:evaluate>
            var kb = new GlideRecord('kb_knowledge');
            kb.setCategory('homepage');
            kb.addQuery('topic','News'); 
            kb.setLimit(5);
            kb.orderByDesc('published');
            kb.query();
         </g:evaluate>
         <j:while test="$">
            <tr style="height:24px;">
               <td style="padding-left:20px;">
                  <a class="linked" target="_self" href="kb_view.do?sys_kb_id=$[kb.sys_id]">$</a>
               </td>
               <td style="float:right;padding-right:0px;">$</td>
            </tr>
         </j:while>
         <tr>
             <td style="padding-top:10px;" align="center" colspan="2"><a href="kb_list.do?jvar_view_topic=News" class="linked">${gs.getMessage("View all active news")}</a></td>
         </tr>
       </table>
      </g:ui_table>
</g:ui_form>

4. Click Save

Step 3: Add to Home Page

1. When viewing a Home Page.  Click add content
2. Click Gadgets > SNE News
3. Gadget is added to the form

News Widget (Click to expand)