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. 

[Chuck Tomasi]

Your HTML is calling the newRecord() function, but you don't have a $scope.newRecord() in your client script to react to it. That's where you would create the new record, or call a server script that does it for you.

Are you looking to present a form, or automatically create a record (e.g. in the server script)?

[walshy]

Looking to present a new form where the end user adds a song to the DB for consideration. 

I think I understand how it works on the server side, if I want to add a new record in a business rule I can use

CONDITION - something happens

var addsong = new GlideRecord('x_120100_band_songs'); 
addsong.newRecord();

and this would create a new record, but from what you are saying I need to do this from the client script so it will load a new form for the end user. I didn't think I could do that from the client script. 

Goodness, sorry for all the questions, I am trying to learn the portal stuff on the fly. 

[walshy]

I got lazy in the end. 

Removed the idea of the button in the widget and created a new link widget and shoved up in the header of the page. 

I just used the link button to link straight to the form. 

bm?id=form_for_songs&table=x_120100_band_songs&sys_id=-1&view=sp

its rough but it will get me by.

[Nicholas H · Accepted solution]

A bit late, had a similar issue, ended up cloning the OOTB "widget-data-table" widget, then opened the clone in the editor, removed "options.show_new && " from html line 12

added the cloned widget to the page I needed and the new button seemed to work without issue:

The new button opens up the new form in the mobile view by default but you can change that in the server script to whatever you like, line 41, or just edit the mobile view for that table