Custom Checkbox with a hyper link not working as expected.

[kevinwong23]

Hello,

I'm having an issue with a client controller script or the HTML for a custom checkbox field. This checkbox needs to be custom due to the customers requirements for it to have a hyperlink in the question. After submitting the Access item (OOTB catalog item in PDI) and going back to the item page using the browser. The client controller appears to stop working, until the form is reloaded again (image 2 or shown in video linked below).

Any suggestions would be much appreciated!

Information:

Catalog item: Access

• Link: <your instance>/sp?id=sc_cat_item&sys_id=039c516237b1300054b6a3549dbe5dfc

Variable

• Type: Custom

Widget

• HTML

<div class="checkbox-container">
<input type="checkbox" ng-model='c.data.check' ng-change='c.checkboxcheck()'> 
  <label class="checkbox-text">
  <a href="google.com" target="_blank"> Test Link</a></label>
</div>

• Client Controller

api.controller=function() {
	var c = this;
	
	c.checkboxcheck=function() {
		var g_form = scope.page.g_form;
		g_form.setValue('test_checkbox', c.data.check ? 'true' : 'false');
	};
};

• Catalog Client Script

function onSubmit() {
   var CheckBoxValue = g_form.getValue('test_checkbox');
   alert(CheckBoxValue); // For debugging, comment out if not needed.
   if(CheckBoxValue == 'false' || ""){
		g_form.addErrorMessage('Checkbox must be checked before submitting.');
		return false;
	}
	else{
		return true;
	}
}

Image 1. Working as expected.

Image 2. After submitting the Access item and going back to fill out the form again, the client controller or the HTML doesn't appear to be working like before. The form would then need to be reloaded for the custom functionality to return.

Video

[VikMach · Accepted solution]

Hi @kevinwong23 - Its a data binding issue.

api.controller=function($scope) {
	var c = this;
	
	c.checkboxcheck=function() {
		var g_form = $scope.page.g_form; // corrected scope
		g_form.setValue('test_checkbox', c.data.check ? 'true' : 'false');
	};
};

Let me know if that works!

Regards,
Vikas K

[VikMach · Accepted solution]

Hi @kevinwong23 - Its a data binding issue.

api.controller=function($scope) {
	var c = this;
	
	c.checkboxcheck=function() {
		var g_form = $scope.page.g_form; // corrected scope
		g_form.setValue('test_checkbox', c.data.check ? 'true' : 'false');
	};
};

Let me know if that works!

Regards,
Vikas K

[Vishal Jaswal · Accepted solution]

Hello @kevinwong23 

This is how how Angular widgets in Service Portal are initialized and how form values are preserved or not across page navigation.

RCA:

When you check the checkbox, you’re setting a form field (test_checkbox) via g_form.setValue().
If you navigate away and then hit Back, the DOM is cached by the browser (for performance), but Angular scope and form bindings aren’t reinitialized.
So g_form.setValue() does not re-run, and test_checkbox remains unset unless the page is refreshed.

Solution: Force your widget to refresh its data and bindings when it’s loaded. Update your client controller as shown below:

api.controller = function($scope, $window) {
   var c = this;
   $scope.$on('$viewContentLoaded', function() {
       $window.location.reload(); // Forces reload when returning with browser's back button
   });
   c.checkboxcheck = function() {
       var g_form = $scope.page.g_form;
       g_form.setValue('test_checkbox', c.data.check ? 'true' : 'false');
   };
};

Or just modify these two in your code (add scope in your function): api.controller=function($scope) and var g_form = $scope.page.g_form

Validation Results:

[kwong43]

Thank you for the explanation,@Vishal Jaswal. It worked like a charm.

[Vishal Jaswal]

You're welcome! Please mark both the answers shared as accepted solution so that it will help other fellow community members to learn as well.

... and if you can share which software you use to record the screen video and audio, then it will help me to record some vidoes and upload them too instead of screenshots.