Join the #BuildWithBuildAgent Challenge! Get recognized, earn exclusive swag, and inspire the ServiceNow Community with what you can build using Build Agent.  Join the Challenge.

Show attachment size in 'Manage Attachments' section

Community Alums
Not applicable

I did a search for this earlier and this article gave a great idea:

 

How to make attached files show the size and name in the comments area?

 

However, I am trying to find out if there is a way to display the size of the image in the 'Manage Attachments' section of the incident form:

 

incident_images.PNG

 

Does anyone know if this is possible, and where this change can be made to display the size of the file?

 

Cheers,

 

Tim

1 ACCEPTED SOLUTION

Jake Gillespie
Mega Guru

Hi Tim,



You can do this by modifying a UI Macro called "attachment_entry". I recommend first making the original UI Macro inactive by setting "active=false", then creating your own UI Macro with the same name. Add the script below to show the size in bytes (as displayed). The second last line in the script (shown in red text) is where this is added, and it simply refers to the "size_bytes" field on the sys_attachment record to display the bytes.



Screen Shot 2014-11-16 at 9.45.37 pm.png



XML CODE BELOW IS FOR THE UI MACRO CALLED   "attachment_entry":



<?xml version="1.0" encoding="utf-8" ?>


<j:jelly trim="false" xmlns:j="jelly:core" xmlns:g="glide" xmlns:j2="null" xmlns:g2="null">


    <g:macro show_link="true" />


    <j:if test="${gs.getProperty('glide.ui.disable_attachment_view') == 'true'}">


            <j:set var="jvar_show_link" value="false" />


    </j:if>    


   


    <!-- Check no_attachment attribute in order to override if necessary. -->


              <g:evaluate var="jvar_no_attachment">


                              var atd = GlideTableDescriptor.get(sys_attachment.table_name);              


  atd.getED().getBooleanAttribute("no_attachment");


  </g:evaluate>


   


    <g:evaluate var="jvar_can_write_to_record">


  sys_attachment.canWrite();


    </g:evaluate>


   


      <j:set var="jvar_can_add_attachments" value="false" />


      <j:if test="${jvar_no_attachment == 'false'}">


      <j:if test="${jvar_can_write_to_record == 'true'}">


      <j:set var="jvar_can_add_attachments" value="true" />


  </j:if>


  </j:if>




    <j:if test="${RP.getWindowProperties().get('attachment_disabled') == 'true'}">


          <j:set var="jvar_can_add_attachments" value="false" />


    </j:if>




    <!-- determine which icon to use and what title text to display -->


    <j:set var="jvar_random_id" value="${new GlideGuid.generate(null)}" />


    <j:set var="jvar_encrypt_context" value="${sys_attachment.encryption_context}" />




    <j:set var="jvar_sys_id" value="${sys_attachment.sys_id}" />


    <g:inline template="id_to_icon_path.xml" />




    <j:set var="jvar_attachment_icon" value="${jvar_icon_path}" />


    <j:if test="${!empty(jvar_encrypt_context)}" >


          <j:set var="jvar_attachment_alt" value="${gs.getMessage('Attached by')} ${sys_attachment.sys_created_by} ${gs.getMessage('on')} ${sys_attachment.sys_created_on.getDisplayValue()}, ${gs.getMessage('Encrypted')}: ${sys_attachment.encryption_context.getDisplayValue()}" />


    </j:if>


    <j:if test="${empty(jvar_encrypt_context)}" >


          <j:set var="jvar_attachment_alt" value="${gs.getMessage('Attached by')} ${sys_attachment.sys_created_by} ${gs.getMessage('on')} ${sys_attachment.sys_created_on.getDisplayValue()}" />


    </j:if>




    <!-- output the icon with title text and file name -->


    <j:if test="${sys_attachment.content_type == 'text/html'}" >


          <a style="margin-right: 4px;" href="sys_attachment.do?sys_id=${sys_attachment.sys_id}" target="_blank"        


                title="${jvar_attachment_alt}">


                <img src="${jvar_attachment_icon}" alt="${jvar_attachment_alt}" />${HTML:sys_attachment.file_name}</a>


    </j:if>


    <j:if test="${sys_attachment.content_type != 'text/html'}" >


          <a href="sys_attachment.do?sys_id=${sys_attachment.sys_id}" title="${jvar_attachment_alt}">


                <img src="${jvar_attachment_icon}" alt="${jvar_attachment_alt}" /></a>


          <a href='' style="display: inline; margin-right:5px;" id="${jvar_random_id}" data-id="${sys_attachment.sys_id}" onkeydown="allowInPlaceEditModification(this, event);" onclick="if ($(this).readAttribute('contenteditable') != 'true') window.location.href='sys_attachment.do?sys_id=${sys_attachment.sys_id}'; return false;">${HTML:sys_attachment.file_name}</a>


         


          <j:if test="${jvar_can_add_attachments}">


          <a class='attachment' href="#" onclick='$("${jvar_random_id}").beginEdit();'>${gs.getMessage('[rename]')}</a>


          <script>


                      addLoadEvent(function() {


                            $("${jvar_random_id}").inPlaceEdit({


                                  selectOnStart: true,


                                  turnClickEditingOff: true,


                    onAfterEdit: function(newName) {


                                  var oldName = this.oldValue;


                                        var ga = new GlideAjax('AttachmentAjax');


                                        ga.addParam('sysparm_type', 'rename');


                                        ga.addParam('sysparm_value', '${sys_attachment.sys_id}');


                                        ga.addParam('sysparm_name', newName);


                                        ga.getXML(function(response) {


                                                var answer = response.responseXML.documentElement.getAttribute("answer");


                                      if (answer !== '0')


                                                        alert(new GwtMessage().getMessage("Renaming attachment {0} to new name {1} is not allowed", oldName, newName));


                                                       


                                                $$('a[data-id="${sys_attachment.sys_id}"]').each(function(elem){


                                                        elem.innerHTML = (answer === '0') ? newName : oldName;


                                                });


                                                $$('span[data-id="${sys_attachment.sys_id}"]').each(function(el){


                                                        el.innerHTML = (answer === '0') ? newName : oldName;


                                                });


                                        });


                                  }


                            });


                           


                            addEllipsesToAttachments();


                      });


          </script>


          </j:if>


    </j:if>




    <!-- in some cases we want a "view" link to be displayed after the file name -->


    <j:if test="${jvar_show_link}">


      <j:choose>


  <j:when test="${gs.getProperty('glide.ui.attachment_popup')=='false'}">


                  <a class="attachment" href="sys_attachment.do?sys_id=${sys_attachment.sys_id}&amp;view=true"> ${gs.getMessage('[view]')}</a>


      </j:when>


      <j:otherwise>


                  <a class="attachment" onclick="tearOffAttachment('${sys_attachment.sys_id}');">${gs.getMessage('[view]')}</a>


      </j:otherwise>


      </j:choose>


    </j:if>


    <span>${gs.getMessage('['+sys_attachment.size_bytes+'bytes]')}</span>


