Welcome to Community Week 2025! Join us to learn, connect, and be recognized as we celebrate the spirit of Community and the power of AI. Get the details  

How to display and download attachments through Service Portal

KeturP
Kilo Contributor

I am displaying a custom table which has attachments through the Service Portal and am trying to achieve 4 things but am stuck on how to accomplish

1- View attachment when View button clicked

2- Download attachment when download clicked

3- display extension type of attachment onto the list

4- display the size of the attachment onto the list.

 

 

find_real_file.png

 

 

8 REPLIES 8

Hi,

So what type of page/widget is that

please share the HTML, Client and Server Side

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader

KeturP
Kilo Contributor

HTML

  
  <div class="panel panel-default">
  <div class="panel-heading clearfix">
  <div class="panel-body"> 
    <div class = "choices">
      <h3>Category</h3>
      <select ng-model="c.keyword" ng-options="item.u_resource_type.display_value for item in data.items">
      <option value="">Select</option>
      </select>
    </div>
     <div class = "choices">
      <h3>Sub-Category</h3>
      <select ng-model="c.keyword" ng-options="item.u_product_category.display_value for item in data.items">
      <option value="">Select 2</option>
      </select>
    </div>	
    <div class = "choices">
        <button name="Clear" class="btn btn-primary btn-m-l-xs" ng-click="clearButton()">Clear</button>
    </div>	
    
 	 </div>
  
  <table id="data" style="width:100%">
    <th>Title</th>
    <th>Category</th>
    <th>Sub-Category</th>
    <th>Size</th>
    <th>File Type</th>
    <th>Attachment</th>

  <tbody>
      <tr class="info" ng-repeat="item in data.items | filter: c.keyword">
        
      <td>
        <h4 class="info">
        {{item.u_title.display_value}}
      	</h4>
      </td> 
        
      <td>
         <h4 class="info">
         {{item.u_product_category.display_value}}
        </h4>
      </td>
        
        <td>
         <h4 class="info">
         {{item.u_resource_type.display_value}}
        </h4>
      </td>
        
         <td>
         <h4 class="info">
         <!--SIZE-->
        </h4>
      </td>
        
         <td>
         <h4 class="info">
					<!--TYPE-->
           </h4>
      </td>
        
        <td>
         <h4 class="info">
         <button class="btn btn-primary btn-sm pull-left">View</button>
        </h4>

         <h4 class="info">
           <a href="sys_attachment.do?sys_id=6d8561c11b272010f90b4000f54bcbe5">
         <button class="btn btn-primary btn-sm pull-right">Download</button>
           </a>
        </h4>
      </td>
        
    
    </tr>
      
  </tbody>
    </table>

    <!--INPUT-->
    <div class = "panel panel-default">
  <div class= "panel-heading">
    <h4 class ="panel-title">
      Create 
    </h4>
  </div>
  
  <div class="panel-body">
    <form>
      <div class="form-group">
        <label for="issue">Title</label>
        <input type="text" class="form-control" id="issue" placeholder="Enter Title" ng-model='data.newFAQ.u_title'>
      </div>
      
      <div class="form-group">
        <label for="issue">Category</label>
        <input type="text" class="form-control" id="issue" placeholder="Enter Category" ng-model='data.newFAQ.u_product_category'>
      </div>
      
      <div class="form-group">
        <label for="urgency">Sub-Category</label>
        <input type="text" class="form-control" id="issue" placeholder="Enter Sub-Category" ng-model='data.newFAQ.u_resource_type'>

      </div>
    </form>
  </div>
  
  <div class="panel-footer">
    <button class="btn btn-success" ng-click="c.submit()">
      Submit
    </button>
  </div>
</div>

Client

api.controller=function($scope) {
  /* widget controller */
  var c = this;
	
	//clear button
	$scope.clearButton = function() {
		c.keyword = '';
	}
	
	c.submit = function() {
		c.data.action = 'createFAQ';
		c.server.update().then(function() {
		  spUtil.addInfoMessage(c.data.message);
	})
	}
	
	
};


//add new category button

//download attachment

Server

(function() {

	data.title ="Resource Library";

	data.fields = 'u_product_category, u_resource_type, u_attachment, u_title';
	data.items = getFAQ(input.keywords);
	
	function getFAQ(keywords) {
		 var items =[];
		 var resLib = new GlideRecord('u_resource_library');
		 resLib.query();
		 
		 while (resLib.next()) {
			 
			 var obj = {};
			 $sp.getRecordElements(obj, resLib, data.fields);
			 items.push(obj);
	
		 }
		 return items;
	 }
	
	
	 
})();

KeturP
Kilo Contributor

Was able to get size and extension through the sys_attachment table.

 

Now just need to figure out if it's possible to view attachment within portal.

 

1- View attachment when View button clicked 

2- Download attachment when download clicked - COMPLETED

3- display extension type of attachment onto the list - COMPLETED

4- display the size of the attachment onto the list. - COMPLETED

Hi,

check this link

Is it possible to display attachments on a service portal form?

View PDF file in service portal

Regards
Ankur

Regards,
Ankur
✨ Certified Technical Architect  ||  ✨ 9x ServiceNow MVP  ||  ✨ ServiceNow Community Leader