Add Customized "Add Attachments" widget for particular catalog item in service portal

[Harsha M V]

Hi Experts,

Add attachments Widget is hidden for all catalog Items at widget level, but we need to show that Icon and let users attach the attachments for new catalog item which will be created.

How to achieve this?

I tried creating UI page as per below post, but this doesnt work on Service portal catalogs. It works only on native view. How to achieve this using on service portal. Please help

@https://www.servicenow.com/community/now-platform-blog/create-a-custom-attachment-button-for-your-service-ca...

[Laszlo Balla]

Have you considered using an attachment type variable?

[Harsha M V]

Hi Laszlo,

Yes I tried this one, it works good.
But i need something similar to Add Attachments which is OOB, but this is somewhere hidden at the widget level in my instance, I am not able to find that.

This attachment variable allows only one attachment to add and submit it.
How can we include multiple attachments and submit the request.

Can we do anything customization using a UI Macro?

[Laszlo Balla]

You probably can, but why reinvent the wheel? If you have a custom widget, then you should simply have your widget respect 'no_attachment_v2' dictionary field on the 'sc_cat_item_producer' table which defines whether attachments are display or not. This is specifically created to support your use case.

You can have a look at the Out of the box widget 'SC Catalog Item' [widget-sc-cat-item-v2]. It has a client script section to verify this setting (amongst others):

c.showAttachments = function() {
		return !$scope.submitted &&
			c.data.sc_cat_item && !c.data.sc_cat_item.no_attachments &&
			c.data.sc_cat_item.sys_class_name !== "std_change_record_producer";
	};

And a corresponding HTML that relies on this:

        <div ng-if="c.showAttachments()" class="wrapper-md row no-margin" role="region" aria-label="${Attachments}">
          <now-attachments-list template="sp_attachment_single_line" ></now-attachments-list>
          <div ng-class="{'flex-center attachment-height': options.native_mobile == 'true', 'flex-end': options.native_mobile != 'true'}">
            <label ng-if="!submitting && !submitted" style="font-weight:normal;cursor:pointer;">
              <sp-attachment-button required="{{data.sc_cat_item.mandatory_attachment}}"></sp-attachment-button>
              <span class="fa fa-asterisk mandatory"
                      ng-if="data.sc_cat_item.mandatory_attachment"
                      ng-class="{'mandatory-filled': data.sc_cat_item.mandatory_attachment && (data.sc_cat_item.attachment_submitted || attachments.length > 0)}"
                      style="vertical-align:super" aria-hidden="true"></span>
              <span aria-hidden="true">${Add attachments}</span>
            </label>
          </div>
        </div>

You can simplify this if check the above mentioned 'no_attachment_v2' in your server side script and attach it to a property of your data variable, so you can verify it on the client side with c.data....