Add custom buttons to list page

ASP.NET Maker General Discussion (ASP.NET Maker)
1

Hi, I want to add to the LIST page some custom buttons related to a specific table.
It seems to me that the ideal place is in the “btn toolbar” (where there are export, search and filter buttons).
E.g. I tried to add buttons to ExportOptions, but this buttons are hidden if the table is empty.
I know I can add buttons thru client JS, but I would like to do this at server level, so I can easily manage some data-related conditions.
Any idea?

2

You can use the Custom Actions feature. Please read:
https://aspnetmaker.dev/docs/#/customscripts.html?id=row_customaction

3

The custom actions are for selected records, I want to add a custom button which is not related to record actions.

4

Just clone the Add button and customize it. Here is an example of mine:The API will open a nice SweetAlert with the result of the action.
For instance, in this case I’m showing a custom validation message, otherwise if the returned message from API is a mere “-” (dash), I just refresh the page.

// API call
function AddNewWBS(action_id, product_id, company_id) {

	var urlAddNewWBS = ew.PATH_BASE + ew.API_URL, objectAddNewWBS = "AddNewControllingWBS";
	$.get(urlAddNewWBS + objectAddNewWBS + "?ActionID=" + encodeURIComponent(action_id) + "&ProductID=" + encodeURIComponent(product_id) + "&CompanyID=" + encodeURIComponent(company_id), function(data) {
		if (data) {
			if (data != "-") {
				console.log(data);
				Swal.fire({
					html: '<h2 style="text-align:center; line-height: 1.2em"><i class="nav-icon fas fa-exclamation-circle fa-3x" style="color: salmon; float:left; padding: 10px;"></i>' + data + '</h2>',
					showConfirmButton: true
				});
			}
			else {
				location.reload();
			}
		} else {
			alert(data.failureMessage);
		}
	});

}

// vars for text and onclick attribute
var AddWBS_Text = "Action Name";
var AddWBS_OnClick = "AddNewWBS(1," + ProductID + "," + CompanyID + ")";

// clone the Add button
$('a[data-table="<NameOfThePage>"]').clone().attr("data-table","WBS").insertAfter($('a[data-table="<NameOfThePage>"]'));

// Add/Change attributes
$('a[data-table="WBS"]').attr("onclick",AddWBS_OnClick);
$('a[data-table="WBS"]').attr("data-caption",AddWBS_Text );
$('a[data-table="WBS"]').attr("data-original-title",AddWBS_Text );
$('<span>&nbsp;' + AddWBS_Text + '</span>').insertAfter($('a[data-table="WBS"] i'));

I usually move the Add button before the search icon:

$('div.btn-toolbar.ew-toolbar').prepend($('div.ew-list-other-options'));

I used an API for the custom action:

[Authorize]
public class AddNewControllingWBSController : ApiController
{
	[HttpGet]
	public IActionResult Get(int ActionID, int ProductID, int CompanyID)
	{
		string ReturnMessage = "";
		Dapper.DynamicParameters parameters = new Dapper.DynamicParameters();

		parameters.Add("@ActionID", AdjustSql(ActionID), System.Data.DbType.Int32, System.Data.ParameterDirection.Input);
		parameters.Add("@ProductID", AdjustSql(ProductID), System.Data.DbType.Int32, System.Data.ParameterDirection.Input);
		parameters.Add("@CompanyID", AdjustSql(CompanyID), System.Data.DbType.Int32, System.Data.ParameterDirection.Input);
		parameters.Add("@ReturnMessage", AdjustSql(CompanyID), System.Data.DbType.String, System.Data.ParameterDirection.Output);

		Execute("<StoredProcedureHere>", parameters, null, null, System.Data.CommandType.StoredProcedure);

		ReturnMessage = parameters.Get<String>("@ReturnMessage");
		return Json(ReturnMessage);
	}
}

You have a good point to start, you’ll figure out :wink:
This code is for ANM2021, btw.