Service Portal - Checkbox value is not being shown

[Divya Kandula]

I am new to Service portal. I have two fields abc and xyz on company table which are checkboxes. on my portal widget i want to show these checkboxes if they are ticked. The checkboxes are being shown on portal but with empty value. Also these should be read only. I have written below code. Please let me know where im wrong.

<div class="checkbox" ng-repeat="checkbox in data.widget.open_access">
    
       <label>
              <input type="checkbox" value="checkbox.value" disabled="true"> {{checkbox.label}}
       </label>
    
  </div>

Server Side script:
  var getCompany = new GlideRecord('customer_account');
  
	data.abc= getCompany.u_grant_anyone_access_to_use_my_abc;
	data.xyz= getCompany.u_grant_anyone_access_to_use_my_xyz;
if(condition == true){
data.widget.open_access = [{label:"ABC Open",value:data.abc}];
data.widget.open_access = [{label:"XYZ Open",value:data.xyz}];
}

[-O-]

AngularJS handles only parts of the HTML that are directives or are enclosed by {{ }}.

So attribute value="checkbox.value" is pretty much ignored by it.

The way to link some value in scope to some part of the UI (HTML) one uses (comes-with-AngularJS) directive ng-model.

E.g HTML template:

<div>
  <input
         data-ng-click="logInputs()"
         data-ng-model="checkbox_1"
         id="checkbox_1"
         type="checkbox"/>&nbsp;<label for="checkbox_1">Enable/disable next</label>
  <br/>
  <input
         data-ng-click="logInputs()"
         data-ng-disabled="!checkbox_1"
         data-ng-model="checkbox_2"
         id="checkbox_2"
         type="checkbox"/>&nbsp;<label for="checkbox_2">{{ checkbox_1Label }}</label>
</div>

Client script:

api.controller=function($scope) {
	/* widget controller */
	var c = this;

	$scope.checkbox_1Label = 'Click me... or not.';
	$scope.logInputs = logInputs

	function logInputs () {
		console.log($scope.checkbox_2);
	}
};

Note that data-ng-model is the same as ng-model, only the former adheres better to web standards.

In the example above you will get two check-boxes where the 2nd one gets enabled or disables depending on the 1st being marked or not. That is because directive data-ng-disabled="checkbox_1" tells the framework to enable or disable the check-box based on what is in property checkbox_1 of the scope.

The 2nd one saves its value into property checkbox_2 and is logged to the browser console whenever any of the checkboxes is changed (because of directive data-ng-click="logInputs()" on both check-boxes).

[-O-]

There is a variant to this solution where all check-boxes save their values as properties of an object:

HTML template:

<div>
  <input
         data-ng-click="logInputs()"
         data-ng-model="checkboxes[0]"
         id="checkbox_1"
         type="checkbox"/>&nbsp;<label for="checkbox_1">Enable/disable next</label>
  <br/>
  <input
         data-ng-click="logInputs()"
         data-ng-disabled="!checkboxes[0]"
         data-ng-model="checkboxes[1]"
         id="checkbox_2"
         type="checkbox"/>&nbsp;<label for="checkbox_2">{{ checkbox_1Label }}</label>
</div>

Client script:

api.controller=function($scope) {
	var c = this;

	$scope.checkbox_1Label = 'Click me... or not.';
	$scope.checkboxes = {};
	$scope.logInputs = logInputs

	function logInputs () {
		console.log($scope.checkboxes);
	}
};

This will update properties 0 and 1 on object $scope.checkboxes.

This is way better as it enables handling both generating check-boxes and working with the results in an iterative way.