How to show the progress bar during the attachment

[Sri56]

Hi Team,

As of now, when we upload the attachment we are getting as below:

So where we can add anjular js to get below screen?

Please help!

Thanks,

Sri

[Adrian Ubeda]

Hi Sri,

You'll need to clone that and then customize for your need.

Check this thread below: https://community.servicenow.com/community?id=community_question&sys_id=e10a5b40db0a5f404816f3231f96194b

In the last part, there you have some code for reaching this.

If it was helpful, please give positive feedback.
Thanks,

[Sri56]

Hi Ubeda,

I have already referring this article.

But please let me know where we need to add angular js script mentioned in the article.

Please help.

Thanks,

Sri

[Vaishnavi Lathk]

Hello,

For anyone stumbling upon this topic. It is possible to add progress bar to OOB attachment functionality very easy. Most of the logic to update the value of progress bar is already in nowAttachmentHandler angularjs directive. 

If you wish to add it to e.g SC catalog item widget , find the line of code: 

 <now-attachments-list template="sp_attachment_single_line" ></now-attachments-list>

and after it add:

<div class="progress-wrapper">
<label for="file" class="progress-label" ></label>
<progress class="upload-progress" id="file" value="0" max="100"></progress>
</div>

The classes are the most important part becuase those are selected by jQuery inside nowAttachmentHandler.

You may also want to add class to hide progress-wrapper at start in CSS.

Additionally you may style it as you wish in CSS e.g:

.progress-wrapper{
  display: none;
}
progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  
  /* Get rid of default border in Firefox. */
  border: none;
  
}


progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}


progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #DFD139, #C83C36);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
  
}

Regards,

Vaishnavi Lathkar