Print Friendly UI Script

[rcheek2]

Hi All,

I've been experiment with upgrading to Geneva from Fuji in our test environment. We had a script written that would put a printer icon in the banner(next to the log out button) if Fuji working but it seems to have broken in Geneva

addLoadEvent(addPrinterIcon);

function addPrinterIcon(){

      try{

              if($('navpage_header_control_button')){

                      //Create a print icon in the header

                      $('navpage_header_control_button').insert({

                              before: '<a tabindex="0" class="header row-link" onclick="printList(\'25000\');" style=color:white><span class="icon-print icon-lg"></span></a>'});

                      }

              }catch(e){}

}

Any ideas on how to that UI Script working on geneva? I'm guessing that the 'navpage_header_control_button' needs to change though I'm not sure what to.

Thanks in advance!

[LaurentChicoine · Accepted solution]

Let me start with the disclaimer, modifying the navigator in SNow is definitively not clean as it requires DOM Manipulation. As you experienced yourself at almost every change of UI your customization is broken and you don't know if you will be able to put it back in place again.

This time, from what I understood by looking around, the UI Script doesn't execute inside the main frame (the navigator). Which make the DOM Manipulation even less clean forcing to run the script in the Iframe and then from the Iframe manipulating the top frame, and having the print function that is called from the top window but needs to execute inside the iframe...

However here is the code as of UI16, note that I only tested it in Google Chrome and not extensively:

addLoadEvent(addPrinterIcon);

function addPrinterIcon(){
       try{
               if(top.window.$j('#nav-settings-button') && top.window.$j('#headerPrintButton').length === 0){
                       var cogWheelDiv = top.window.$j('#nav-settings-button').parent();

                       //Create a print icon in the header
                       var onclickAction = "document.getElementById('gsft_main').contentWindow.printList('25000')";
                       var button = '<div class="navpage-header-content"><button class="btn btn-icon icon-print" id="headerPrintButton" onclick="' + onclickAction + '"></button></div>';
                       top.window.$j(button).insertBefore(cogWheelDiv);

               }
       }
       catch(e){
               console.log(e);
       }
}

I tried to add comment to my code but started having javascript error and didn't have more time to put on it so I just reverted back to the last working version.

You could add this in the description:

1. Check if the COG Wheel button is in the top frame as it is used for the print button insert AND check that the print button was not already added
2. Define the onclick in a variable to avoid having to escape quotes
3. Define the button div we import
4. Insert the button div in the document

[rcheek2]

Laurent, you're awesome!!! It's working in safari/firefox as well. This wasn't a deal breaker feature for our instance but it definitely will be welcomed by our staff!

Richard

[MarcB1]

Hi

Did someone find out how to get it working in Next Experience? e.g. Tokyo or Utah

Thanks
Marc

[LaurentChicoine]

The SND Xplore plugin is doing it for all the UIs including Polaris, you can take a look on how they do it here: https://github.com/jneale/Xplore/blob/master/src/UI%20Scripts/snd_xplore_glasses.js

Take a look at the injectPolaris function.