[HowTo] Add Buttons on Data Tables (no OOTB artifact changes needed)

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: '<Sys ID of the item>',
   			targetTable: '<table name of the item>',
   			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('</th>', '</th><th>Actions</th>')
   			.replace('</td>', '</td><td ng-class="{selected: item.selected}"><button ng-click="click(item)">X</button></td>');
   		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