Expand/Collapse All Separator Modules at Once

//Expand/Collapse All Separator Modules at Once

Expand/Collapse All Separator Modules at Once

A

few weeks ago I helped a co-worker with a requirement they had to allow users to easily collapse and expand all of the module separator sections under the ‘Configuration’ application in ServiceNow. The ‘Configuration’ application is loaded with modules for all of the CMDB classes in the system. While this may be useful for admins, it can also be a lot to look at all at once under the application. Of course, you can expand and collapse the module sections to more easily display these modules but there are also about 12 of those to do! What the client wanted was to be able to click once and expand or collapse all of the module separators at once.

While this solution probably isn’t for everybody, it might save somebody some work down the road so I’ll post it here :).

Click here to see how you can add this same collapse/expand type of effect to other elements on your forms!

We were able to accomplish this by setting up an ‘HTML’ type of module under the application where we wanted the collapsible modules. Here are a couple of screenshots showing the end result for the ‘Configuration’ application…

Application Sections Expanded

Application Sections Collapsed



Here’s how you could set this up in your system for the ‘Configuration’ application. If you want to use this on other applications, simply replace all occurrences of ‘CMDB’ in the arguments below with a name that will be unique to the application that you set the module up for.

‘Collapse/Expand AppSections’ Module
Name: Collapse/Expand AppSections
Order: -20
Application: configuration_management
Link type: HTML (from Arguments)
Arguments:

<span  id="expand_appsection_CMDB" style="display: none; cursor: pointer; font-weight: bold;" onclick="collapseAppSections_CMDB(this);"><img src="images/icons/nav_collapseall.gifx"/>Collapse All Sections</span>
<span  id="collapse_appsection_CMDB" style="display: block; cursor: pointer; font-weight: bold;" onclick="expandAppSections_CMDB(this);"><img src="images/icons/nav_expandall.gifx"/>Expand All Sections</span>
 
<script>
function collapseAppSections_CMDB(el) {
   var items = el.up('.submenu').select('tr[id*=children.]').each(function(item){
      var itemEl = $(item.id.split('.')[1]);
      if(itemEl.getStyle('display') == 'block'){
         toggleSectionDisplay(itemEl.id,'arrow','');   
      }
   });
   $('collapse_appsection_CMDB').show();
   $('expand_appsection_CMDB').hide();
}

function expandAppSections_CMDB(el) {
   var items = el.up('.submenu').select('tr[id*=children.]').each(function(item){
      var itemEl = $(item.id.split('.')[1]);
      if(itemEl.getStyle('display') == 'none'){
         toggleSectionDisplay(itemEl.id,'arrow','');   
      }
   });
   $('expand_appsection_CMDB').show();
   $('collapse_appsection_CMDB').hide();
}
</script>
By | 2018-07-09T15:00:00-06:00 May 17th, 2011|Categories: System UI|Tags: , |1 Comment

About the Author:

One Comment

  1. Andreas August 12, 2014 at 10:17 am - Reply

    With UI14 the whole structure of the Navigator changed and above code no longer works.
    (instead of a table per module section it is now a combination of div and span tags)
    You don’t happen to have an updated version of this?

Leave A Comment