https://www.servicenow.com/community/developer-articles/show-case-the-service-portal-experience-app-...

The features to add Buttons to a List (data table) has been requested multiple times in this forums. The solutions presented so far where all based on cloning the OOTB data-table-widget which is strongly advised not to do.

In this article I will show you how to add buttons to the OOTB page without the need to edit the page nor is widget cloning required.

1. Create the 'Data Table Buttons'-Widget (sp_widget):
   
   Client controller:
   
   api.controller=function($compile) {
   
   /* widget controller /
   
   var c = this;
   
   c.click = function (item) {
   
   /
   
   item has the following structure (number, priority, short_description depend on what you selected as fields in the instance options):
   
   {
   
   sys_id: '',
   
   targetTable: '

   ',
   
   number: {
   
   display_value: "INC00000XYZ"
   
   label: "Number"
   
   limit: "40"
   
   type: "string"
   
   value: "INC00000XYZ"
   
   },
   
   priority: {
   
   display_value: "5 - Planning",
   
   label: "Priority",
   
   limit: "40",
   
   type: "integer",
   
   value: "5"
   
   },
   
   short_description: {
   
   display_value: "My Short Description",
   
   label: "Short description",
   
   type: "string",
   
   value: "My Short Description"
   
   }
   
   }
   
   */

   if (item.number.value == 'INC0000001') {  
       alert('INC0000001');  
   }  
   

   };
   
   c.init = function (tableElement) {
   
   var tableScope = tableElement.scope();
   
   tableScope.click = c.click.bind(c);
   
   var template = tableScope.widget.template
   
   .replace('', '

   ')
   
   .replace('', '');
   
   tableElement.html(template);
   
   $compile(tableElement.contents())(tableScope);
   
   };
   
   };
   
   Link:
   
   function link(scope, element, attrs, controller) {
   
   var tableElement = element
   
   .parent() // containing sp-widget
   
   .closest('div') // column
   
   .find('.v' + '5001b062d7101200b0b044580e6103eb'); // widget-data-table Sys ID

   if (tableElement.length === 0) {
   
   // form widget not yet loaded, try again in 50ms
   
   setTimeout(link.apply.bind(link, null, arguments), 50);
   
   return;
   
   }

   controller.init(tableElement);
   
   }

2. Go to the Portal Page (sp_page.list) where you want to add the Button Support (ootb this is the page with id=list)

3. Click on the Column that contains the Data Table Widget
   
   

4. Copy the Sys ID of the Column

5. Create a new Widget Instance (sp_instance.list -> New)
   
   Widget: Data Table Buttons
   
   Column : Open the magnifying lens and apply the filter: [Sys ID] ["starts with" or "is"] [sys_id_from_step4]
   
   Order: 999
   
   

6. Save the Instance Record

Actions	X