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