HTML:

<a>
   <b>Attach files</b>
</a>

You can change the ‘sc_cart_item’ to be any table but be sure create a new UI Page for each one.
I found this method to be great because you can make the image and text as big as you like.

Thanks
Monika

Do you care to share your code as to how you modified the ui macro to add the “Attachment” button to the item. This is exactly what I need to do.

Thank you for the help!

Jason

I should have guessed that you’d have addressed that issue already ;-)

CT :)

Hi Christian – I’ve done things on the checkout screen a couple of ways. One is to modify the associated ui_macro, the other is to create a ui_script that essentially does a getElementById on some existing element, then insert a new element in there, i.e. an attachment icon image and set the onClick action to whatever… saveCatAttachment() in this case. The trick with the former approach is dealing with Jelly and modifying an out of the box file, whereas the trick with the latter approach is finding an element you can reference by ID. In some cases, I had to iterate through elements when the page loads, find the 5th for example and set the ID of that element so I could then do a getElementById on it and manipulate it. The jelly approach is cleaner, but would prevent this macro from being updated by Service Now in the future, so in that sense, the UI Script is less intrusive but will be a bit slower so you need to be careful when writing your scripts to iterate through the page elements.

In the example below, I used Firebug or equivalent to look at the elements and find which one I needed to modify – in this case a table, finds the 2nd table, adds an ID tag to it, then using that ID I set display to none to hide it. For what you’re trying to do, rather than hiding, you could insert a new element for the attachment button and have it call the attachment function you need.

function hideCheckoutFields(){
  //adds an ID to the checkout details table, then sets to hidden
  //we could possibly add some arguments to hide only certain fields here
  var tables = document.getElementsByTagName('table');
  var count = 0;
  var tableArr = [];

  for(var i=0;i!=tables.length;i++){
    if(tables.item(i).getAttribute('className') == 'wide' || tables.item(i).getAttribute('class') == 'wide' ){
      count++;
      if(count==2){
        tables.item(i).setAttribute('id','checkoutDetails');
      }
    }
  }
  gel('checkoutDetails').style.display = 'none';
}

Chris

Great point. That’s definitely something to keep in mind whenever you’re working with any system image. The real challenge is finding an image that’s 16×16 pixels that you can actually see :). Here’s a post I wrote on the method you described.