</j:jelly>


View solution in original post

9 REPLIES 9

Thank you Tim for your reply.



I am not very familiar with Jelly and not sure how to write a function in Jelly, but I will try.



//Shalini


Hi Shalini Kapoor,



You just need to add the function in a <g:evaluate> block immediately before the final span (shown in red text) that includes the size, and then update the reference in the final span to a show the value of the new (size) variable.



Replace the original final span (shown in red text in my previous post) with the following block:



  <g:evaluate var="jvar_file_size">


          function getFileSize(fileSizeInBytes) {


                  var i = -1;


                  var byteUnits = [' KB', ' MB', ' GB', ' TB', 'PB', 'EB', 'ZB', 'YB'];


                  do {


                          fileSizeInBytes = fileSizeInBytes / 1000;


                          i++;


                  } while (fileSizeInBytes > 1000);


                  return Math.max(fileSizeInBytes, 0.1).toFixed(1) + byteUnits[i];


          };


          var attachment_size = getFileSize(sys_attachment.size_bytes);


  </g:evaluate>


  <span>${gs.getMessage('['+attachment_size+']')}</span>



For reference, I slightly modified the function that Tim linked in the above post, and inserted it into a <g:evaluate> block. This is processed by the Server before the Client browser loads the page data. The variable attachment_size is generated in this block and then replaced in the <span> so the browser simply sees the size and unit as a String value. It should look something like this:


Screen Shot 2015-06-13 at 11.14.08 pm.png



Regards,


Jake Gillespie


Jake, thank you! It worked like a charm!



Appreciate your help.



Shalini


Thanks Jake,



We had customer who wanted to see when when attachments were added. Modifying your code to the below did the trick:



<span>${gs.getMessage(sys_attachment.sys_created_on)}</span>



Kind Regards,



Joost


keerthilatha
Tera Expert

When we click paper clip on header I Need to add a check box on manage attachment glide window respective to only one table(hr_case)


?


find_real_file.png