Making a Dynamic Service Portal File Download Widget

[jmiskey]

We currently have a few Catalog Items on our Service Portal where users need to download a file that we have uploaded to ServiceNow.  So, we have create custom Service Portal Widgets.  They are pretty basic, here is all there is to them:

Body HTML template section:

<div>

<a href="/sys_attachment.do?sys_id=...">Link text to display</a>

</div>

Client Controller section:

function ($scope,$location) {
  $scope.download = function(path){
  $location.path(path);
  };
}

So, the sys_id and "text to display" are hard-coded right inside our widget.  And then in our Catalog Item, we use a "Label with Macro" variable, filling out the Widget box with the name of our widget.

This works great, but we currently have a separate widget for each file.  I have a whole bunch more files to add for a bunch more Catalog Items that I need to create, and instead of creating a bunch more widgets, I would like to create one dynamic file download widget, where I can just feed in the sys_id of the attached file and the text I would like to display.  I am just unsure how to update the widget, and how to feed in the values (attributes, maybe?).

I imagine this is probably a pretty easy request for an experienced widget creator, but I am pretty new to the widget world, and just getting my feet wet here.

Thanks

[nathanfirth]

Hi Joseph,

Yes, certainly shouldn't have to have one widget for each.

If you added each attachment to the catalog item record, then we could simply write a GlideRecord to retrieve any attachments associated with that particular item and display it in a list. Then embed that widget in the catalog item widget. That way it's easy to maintain which attachments belong to which catalog items.

I can certainly help you create this widget.

-----------------
Nathan Firth
Founder and ServiceNow Architect
NewRocket, Inc.
nathan.firth@newrocket.com
http://serviceportal.io
http://newrocket.com

[jmiskey]

Thanks for the reply Nathan.  I was a little surprised that a widget like this didn't exist OOTB.  I am encouraged that there may be a solution to this.

I have a few questions:

- Would this work if we have just a single attachment per catalog item?  Currently, all the cases we have we only have one attachment, but I could easily see a situation some day where we may have more than one per catalog item that we may want to download from different parts (variables) of the catalog item.

- Currently, the hard-coded widget we use an "a href" reference, that allows us to both have the link, and the "friendly name" on the link.  Would it be possible to have the "friendly" name also, or would we just create a Label with the friendly name, and have the widget link below it?

- If I understand what you are saying, it sounds like we may need to clone/edit the OOTB Catalog Item Widget.  Am I understanding that correctly?  I just watched your video from the Conference on "Unlocking Service Portal Widgets", and in it, you guys STRONGLY discourage editing key OOTB widgets.  I just want to make sure that we are going to be creating problems for ourselves.

Thanks!

Joe

[Will Dollinger]

Hi Nathan,

Is the idea to embed the widget using a Macro field? How would you pass the ID of the catalog item to the widget?  Can we use $emit for this ?

thanks!

Will

[nathanfirth · Accepted solution]

Joe & Will,

Yes, exactly... you're embedding the widget inside the catalog item widget using the Macro field. It will work perfectly with one or a dozen attachments.

From the inner widget, simply call $sp.getParameter('sys_id) to get the ID of the catalog item. From there you can use GlideRecord to get the URL and Label of the attachment, construct an Array on "data" and then loop through it in HTML using ng-repeat.

Hope that helps!