New record button for table widget

[walshy]

SO this feels stupid, I have been going around in circles on this one. 

I have a table widget that is editable but does not have a 'new' button on it. I wanted to add it so users could add new records to the table. 

I have tried to understand how the data table from URL widget has the button on it, but alas I cannot get it. 

I ended up creating a button in the HTML of the widget. 

<div ng-if="data.showWidget"> 
  <!---ng-if="data.eventTrue"--->
  <div class="alert alert-danger" ng-if="data.invalid_table">
    ${Table not defined} '{{data.table_label}}'
  </div>
  <button name="new" type="button" class="btn btn-primary btn-sm m-l-xs" ng-click="newRecord()">Add Song</button>
  <sp-widget ng-if="data.dataTableWidget" widget="data.dataTableWidget" ></sp-widget>
</div>

I was wanting the ng-click to then generate a newRecord in the table the widget is running off.

I just dont know what to do with the client script and the server script

client

function ($rootScope, $scope, spUtil, $location, spAriaFocusManager) {
	
		var c = this;
	
	 $rootScope.$on('updateSetLists', function(event,setListNumber) {
		if(setListNumber >= c.options.parameter){
c.data.showWidget = true;
}else{
c.data.showWidget = false;
}
  });
	
	$scope.$on('data_table.click', function(e, parms){
		var p = $scope.data.page_id || 'form';
		var s = {id: p, table: parms.table, sys_id: parms.sys_id, view: 'sp'};
		var newURL = $location.search(s);
		
		spAriaFocusManager.navigateToLink(newURL.url());
		
	});
	
}

server

(function(){
	/*  "use strict"; - linter issues */
	// populate the 'data' object
	var sp_page = $sp.getValue('sp_page');
	var pageGR = new GlideRecord('sp_page');
	pageGR.get(sp_page);
	//var addsong = new GlideRecord('x_120100_band_songs'); 
	//addsong.newRecord();
	
	//TO HIDE SET LIST WIDGETS ON PAGE LOAD
	data.showWidget = true; 
	
		
	data.page_id = pageGR.id.getDisplayValue();
	$sp.getValues(data);
	if (data.field_list) {
		data.fields_array = data.field_list.split(',');
	} else {
		data.field_list = $sp.getListColumns(data.table);
	}
	
	if (input) {
		data.p = input.p;
		data.o = input.o;
		data.d = input.d;
		data.q = input.q;
	}
	data.p = data.p || 1;
	data.o = data.o || $sp.getValue('order_by');
	data.d = data.d || $sp.getValue('order_direction');
	
	data.page_index = (data.p - 1);
	data.window_size = $sp.getValue('maximum_entries') || 10;
	data.window_start  = (data.page_index * data.window_size);
	data.window_end = (((data.page_index + 1) * data.window_size));
	data.filter = $sp.getValue("filter");
	
	var gr = new GlideRecordSecure(data.table);
	if (!gr.isValid()) {
		data.invalid_table = true;
		data.table_label = data.table;
		return;
	}
	data.table_label = gr.getLabel();
	
	var widgetParams = {
		table: data.table,
		fields: data.field_list,
		o: data.o,
		d: data.d,
		filter: data.filter,
		window_size: data.window_size,
		view: 'sp',
		title: options.title,
		show_breadcrumbs: false
	};
	data.dataTableWidget = $sp.getWidget('editable-data-table', widgetParams);
	
})();

Also I would prefer the button to sit where all the other buttons do, but right now I just want the button to create a new record lol. I figure it will have something to do with where I put the code in the HTML or list it as a header/title class or the like. 

[Raf1]

One way of achieving this without cloning a widget is by setting the JSON option in the widget instance like:

{

   "show_new" : {

   "displayValue" : true,

   "value" : true

   }
     
    
}

[donaldbatesjr]

Didn't see this initially, but yes adding this on the "Instance in Page Editor" lets you add the new button and filter if you so desire.

{
"enable_filter":true,
"show_new":true
}