Is there a way to add checkboxes to a data table widget similar to the list view in the platform?

YenGar · ‎09-24-2020

Hi all,

I've been asked to provide a checkbox functionality in the portal to approve/update multiple records at a time similar to the list view in the platform. I'm wondering if this can be done using a data table widget so the user can select all the items they want to update and then just click a button to execute. Has anyone done this before? If so, would you be able to provide some assistance in the html/server part of the widget? If it's not possible in a data table, do you have some suggestions for a custom widget that could provide this same functionality?

Data table where this could possibly be added to:

Thank you!

Yen

YenGar · ‎10-16-2020

Thank you Jason! Sorry for getting back to you so late! I did add the checkboxes in the table. I decided to create a new widget instead. This is how it's looking. I still have to adjust some column widths to prevent the titles from wrapping. I also need to figure out how to uncheck the check all box when the user clicks it and then removes a check box from the list.

I did go to SNHackery website but didn't end up using the table he had however, i took some design ideas from him so thank you for sharing the website!!!

Yeny

View solution in original post

Jason Williams · ‎09-25-2020

Hi Yen,

I believe you would need to clone the Data Table Widget to achieve this. For the HTML, you could do something like the below to add a checkbox on each row and in the header:

and then a button (or drop down if you'd prefer) in the footer:

The result looks something like this (note: I have added the check-boxes on the right hand side as it was a little less fiddly and avoided re-positioning the headings and footer buttons, although this can be achieved!):

This is a great post on the subject and will likely help you with the Server side of things as well as further things you can achieve.

https://snhackery.com/2019/07/08/customizing-the-data-table-widget/

Don't forget that if you use a cloned version of the Data Table widget, depending on how you are adding it to a page, you may also need to clone the Data Table From Instance Definition widget and set it to point at your cloned Data Table widget.

Hope this helps?

Kind Regards,

Jason

YenGar · ‎10-16-2020

Thank you Jason! Sorry for getting back to you so late! I did add the checkboxes in the table. I decided to create a new widget instead. This is how it's looking. I still have to adjust some column widths to prevent the titles from wrapping. I also need to figure out how to uncheck the check all box when the user clicks it and then removes a check box from the list.

I did go to SNHackery website but didn't end up using the table he had however, i took some design ideas from him so thank you for sharing the website!!!

Yeny

manoj_s · ‎02-28-2021

Can you let me know how you added the Action buttons.

YenGar · ‎03-04-2021

Hi Manoj,

I just added them as buttons in the HTML. I have several that use different conditions to show up and do different things but here are the regular approve and reject ones

 <button name="approve" title="Approve" data-toggle="tooltip" ng-if="approval.state == 'requested'" ng-click="approve(approval.sys_id);" class="btn btn-success btn-xs"> <i class="fa fa-check-square fa-xs"></i></button>
                    <button name="reject" title="Reject" data-toggle="tooltip" ng-if="approval.state == 'requested'" ng-click="reject(approval.sys_id);" class="btn btn-danger btn-xs"><i class="fa fa-times fa-xs"></i></button>

You'll have to add the client script and the server part to handle the action when clicked

Client Script:

$scope.approve = function(id) {
		$scope.data.op = "approved";
		$scope.data.target = id;
		c.server.update();
		get();
	};

	$scope.reject = function(id) {
		$scope.data.op = "rejected";
		$scope.data.target = id;
		c.server.update();
		get();
	};

Server:

if (input.op == 'approved' || input.op == 'rejected') {
var app = new GlideRecord("sysapproval_approver");
if (app.get(input.target)) {
if (app.state == 'requested') {
app.comments = input.comment;
}
app.state = input.op;
app.update();
//gs.addInfoMessage('Approval has been completed');
}
}

Hope this helps!

Yen