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

[Markus Kraus]

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

[Shaily2]

can we incorporate filter records functionality too in this widget?

[Markus Kraus]

@Shaily2 I'm not sure what you mean by "filter records functionality". 

By the way: Note that I have published an application which implements the Data Table (Client) Side Buttons without the need to create any custom artefacts:
https://www.servicenow.com/community/developer-articles/show-case-the-service-portal-experience-app-...

[SergejR]

Hi @Markus Kraus 

is it possible to create Data Table (Client) Side Buttons also for dynamic data tables?

[Markus Kraus]

@SergejR Not sure what you mean by "dynamic data tables". But Client Side Buttons are loaded automatically even for rows which includes updates by recordwatchers (but the ootb data table widget already has this included).

EDIT: I realised this is not the thread for the portal experience app, please take a look at the first link of the first post in this thread. It references a scoped app which enables all client side ui actions (banner, footer and row) in the portal.