logo

NJP

[HowTo] Enable Copy & Paste + Drag & Drop of files on Service Portal (without widget clone)

Import · May 16, 2022 · article

Base on this Article (How to support copy / paste of pictures on Service Portal), i have derived a better method of enabling copy & paste in the Service Portal (e.g. ticket and form page). This method does *not* rely on the insecure and upgrade risky widget-clonening mechanism.

Hint: If you need the same feature for classic you, checkout this repo:

https://github.com/kr4uzi/ServiceNow-ClassicUI-Copy-Paste

Update 03. Dec. 2023: Vancouver finally has Drag & Drop support:

image

The difference between the OOTB and my solution is, that mine works "implicit" - you do not have to open the attachment dialog to be able to copy & paste or drag & drop.

As this app is now only an alternative approach to an existing feature (I strongly advise to not reinvent the wheel and stick to OOTB as much as possible), I've decided to make the app "opt-in".

This means, that you have to explicitly enable this application on Portal Pages now. This is done by adding the following to the "Page Specific CSS" field of a particular Service Portal Page:

Page Specific CSS:

body {
  --pcp-enabled: true;
}

Conclusion: Since Vancouver, this application is obsolete. I will most likely no longer maintain it after Vancouver.

Update 18. Oct. 2023: Firefox now has Copy & Paste support. The application does not need to be updated for this to apply!

Update 15. Dec. 2022: I have created improved version of this in a custom scoped application. It will enable Copy & Paste (technically not possible on Firefox and IE11) as well as Drag & Drop (supported by all browsers) without any additional configuration on several widgets. Because of this, you will not have to do any modification to your Service Portal whatsoever. Everything "just works".

The following widget/pages are supported:

Widget Name Used in OOTB pages Notes
SC Catalog Item sc_cat_item
Ticket Conversation ticket
Standard Ticket Conversation standard_ticket Ticket page used by Employee Center
Form form

Please fork the following repo (this will make sure that you have a way to receive updates in the future without visiting this community page): https://github.com/kr4uzi/ServiceNow-Portal-Approval

Open the studio and click "Import From Source Control" (use your forked git repo).

EDIT 20.05.2022:

Thanks to @Annika Aaltonen we discovered that IE11 and Firefox do in fact not support Copy & Paste File Upload. However i have added support Drag & Drop Support as a replacement.

View original source

https://www.servicenow.com/community/developer-articles/howto-enable-copy-amp-paste-drag-amp-drop-of-files-on-service/ta-p/2296124