Skip to main content
ExLibris
  • Subscribe by RSS
  • Ex Libris Knowledge Center

    What kinds of things can a library put in Summon Custom Panels?

    • Product: Summon

    Here are examples of Custom Panels that have been created by both support staff and other clients.

    Please note these scripts are provided as a courtesy and are not supported by Ex Libris. Usage, edits to, and maintenance of the code is the responsibility of the library. Ex Libris support is unable to provide troubleshooting assistance for any issues with this code.

    If you see a widget not listed here you think would be helpful for other libraries, please feel free to let us know by opening a case and putting "Summon Custom Panel Widget" in the subject.

    Publication Finder

    Created by: Ex Libris Staff

    Example: http://support.summon.serialssolutions.com/#!/search?ho=t&l=en&q=test

    Description: This panel re-runs the Summon query in the customer's E-Journal Portal, and then displays the results within the panel.

    <div id="mydiv"></div>
    <script src="https://local.4libs.org/apps/summon/ShowJournal.js?libhash={LIBHASH}"></script>
    

    Notes on installation: This panel requires the 360 Link API to be activated. For more information, please see this article. It also works best when this panel is the first in the Custom Panels section.

    Please copy the following JavaScript file and CSS file to your own webspace. Remotely link it from there and put your libhash in the appropriate spot.

    JavaScript file (save as ShowJournal.js):

    $('head').append('<link rel="stylesheet" href="https://local.4libs.org/apps/summon/ShowJournal.css" type="text/css" />');	
    $('div#rightPane div.customSections li h3[ng-bind="::section.title"]').filter(function(index){ return $(this).text()=="Journal & Book"}).parent(".content").css("display","none");
    setTimeout(function() {
    		callAtoZ();
    	}, 500);
    
    
    	
    function callAtoZ()
    {
    	var currentURL=location.href;
    	var currentQuery=getQueryParameter( currentURL,"q");
    	var scripts = document.getElementsByTagName('script');
    	var myScript;
    	for( var i=0; i<scripts.length; i++)
    	{
    		if(scripts[i].src.search("ShowJournal.js")>0)
    		{
    			myScript=scripts[i].src;
    			break;
    		}
    	}
    	var queryString = myScript.replace(/^[^\?]+\??/,'');
    	var params = parseQuery( queryString );
    	var libhash=params['libhash'];
    	var onlyJournal=false;
    	var onlyBook=false;
    	if( "journal" in params ) {
    		if(params['journal'])
    			onlyJournal=true;
    	}
    	if( "book" in params ) {
    		if(params['book'])
    			onlyBook=true;
    	}
    	var yql="https://local.4libs.org/apps/summon/GetJournalAndBook.php?libhash="+libhash+"&title="+currentQuery;
    	
    		$.ajax
    		({
    			type: 'GET',
    			dataType: 'jsonp', 
    			crossDomain: true, 
    			url:yql,
    			success: function(data) 
    			{
    				var number = Object.keys(data).length;
    				var contents='';
    				var journalContents="";
    				var bookContents="";
    				var lineFeed="<br>";
    				
    
    				if(number>0)
    				{
    					$('div#rightPane div.customSections li').first().css("display","block");
    					//$('div#rightPane div.customSections li h3[ng-bind="::section.title"]').first().css("display","none");
    				}
    
    				for( var i=0; i<number; i++)
    				{
    					var title=data[i]['title'];
    					var pidentifer=data[i]['pidentifer'];
    					var eidentifer=data[i]['eidentifer'];
    					var format=data[i]['format'];
    					var dbLine;
    					var space="&nbsp";
    					var comma=",";
    					var colon=":";
    						
    					content=content+"<div>";
    					if((format=='journal')&&(onlyBook==false))
    					{
    						if(title)
    						{
    							journalContents=journalContents+"<span><b>"+title+"</b></span>";
    						}
    						if(pidentifer)
    						{
    							journalContents=journalContents+"<span>"+space+pidentifer+"</span>";
    						}
    						if(eidentifer)
    						{
    							if(pidentifer)
    								journalContents=journalContents+"<span>"+comma+space+eidentifer+"</span>";
    							else
    								journalContents=journalContents+"<span>"+space+eidentifer+"</span>";
    						}
    
    						var holdingCount=data[i]['holdings']['dbname'].length;
    						for( var j=0; j<holdingCount; j++)
    						{
    							if((data[i]['holdings']['dbname'][j])&&(data[i]['holdings']['url'][j]))
    							{
    								dbLine="<div style='text-indent:15px'><a target='_blank' href='"+data[i]['holdings']['url'][j]+"'>"+data[i]['holdings']['dbname'][j]+"</a>";
    							}
    							else if(data[i]['holdings']['dbname'][j])
    							{
    								dbLine="<div style='text-indent:15px'>"+data[i]['holdings']['dbname'][j];
    							}
    
    							if(data[i]['holdings']['startdate'][j])
    							{
    								dbLine=dbLine+"&nbsp;"+"from"+"&nbsp;"+data[i]['holdings']['startdate'][j];
    							}
    
    							if(data[i]['holdings']['enddate'][j])
    							{
    								dbLine=dbLine+"&nbsp;"+"to"+"&nbsp;"+data[i]['holdings']['enddate'][j];
    							}
    							else
    							{
    								dbLine=dbLine+"&nbsp;"+"to present";
    							}
    							dbLine=dbLine+"</div>";
    							journalContents=journalContents+dbLine;
    							dbLine="";
    						}
    					}
    					else if((format=='book')&&(onlyJournal==false))
    					{
    						if(title)
    						{
    							bookContents=bookContents+"<span><b>"+title+"</b></span>";
    						}
    						if(pidentifer)
    						{
    							bookContents=bookContents+"<span>"+space+pidentifer+"</span>";
    						}
    						if(eidentifer)
    						{
    							if(pidentifer)
    								bookContents=bookContents+"<span>"+comma+space+eidentifer+"</span>";
    							else
    								bookContents=bookContents+"<span>"+space+eidentifer+"</span>";
    						}
    						
    						var holdingCount=data[i]['holdings']['dbname'].length;
    						for( var j=0; j<holdingCount; j++)
    						{
    							if((data[i]['holdings']['dbname'][j])&&(data[i]['holdings']['url'][j]))
    							{
    								dbLine="<div style='text-indent:15px'><a target='_blank' href='"+data[i]['holdings']['url'][j]+"'>"+data[i]['holdings']['dbname'][j]+"</a>";
    							}
    							else if(data[i]['holdings']['dbname'][j])
    							{
    								dbLine="<div style='text-indent:15px'>"+data[i]['holdings']['dbname'][j];
    							}
    
    							if(data[i]['holdings']['startdate'][j])
    							{
    								dbLine=dbLine+"&nbsp;"+"from"+"&nbsp;"+data[i]['holdings']['startdate'][j];
    							}
    
    							if(data[i]['holdings']['enddate'][j])
    							{
    								dbLine=dbLine+"&nbsp;"+"to"+"&nbsp;"+data[i]['holdings']['enddate'][j];
    							}
    							else
    							{
    								dbLine=dbLine+"&nbsp;"+"to present";
    							}
    							dbLine=dbLine+"</div>";
    							bookContents=bookContents+dbLine;
    							dbLine="";
    						}						
    					}
    				}
    				if(journalContents)
    					contents="<a href='#' class='format'>Journal</a>"+lineFeed+journalContents+lineFeed;
    				
    				if(bookContents)
    					contents=contents+"<a href='#' class='format'>Book</a>"+lineFeed+bookContents;
    
    				contents=contents+"</div>";
    				$('div#mydiv').html(contents);
    				$('.format').css({
    						"background-color":" #29b6f6 ",
    						"-moz-border-radius":"3px",
    						"-webkit-border-radius":"3px",
    						"border-radius":"3px",
    						"border":"0.3px solid  #e0e0e0 ",
    						"display":"inline-block",
    						"cursor":"pointer",
    						"color":"#ffffff",
    						"font-family":"Arial",
    						"font-size":"13px",
    						"font-weight":"bold",
    						"padding":"5px 11px",
    						"width":"100%",
    						"text-decoration":"none"
    						
    					});
    			}
    		});
    		
    }
    
    function parseQuery ( query ) {
       var Params = new Object ();
       if ( ! query ) return Params; // return empty object
       var Pairs = query.split(/[;&]/);
       for ( var i = 0; i < Pairs.length; i++ ) {
          var KeyVal = Pairs[i].split('=');
          if ( ! KeyVal || KeyVal.length != 2 ) continue;
          var key = unescape( KeyVal[0] );
          var val = unescape( KeyVal[1] );
          val = val.replace(/\+/g, ' ');
          Params[key] = val;
       }
       return Params;
    }
    
    function getQueryParameter ( source, parameterName ) {
      var queryString = source;
      var parameterName = parameterName + "=";
      
      if ( queryString.length > 0 ) {
        begin = queryString.lastIndexOf ( parameterName );
        if ( begin != -1 ) {
          begin += parameterName.length;
          end = queryString.lastIndexOf ( "&" , begin );
            if ( end == -1 || begin>=end ) {
            end = queryString.length
          }
          return queryString.substring ( begin, end );
        }
      }
      return "null";
    }
    

    CSS file (save as ShowJournal.css):

    div.customSections li:first-child{
    display:none;
    }
    
    External Search By Link

    Created by: Ex Libris Staff

    Example: http://support.summon.serialssolutions.com/#!/search?ho=t&l=en&q=test (under the name 'Search the Catalog')

    Description: This panel allows the user to click a link to send the Summon search query to an external search system such as the library catalog or a union catalog.

    <script>
    // this is a script to create a custom search link in a panel
    // the link sends the query from Summon to a new search in an external system
    // get URL string
    var urlString = window.location.href;
    // init object to hold key-value pairs for URL parameters
    var params = {};
    // parse parameters
    urlString.replace(/([^=&]+)=([^&]*)/g, function(m, key, value) {
        params[decodeURIComponent(key)] = decodeURIComponent(value);
    });
    // build the link
    var searchLink = "{SEARCH_SYSTEM_BASE_URL}" + params["q"];
    // build the HTML markup and then create the new object
    var markup = "<p>Looking for more resources? Try Searching the <a href='" + searchLink + "' target='_blank'>Library Catalog</a></p>";
    var panelElement = $(markup);
    // append the new object to the container
    $("#linkContainer").append(panelElement);
    </script>
    <div id="linkContainer"></div>
    

    Notes on installation: Make sure to replace placeholder {SEARCH_SYSTEM_BASE_URL} with the URL to which you want to the query applied. In the example on the WFS demo site, {SEARCH_SYSTEM_BASE_URL} is equal to "http://olc1.ohiolink.edu/search/X?SEARCH=" .  Additionally, the markup variable can be edited to customize the text as preferred by the client. 

    Create a Hidden Panel To Run Additional JavaScript without Referencing a Hosted File

    Created by: Ex Libris Staff

    Seen at:  http://supportqa.summon.serialssolutions.com/?q=test#!/search?ho=t&l=en&q=test

    Description: This self-hiding panel allows you to run additional JavaScript without hosting a file in the 'Reference External JavaScript' field. 

    <div class="invisiblepanel">
    <script>
    $("div.invisiblepanel").parent().parent().css("display", "none");
    // YOUR ADDITIONAL CODE GOES HERE
    </script>
    </div>
    

    Notes on installation:

    • Important: When using multiple custom panels, the hidden custom panel must be in the top three panels in the list.
    • Make sure the "persistent" checkbox is ticked.
    Expand Facets By Default

    Created by: Ex Libris Staff

    Seen at:  http://ucblibraries.summon.serialssolutions.com/#!/search?ho=t&l=en&q=

    Description: This uses the self-hiding panel above and waits for the client's facets to appear. Any facets that are collapsed by default (e.g. Library Location, Language, etc.) will be expanded.

    <script>
    var sections = $(".customSections").children("ul").first();
    sections.children("li").first().css("display", "none");
    //Wait for facets to appear on page before running
    $('h3 a').ready(function() {
    //Expands any facets that are not expanded by default (e.g. Library Location and Language facets)
    $('h3 a[aria-pressed=false]').click();
    //If you only want to expand specific facets by name you can replace the line above with something like this (example for Library Location, note that this won't work if you change the label of this facet to something else): $('a:contains("Library Location")')[0].click();
    });
    //Add any additional Javascript customizations here
    </script>
    

    Notes on installation: You MUST add this is as the very first Custom Panel in your list of Custom Panels for this to work. Make sure the "persistent" checkbox is ticked.

    Add LibGuides In-Page Chat Widget

    Created by: North Carolina Central University staff

    Seen at: http://nccu.summon.serialssolutions.com/#!/search?ho=t&l=en&q=test

    Description: The native Summon Libguides integration does not support the in-page or 'embedded' widget, but this style of widget can be added easily via a Custom Panel. For assistance with widget code generation, please view SpringShare's widget creation guide.

    Notes on installation: Make the below modification to the generated Springshare code, then paste it into a Custom Panel.

    Remove or comment out line 5: if(!d.getElementByID(id)){, including the curly brace. Here is sample code for context:

    <div id="s-lg-widget-1583758746264"></div>
    <script>
         !function(d,s,id){
              var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';
             if(!d.getElementById(id)){
                   js=d.createElement(s);
                   js.id=id;
                   js.src=p+"://lgapi-us.libapps.com/widgets.php?site_id=6293&widget_type=2&search_terms=&search_match=2&subject_ids=&sort_by=name&list_format=2&drop_text=Select+a+Database...&output_format=1&load_type=2&enable_description=0&widget_title=A-Z+Database+List&widget_height=250&widget_width=100%25&widget_link_color=2954d1&widget_embed_type=1&num_results=0&enable_more_results=1&window_target=2&config_id=1583758746264";
                   fjs.parentNode.insertBefore(js,fjs);
              }
         }
         (document,"script","s-lg-widget-script-1583758746264");
    </script>
    
    Add Other Libguides as Drop-Down list

    Created by: US Naval Academy staff

    Seen at: http://usna.summon.serialssolutions....&l=en&q=nimitz

    Description: You can embed lists of LibGuides for easy access in Summon. For assistance with code generation, please view SpringShare's widget creation guide.

    Notes on installation: Paste the code generated from SpringShare into a Custom Panel.

    Display Custom Panels on Mobile Summon Site

    Created by: Ex Libris Staff

    Seen at (best viewed on mobile device to see the result):  http://support.summon.serialssolutions.com/#!/search?ho=t&l=en&q=chemistry

    Description: The following code, added via a hidden custom panel, allows you to display your custom panels on the mobile-version of your Summon site. When the width of a browser is less than 1024 pixels the custom panels relocate to the top of the page. 

    <div class="invisiblepanel">
    <script>$("div.invisiblepanel").parent().parent().css("display", "none");
    // YOUR ADDITIONAL CODE GOES HERE
    jQuery(document).ready(function() {
        var customSections = jQuery(".customSections");
        var currentWidth = jQuery(window).width();
        if (currentWidth < "1024") {
            jQuery(".topicSummaryContainer").before(customSections);
        }
    });</script>
    </div>
    

    Notes on installation: 

    • Important: When using multiple custom panels, this hidden custom panel for mobile must be in the top three panels in the list.
    • When creating the custom panel click on the Tools drop-down menu and select <> Source Code which will then open a text box where you paste the above code. 
    • Make sure the "persistent" checkbox is ticked.
    Expand Custom Panels by Default

    Created by: Ex Libris Staff

    Seen at:  http://supportqa.summon.serialssolutions.com/?q=test#!/search?ho=t&l=en&q=test

    Description: The following code, added via a hidden custom panel, will expand all visible custom panels by default so that users don't have to click on the "More..." link.

    <div class="invisiblepanel">
    <script>
    $("div.invisiblepanel").parent().parent().css("display", "none");
    // YOUR ADDITIONAL CODE GOES HERE
    setTimeout(function() {
    var moreLink = $(".customSections").children("ul").children("li").last().siblings("a")
    moreLink.click();
    }, 1000);
    
    </script>
    </div>
    

    Notes on installation: 

    • Important: When using multiple custom panels, this hidden custom panel must be placed in the first or second position near the top. 
    • When creating the custom panel click on the Tools drop-down menu and select <> Source Code which will then open a text box where you paste the above code. 
    • Make sure the "persistent" checkbox is ticked.

     


    • Article last edited: 28-Aug-2020