Drag and Drop image ServiceNow

[vandna]

Custom Service Portal Widget for Photo Drag and Drop

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.

<div action=”/download” class=”dropzone” drop-zone id=”dropzone”>

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: <ui script name>

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

[Bhagya Lakshmi]

Hi Vandana,

Please give me any example code for above widget.

Thanks

[vandna]

Hi Bhagya,

Here is the code:

Widget Name: Photo-upload

ID: photo_upload

Body HTML Template:

<div>      
       <div class="form-control" action="/download"  class="dropzone" drop-zone id="dropzone"/>                      
</div>

CSS:

    fieldset{
   
    padding: 5px;
    margin-left:15px;
}
.addfields{
    margin-left: 15px;
    margin-top:5px;
}
.header_label{
    
    background-color: #006F66 !important;
    font-size: 15px;
    color: white;
    padding: 10px;
    margin-bottom: 15px;
    margin-left: -15px;
    border-radius: 5px;

    }
    .labels{
    padding:5px;
    }
    .div_row{
    float:left;
    width:30%;
    }
        .dropzone {
  border: 1px solid rgba(0,0,0,0.03);
  min-height: 100px;
    min-width:50%;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: rgba(0,0,0,0.03);
 
}
    .dz-default{
    display:none;
    }
    .dz-details{
    display:none;
    }
    .dz-error-mark
    {
    display:none;
    }
    .dz-success-mark{
    display:none;
    }

Client Controller:

function($scope) {
  /* widget controller */

    var c = this;
    new Dropzone($('#dropzone')[0]);

}

After that create a dependencies as mentioned in above post and then use this widget to any catalog item. Output of this widget is an Drag and Drop area where you can drop image and any other file.

[vandna]

Hi Bhagya,

Here is the code:

Widget Name: Photo-upload

ID: photo_upload

Body HTML Template:

<div>      
       <div class="form-control" action="/download"  class="dropzone" drop-zone id="dropzone"/>                      
</div>

CSS:

    fieldset{
   
    padding: 5px;
    margin-left:15px;
}
.addfields{
    margin-left: 15px;
    margin-top:5px;
}
.header_label{
    
    background-color: #006F66 !important;
    font-size: 15px;
    color: white;
    padding: 10px;
    margin-bottom: 15px;
    margin-left: -15px;
    border-radius: 5px;

    }
    .labels{
    padding:5px;
    }
    .div_row{
    float:left;
    width:30%;
    }
        .dropzone {
  border: 1px solid rgba(0,0,0,0.03);
  min-height: 100px;
    min-width:50%;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: rgba(0,0,0,0.03);
 
}
    .dz-default{
    display:none;
    }
    .dz-details{
    display:none;
    }
    .dz-error-mark
    {
    display:none;
    }
    .dz-success-mark{
    display:none;
    }

Client Controller:

function($scope) {
  /* widget controller */

    var c = this;
    new Dropzone($('#dropzone')[0]);

}

After that create a dependencies as mentioned in above post and then use this widget to any catalog item. Output of this widget is an Drag and Drop area where you can drop image and any other file.