Javascript: how to remove entries from a dropdown. Ex: to limit account roles

API & Customization Show & Tell
1

Hi to all,

My project has many companies and each with many employees.

Now the boss of all bosses is the new SuperAdmin role I've created, that can create companies. This one can also create Administrators for the companies, and any lower roles in the system. But I want to avoid anyone in the whole system to raise themselves to the Supervisor, Admin or SuperAdmin levels. Here's how I did it.

You need to replace the view and field from view_232_field_25_chzn to whatever you have for Account Roles in your own Add and Edit Account pages. Note: leave the _chzn at the end and use all underscores.

The trick is to trap all mousedown and keyup (yes, not keydown!) on the Roles selector and remove each found list element from the Chosen dropdown object.

Enjoy,
Norm

/////////////////////////////////////////////////////////////////////////////////////
//Remove restricted entries from a dropdown.  In this case, high-level Account Roles.
//$(document).on('mousedown keyup',
    '#view_313_field_25_chzn' + //Roles field for Add account
    ', #view_232_field_25_chzn' //Roles field for Edit account
    //', #view_XXX_field_YYY_chzn' //Add more here as needed.  Don't forget the + at end of line!
    , function () {
        $("ul.chzn-results li:contains('Supervisor')").remove();
        $("ul.chzn-results li:contains('Admin')").remove();
        $("ul.chzn-results li:contains('SuperAdmin')").remove();
    }
);

1 Like
2

Hey Norm, that’s just what I’m looking for!

How do you restrict that edit to users other than the SuperAdmin role? You want them to still be able to edit the Role field to include those Roles, right?

3

Ah, think I have it sorted myself:

//Remove "Partner Team" from Role dropdown if current user isn't already in "Partner Team"
$(document).on('mousedown keyup',
    '#view_62_field_12_chzn' + //Roles field for Add account
    ', #view_55_field_12_chzn' //Roles field for Edit account
    , function () {
      	if (!Knack.getUserAttributes().roles.includes("Partner Team"))
        	$("ul.chzn-results li:contains('Partner Team')").remove();
    }
);
4

Any thoughts on how to extend this to an inline table edit?

Thanks.

5

Jeff,

Good point. I take note and will let you know if I can do it, with the solution.

Norm

6

Awesome. I might have a use for this in a new app I am building.
Thanks for sharing.

7

Here’s the updated version that supports the dropdown in an Inline Edit table also.

Enjoy!

Normand Defayette
Cortex R&D Inc.

/////////////////////////////////////////////////////////////////////////////////////
//Remove restricted entries from a dropdown.
//In this case, only high-level SuperAdmin, Admin and Developer can change a role.
//This works with regular dropdowns and within an inline editing table.
//You will need my free KTL library - see here: https://github.com/cortexrd/Knack-Toolkit-Library
$(document).on('mousedown keyup', function (e) {
	var knInput = e.target.closest('.kn-input') || e.target.closest('.cell-edit');
	if (!knInput) return;

	var fieldId = knInput.getAttribute('data-input-id') || knInput.getAttribute('data-field-key');
	if (!fieldId) return;

	var fieldObj = Knack.objects.getField(fieldId);
	if (!fieldObj) return;

	var fieldType = fieldObj.attributes.type;
	if (fieldType === 'user_roles') {
		ktl.core.waitSelector('ul.chzn-results') //Wait for options list to be populated.
			.then(function () {
				if (Knack.getUserRoleNames().includes('SuperAdmin') ||
					Knack.getUserRoleNames().includes('Admin') ||
					Knack.getUserRoleNames().includes('Developer'))
					return;

				$("ul.chzn-results li:contains('SuperAdmin')").remove();
				$("ul.chzn-results li:contains('Admin')").remove();
				$("ul.chzn-results li:contains('Manager')").remove();
				$("ul.chzn-results li:contains('Supervisor')").remove();
			})
			.catch(() => {
				console.log('Failed waiting for results');
			});
	}
});
1 Like
8

Thank you – I’ll give it a try.