Create custom action button from list view

[tpeleg]

Hi,

We wish to examine customer requierment on CSM:

Add a custom button in each record that will allow them to raise new case from an existing order.

the button just need to redirect for a new case creation page with some parameters from the order record.

I believe it can be achieved by customizng the list widget (ng-repeate for adding the button in the end of the list): 

Any suggestions? 

Thanks,

Tomer

[Ankur Bawiskar]

@tpeleg 

the 1st screenshot shows Orders list.

check this

How to add hyperlinks to string fields? 

Also check this

Clickable URL field in portal list view 

If my response helped please mark it correct and close the thread so that it benefits future readers.

[tpeleg]

Thank you @Ankur Bawiskar , Actually I found a solution in chat GPT:

In ServiceNow, adding an action button in the portal list view (such as in Service Portal) requires configuring the widget that displays the list. Here’s how you can do it:

Steps to Add an Action Button in Portal List View:

1. Identify the Widget Rendering the List
• Go to Service Portal > Widgets.
• Find the widget that is used for rendering the list (commonly “Simple List” or “Data Table from URL”).
• If unsure, check the sp_widget table (/sp_widget_list.do) and look for widgets related to lists.

2. Customize the Widget (Client & Server Script)

Once you identify the widget, follow these steps:

A. Modify the Client Script to Add a Button

Edit the Client Script of the widget:

function($scope) {
   $scope.performAction = function(record) {
       alert('Action triggered for ' + record.sys_id);
       // Example: Trigger a script action or redirect
       // window.location.href = '/your_custom_page.do?sys_id=' + record.sys_id;
   };
}

B. Update the HTML Template to Include a Button

Modify the HTML template:

<table class="table table-striped">
<thead>
<tr>
<th>Number</th>
<th>Short Description</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data.list">
<td>{{record.number}}</td>
<td>{{record.short_description}}</td>
<td>
<button class="btn btn-primary" ng-click="performAction(record)">
                   Take Action
</button>
</td>
</tr>
</tbody>
</table>

C. Modify the Server Script (If Needed)

If you need to fetch data dynamically, modify the Server Script:

(function() {
   var gr = new GlideRecord('incident'); // Change table as needed
   gr.addActiveQuery();
   gr.orderByDesc('sys_created_on');
   gr.setLimit(10);
   gr.query();

   var records = [];
   while (gr.next()) {
       records.push({
           sys_id: gr.getValue('sys_id'),
           number: gr.getValue('number'),
           short_description: gr.getValue('short_description')
       });
   }

   data.list = records;
})();

3. Test and Deploy
• Save your changes.
• Add the widget to the Service Portal Page where you need the list.
• Test the button action.

[Ankur Bawiskar]

@tpeleg 

Could you share the final widget code HTML, Client, Server etc so that it helps community members

[tpeleg · Accepted solution]

@Ankur Bawiskar 

Sure

Server:

(function() {
	
	var tble =  $sp.getParameter('table')
   var gr = new GlideRecord(tble); // Change table as needed
   gr.addActiveQuery();
   gr.orderByDesc('sys_created_on');
   gr.setLimit(10);
   gr.query();
   var records = [];
   while (gr.next()) {
       records.push({
           sys_id: gr.getValue('sys_id'),
           number: gr.getValue('number'),
           short_description: gr.getValue('short_description'),
				 contact: gr.getDisplayValue('contact')
				 
       });
   }
   data.list = records;
})();

HTML

<table class="table table-striped">
<thead>
<tr>
<th>Number</th>
<th>Short Description</th>
  <th>Contact</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="record in data.list">
<td>{{record.number}}</td>
<td>{{record.short_description}}</td>
  <td>{{record.contact}}</td>
<td>
<button class="btn btn-primary" ng-click="performAction(record)">
                   Take Action
</button>
</td>
</tr>
</tbody>
</table>

Client (Add function)

	$scope.performAction = function(record) {
       alert('Action triggered for ' + record.sys_id);
       // Example: Trigger a script action or redirect
       window.location.href = 'csm?id=create_order_catalog_item_rp&sys_id=34418320778361105c24f664be5a99f4&order_number='+record.number;
   };

Final result: