Example JavaScript For Customization of the User Web Interface

KB Home   |   Example JavaScript For Customization of the User Web Interface

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: These examples are oriented towards customising the User web interface in releases of PaperCut NG and PaperCut MF prior to version 17.2. As of version 17.2, the User web interface has been refreshed, so the following suggested modifications may no longer be relevant. See the following section of the user manual for information on CSS modification for more recent versions of the application: Customize the User web interface

The snippets below are best placed in the footer2.inc file for User web interface customization. If running version 17.2 or above, it should placed in footer3.inc.

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. If running version 17.2 or above, it must be created in header3.inc. ).

<script type="text/javascript">
  $(function() {
    $('#logged-in-as').remove().insertAfter('#header-logo');
  });
</script>

Adding an extra navigation menu item

<script type="text/javascript">
  $(function() {
    $('#nav ul').append('<li><a href="/help">Help</a></li>');
  });
</script>

Change the label of a navigation menu item

<script type="text/javascript">
  $(function() {
    $('#linkUserTopUpCards').text('Activate Card');
  });
</script>

Adding text to a 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>

Hiding data table columns

<script type="text/javascript">
  $(function() {
    $('th.accountNameColumnHeader').hide();
    $('td.accountNameColumnValue').hide();
    $('th.printerDisplayNameColumnHeader').hide();
    $('td.printerDisplayNameColumnValue').hide();
  });
</script>

Removing 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 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>

Removing user balance and the balance graph (pre 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>

Replacing ‘Balance’ with ‘MB Remaining’

Changes the displayed balance on the Summary page into a displayed ‘MB Remaining’. Uses a specified cost per MB to perform the calculation.

<script type="text/javascript">
  $(function() {
    var costPerMB = 0.20;
    var balance = $('table.userDataTable tbody tr:eq(1) td').text().replace(/[^\d\.]/g, "");
    var mb = balance / costPerMB;

    // change heading
    $('table.userDataTable tbody tr:eq(1) th').text("MB Remaining");
    // change value
    $('table.userDataTable tbody tr:eq(1) td').text(mb + " MB");
  });
</script>

Change the order of the navigation menu links

This example will move “Web Print” menu item to the top of the list.

<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>

Hiding a navigation menu

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>

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>

Disabling ‘refund request’ options 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>

Categories: User Web Interface, User Interface Customization

Comments

Share your findings and experience with other PaperCut users. Feel free to add comments and suggestions about this Knowledge Base article. Please don't use this for support requests.

Article last modified on August 25, 2017, at 06:42 PM
Printable View   |   Article History   |   Edit Article