Make a checkbox ticked based on a value

[harun_isakovic]

Hey guys,

I'm creating my own widget for fun but I got stuck on one part now.

This is how it looks like

Here is the HTML code

<div>
  <!--<pre>{{c.data.people | json}}</pre>-->
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>UserID</th>
    <th>Email</th>
    <th>Active</th>
  </tr>
  <tr ng-repeat="person in c.data.people">
    <td>{{person.name}}</td>
    <td>{{person.user_name}}</td>
    <td>{{person.email}}</td>
    <td><input id="active-checkbox" class="checkbox" type="checkbox">{{person.active}}</td>
  </tr>
  </table>
  <input type="button" value="Save">
</div>

Here is the Server code

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
data.people = [];
var userGr = new GlideRecord("sys_user");
	userGr.setLimit(10);
	userGr.addActiveQuery();
	userGr.query();
	
	while (userGr.next()) {
		data.people.push({"name" : userGr.getValue("name"),
		"user_name" : userGr.getValue("user_name"),
		"email" : userGr.getValue("email"),
		"active" : userGr.getValue("active")
	});
}
})();

What Im trying to do is eventually build it so when the widget loads it shows me the users and the active column shows their current active status, and then I can untick it and press save this will then update the actual User table, but that is for the future.

Where I am stuck right now is having the boxes ticked based on the value from the active variable, if it retrieves "1" then it means the user is active and that rows checkbox should be ticked, if its "0" it means he's inactive and the checkbox will not be ticked.
As you can see for all of them its retrieving 1 because I am only doing active user query, I'm not sure how to make the box ticked.

Anyone can provide some guidance on how to do this?
Thanks in advance!

[Michael Jones - · Accepted solution]

You are very close.

If you want to see inactive users in your widget, you will need to remove the addActiveQuery() from your GlideRecord - as it stands you will always return only active users.

To get the checkboxes to work, you'll need to use the ng-checked attribute to set it dynamically. 

Try these revised elements and you should have the right idea - I also modified the query to sort by most recently updated, so set a few people to inactive to see them show up. 

HTML:

<div>
  <!--<pre>{{c.data.people | json}}</pre>-->
<table style="width:100%">
  <tr>
    <th>Name</th>
    <th>UserID</th>
    <th>Email</th>
    <th>Active</th>
  </tr>
  <tr ng-repeat="person in c.data.people">
    <td>{{person.name}}</td>
    <td>{{person.user_name}}</td>
    <td>{{person.email}}</td>
    <td><input id="active-checkbox" class="checkbox" type="checkbox" ng-checked="{{person.active}}"></td>
  </tr>
  </table>
  <input type="button" value="Save">
</div>

Server Script: 

(function() {
  /* populate the 'data' object */
  /* e.g., data.table = $sp.getValue('table'); */
data.people = [];
var userGr = new GlideRecord("sys_user");
	userGr.setLimit(10);
	userGr.orderByDesc('sys_updated_on')
	userGr.query();
	
	while (userGr.next()) {
		data.people.push({"name" : userGr.getValue("name"),
		"user_name" : userGr.getValue("user_name"),
		"email" : userGr.getValue("email"),
		"active" : userGr.getValue("active")
	});
}
})();

And these were my results

I hope this helps!

If this was helpful, or correct, please be kind and mark the answer appropriately.

Michael Jones - Proud member of the GlideFast Consulting Team!

[harun_isakovic]

Would have adjusted the query later on to retrieve all users was just trying to figure this getting ticked first, and all it needed was a tiny ng-checked attribute 😄

Thank you for the help, I will continue my fun until the next blocker.

[Aki18]

Hi @Michael Jones -  @harun_isakovic ,

Thank you for the great sample of the custom widget, but looks like the [Save] button is not working. 

Could you please let me know how to make it work?

Best Regards,

Aki