Advanced Customization of the User Web Interface - Javascript examples

The following are example JavaScript snippets that can be used to customize the User web interface. Functions from the JavaScript library JQuery are used in many of the examples below. Documentation on the JQuery site may assist with additional customization. Please Note: A lot of the examples here are still useful if you’re looking for advanced customization of the User Web pages. With version 17.2, a lot more customization options were added, for example ‘adding an extra navigation menu item’ is now available through the Customize User Web Pages section. We recommend looking through the Customize User Web Pages section of the Help Center first, and if you’re not able to find the right option, take a look through these code-level examples instead! The snippets below are best placed in the footer3.inc file for User web interface customization - as detailed in the Customize User Web Pages section. However if you’re running a version prior to 17.2, it should placed in footer2.inc. Change a navigation menu label For example if you want to change the ‘Redeem Card’ menu item to ‘Activate Card’ instead. <script type="text/javascript"> $(function() { $('#linkUserTopUpCards').text('Activate Card'); }); </script> Add text to a page This example lets you add additional text to a particular page - for example this adds additional help text to the ‘Transfers’ page. <script type="text/javascript"> $(function() { if ($('#main h1').text() == 'Transfers') { $('#main h1').after("<p>Enter the receiving user's login name in 'Transfer to user'.</p>"); } }); </script> Hide table columns If you’re wanting to hide particular columns from a table on one of the pages - for example the printer names. <script type="text/javascript"> $(function() { $('th.accountNameColumnHeader').hide(); $('td.accountNameColumnValue').hide(); $('th.printerDisplayNameColumnHeader').hide(); $('td.printerDisplayNameColumnValue').hide(); }); </script> Hide print job costs If you’d like to hide the print job costs from the ‘Recent print jobs’ page. <script type="text/javascript"> $(function() { //If the title of the page is 'Recent Print Jobs' if (document.title.includes('Recent Print Jobs')) { //For each print job for current user $('table.results td.usageCostColumnValue').each(function() { // remove the cost from each row of the usage table //$(this).closest('tr').find('td.statusColumnValue a:contains(request refund)').closest('td').remove(); $(this).text(''); }); } }); </script> Remove the server-name from the printers list in Web Print Some customers want to remove the server name in the Web Print printer list mainly because server names are often confusing. Others may have security concerns. <script type="text/javascript"> $(function() { $('.web-print-printer-list td.displayNameColumnValue label').contents().filter(function() { // text nodes only (so as to avoid selecting the radio button) return this.nodeType == 3; }).each(function() { var text = $(this).text().trim(); // There is a text node before the radio button. Ignore it. if (text.length > 0) { var printerName = text.substring(text.indexOf('\\') + 1); $(this).replaceWith(printerName); } }); }); </script> Removing user balance / balance graph If you’re wanting to hide the balance and the balance graph (Version 12 and later). <script type="text/javascript"> $(function() { // check that we're on the Summary page if ($('#main h1:eq(0)').text() == 'Summary') { // hide the current balance display (blanks out the second row in the table) $('table.userDataTable tbody tr:eq(1) th').text(""); $('table.userDataTable tbody tr:eq(1) td').text(""); // remove the activity heading and balance graph (hides the second heading and following section on the page) $('#main h2:eq(0)').next().hide(); $('#main h2:eq(0)').hide(); } }); </script> Change the order of the navigation items This example will move “Web Print” menu item to the top of the list. Note that you can also change the initial page shown after the user logs into the User Web Pages, through the admin interface: Options → General → User Features → Initial page displayed after successful login. <script type="text/javascript"> $(function() { // Change the name below to match the link you'd like to put on the top var LINK_TO_MOVE = "Web Print"; var $navList = $('div#nav').find('ul'); var $linkToMove = $navList.find(":contains('" + LINK_TO_MOVE + "')").parents('li'); $navList.prepend($linkToMove); }); </script> or the example below will change order of the navigation menu links using the link Ids. This will move the ‘Jobs Pending Release’ link below the ‘Summary’ link. <script type="text/javascript"> $(function() { $('#linkUserReleaseJobs').parents('li:first') .remove() .insertAfter($('#linkUserSummary').parents('li:first')); }); </script> Hiding a navigation item This example will move “Recent Print Jobs” menu item from the list. <script type="text/javascript"> $(function() { // Removing the Recent Print Jobs link from the navigation menu $('#linkUserPrintLogs').remove(); }); </script> Disabling ‘refund request’ for print jobs based on server In a multi-tenancy scenario, some customer may be interested in disabling the refund request links for jobs sent via selected servers. <script type="text/javascript"> var disableRefundOnServers = [ //Create a collection of servers to disable the refund request option for 'marketing-server', 'science-server' ]; $(function() { //If the title of the page is ‘Recent Print Jobs’ if ($(’#main h1’).text() == ‘Recent Print Jobs’) { //For each printer display name column in the data table $(’table.results td.printerDisplayNameColumnValue’).each(function() { //Use string functions to extract the printer name var printerFullName = $(this).text().trim(); var serverName = printerFullName.substring(0, printerFullName.indexOf(’\’)); //If the printer name is in the collection of servers to disable links for if ($.inArray(serverName, disableRefundOnServers) >= 0) { //Traverse up and down the DOM for the table to find the refund link and remove it $(this).closest(’tr’).find(’td.statusColumnValue a:contains(request refund)’).closest(’td’).remove(); } }); } }); </script> 17.1 or older Moving logged-in-as into the header Moves the section that shows the currently logged in user from the footer to the header. This example will place the ‘logged in as’ div element after an element with the id ‘header-logo’ (this ID will not exist by default and must be created in a custom header2.inc file). Note that with 17.2 or newer, the logged in as username is already at the top of the User Web Interface in the header. <script type="text/javascript"> $(function() { $('#logged-in-as').remove().insertAfter('#header-logo'); }); </script> Adding an extra navigation menu item Note that with 17.2 or newer, this can now be done simply through the admin interface: Additional links in the navigation menu <script type="text/javascript"> $(function() { $('#nav ul').append('<li><a href="/help">Help</a></li>'); }); </script> Removing user balance and the balance graph If you’re wanting to hide the balance and the balance graph (prior to Version 12). <script type="text/javascript"> $(function() { // check that we're on the Summary page if ($('#main h1:eq(0)').text() == 'Summary') { // hide the current balance display (blanks out the second row in the table) $('table.userDataTable tbody tr:eq(1) th').text(""); $('table.userDataTable tbody tr:eq(1) td').text(""); // remove the activity heading and balance graph (hides the second heading and following section on the page) $('#main h1:eq(1)').next().hide(); $('#main h1:eq(1)').hide(); } }); </script>