What no Attachments on a CMS Portal Catalog Item?

[MB26]

I was working with a customer who wanted to use the Content Management System (CMS) as their Employee Self-Service Portal. ServiceNow has a nice starter site for this. Come to find out though, when you order a catalog item, no attachment icon is displayed.

Normally at a Form Header exists at the top of a form that includes the attachment icon. In the CMS system, when you use an iframe to diplay a catalog item, this form header appears to not render.

A friend of mine suggested I create a UI Macro to add at the top of each catalog item. It is a great suggestion, and I had actually done this in the "Where is the Order Guide Attachment Love?" post. I was hoping for something more integrated into CMS. His suggestion did give me a good idea. All I really needed was a link, much like the attachment icons provides, for the user to click. I realized that when you upload an attachment the "Manage Attachments" link is made visible and allows you to click it to upload more attachments. So why not do the same here.

I wrote a client script that can be applied to each catalog item that needs attachments. It will check to see if the Form Header (form_header ID) element is located on the page. If it is not, it will display the "Manage Attachments" link to be used instead of the attachment icon. This way, if someone uses the normal Service Catalog page to order, it will not display and the standard attachment icon can be used.

Here is the simple Client Script code that can be used on a catalog item
onLoad Catalog Client Script

if(!$("form_header")){
$("header_attachment_list_label").setStyle({visibility: "visible", display: "block" });
}

Enjoy!

<script></script>
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-22945975-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();