<now-attachments-list template="sp attachment" />

[MCH]

Hello,

I used the widget 'Ticket Attachments' in Service Portal of Helsinki.

In this widget there is an element which call 'now-attachments-list'.

I want to understand what the meaning of this element, maybe it's a directive of angular? so, where it's defined?

I would be happy if someone can explain me what is it exactly.

thanks,

Michal

[Z_1]

did you ever figure this out? I'm currently trying to pass a custom template to the now-attachments-list directive as well and can't get my template to render.

[yundlu316]

Hi, did anyone figure out where to access the template code for 

attachments_list.xml?

[ChrisBurks]

The attachments_list.xml template looks like this:

<div ng-if="attachments.length" class="file-list-wrap">
   <ul class="{{listClass}}" style="margin-bottom: 0">
      <li class="list-group-item" ng-repeat="attachment in attachments">
         <ng-include src="entryTemplate"></ng-include>
      </li>
   </ul>
   <div class="errors-wrap" ng-hide="errorMessages.length == 0">
      <div class="error-msg icon-cross" ng-repeat="error in errorMessages" ng-click="attachmentHandler.dismissMsg($event, $index, errorMessages)">
         <span>{{error.msg}}</span>
         <span class="file-name">{{error.fileName}}</span>
      </div>
   </div>
</div>

You can see in the "li" element where the "entryTemplate" defined in the directive is being included.
The entryTemplate looks like this based on if "attachment" is passed as the entryTemplate:

<div class="sp-attachment-block-single-line file-attachment row" id="{{attachmet.sys_id}}">
   <a aria-label="View attached image" tabindex="0" class="col-md-1 col-sm-1 col-xs-2 view-attachment m-b-none text-center" style="border: none;" ng-click="attachmentHandler.viewAttachment($event, attachment)" href="javascript:void(0)" title="View">
      <img alt="" ng-if="attachment.thumbSrc" class="attachment-thumbnail img-responsive" ng-src="{{attachment.thumbSrc}}" role="presentation">
   </a>
   <div class="col-md-9 col-sm-8 col-xs-7 file-name v-middle">
      <a tabindex="0" class="get-attachment" ng-click="attachmentHandler.downloadAttachment(attachment)" ng-attr-title="Download {{attachment.file_name}}" href="javascript:void(0)">{{attachment.file_name}} ({{attachment.size}})</a>
      <input tabindex="-1" ng-keydown="attachmentHandler.onKeyDown($event, attachment)" ng-blur="attachmentHandler.updateAttachment($event, attachment)" style="display: none;">
         <div>
            <time>
               <sn-time-ago timestamp="::attachment.sys_updated_on"></sn-time-ago>
            </time>
         </div>
      </div>
      <div class="col-md-2 col-sm-3 col-xs-3 tools v-middle align-right">
         <div class="btn-group ng-scope" ng-if="attachment.canWrite || attachment.canDelete">
            <button type="button" tabindex="0" class="btn btn-default btn-clear" ng-click="attachmentHandler.editAttachment($event, attachment)" title="Edit file name" aria-label="Edit file name {{attachment.file_name}}">
               <i class="fa fa-pencil" aria-hidden="true"></i>
            </button>
            <button type="button" tabindex="0" class="btn btn-default btn-clear" ng-click="confirmDeleteAttachment(attachment, $event)" title="Delete" aria-label="Delete {{attachment.file_name}}" id="{{attachment.sys_id}}_delete_button">
               <i class="fa fa-times" aria-hidden="true"></i>
            </button>
         </div>
      </div>
   </div>

The "attachment" object:

{
   canDelete: true,
   canWrite: true,
   content_type: "image/type",
   ext: "png", 
   file_name: "my_image.png",
   size: "13.1 KB",
   size_bytes: "13.1 KB",
   sys_created_by: "user.name",
   sys_created_by_display: "First Last",
   sys_id: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
   sys_updated_on: "2018-03-18 22:59:00",
   sys_updated_on_display: "2018-03-18 15:59:00",
   table_name: "sp_portal",
   table_sys_id: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx",
   thumbSrc: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.iix?t=medium",
   thumb_src: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.iix?t=medium",
   thumbnail: "xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.iix?t=medium"
}

Hope this helps.

[yundlu316]

Hi Chris, that is definitely helpful.  Even with the information you provided though, we can't seem to change the template of now-attachments-list.  We tried copying the now-attachments-list code that you posted above and creating a new angular provider, but there was some compile error that stopped us on this line:

 delete: attrs.deleteIcon,

How exactly does template = "sp_attachment_single_line" relate to attachments_list.xml?  

Can you provide some instructions on how to create a new template for the now-attachments-list directive?

[ChrisBurks]

Create an Angular Provider with type Directive

1) "delete" is a reserved word in JS thus when in IDE view it won't let you save/use as a object property. Workaround is to create a shell of the provider. Then go to list view and add the script column. From there paste in the code. 

2) "getTemplateUrl" is not needed as the custom templates will be added directly to the widget through the related tables. In the screenshot "templateUrl" and "scope.entryTemplate" are defined directly. Note: this is the actual reason why placing in your own template name doesn't work. ie <now-attachments-list template="customTemplate" />. The use of getTemplateUrl is more than likely searching for the defined template where they keep their partials (html templates) which is different from the related table Angular ng-templates. It would have been nice if they pointed it to that table. Then we wouldn't have to create a whole custom directive. 

Add the Angular Provider to the desired attachment widget

In this case I'm just cloning the nowAttachmentsList directive for time's sake. But this outlines how the template relationship works and the structure of the directive

Create templates from the Angular ng-templates tab

Add the custom directive into the view (html markup). Again I cloned the Ticket Attachment widget and am substituting in the custom attachment list directive.

Notice that the attribute template is defined with the custom_entry template. (Later below I'll show the templates markup)

Save all your work. The custom directive should be working at this point. For my example I cloned the Tickets Attachment widget thus I will need to make sure the widget is on a Tickets page to use or at least make sure the parameters meet the requirements defined in the widget. For me to test I placed my cloned widget with the custom directive on the tickets page and deactivated the original.

Other screenshots of template markup and relationships:

In reality this example is not just replacing the template. It's actually creating a clone of the nowAttachmentsList directive. 

At the very least it should give a basic example of how to create and use a directive as well as using templates. It didn't necessarily have to use two templates but that would be a decision of the developer. 

Also I would more than likely make an original directive and not clone as this relies on some code that ServiceNow could change at any time.

I hope this helps.