Drag and Drop image ServiceNow

Hey Guys, here I will tell you how we can create a custom widget that will allow you to make a drag and drop area in Service Now.

Service Now have predefined set of Angular JS library that we can use according to our need, we can use “drop-zone” attribute to make a drop-zone area in our widget.

Example:

You can use below HTML Tag to define the drop-zone area.

Id: Id name can be any unique name assigned to that tag.

Action: You can give any location followed by the “/” sign. Eg: /document, /picture

Class: Name of class used for styling.

Client Controller:

Use below code in Client Controller to initialize your drop-zone.

Dropzone.autoDiscovery = false; // Stop drop-zone auto discovery

//Initialize your drop-zone

var dropzone = new Dropzone($(‘#dropzone’)[0]); //#dropzone is the name of tag

Define Dependencies

Create UI Script è Dropzone

Get dropzone anguler JS from below link put it in ui script

https://rawgit.com/enyo/dropzone/master/dist/dropzone.js

Follow the following instruction to create widget dependency

Step1: Create a record in dependency

Name: Name of the dependency

Angular module name: dropzone

Step2: Create JS Include

JS Include:

Your widget is ready for the use. This will look like this on Service Portal.