How to Code Toggle Switches in Portal (HTML/ ClientScript) when On and Off

[Markell]

Hi Guys

I created a Toggle switch and tried to follow a script I found online for making a Widget toggle switch in Portal. I simply wanted to set a Yes/No Field from Yes to No.

Could not get this to work so tried a check box but get the same issue. Issue being I can get it to change from the default value to say 'yes' or 'true' but after that the second click to uncheck or untoggled does nothing.

e.g below:

I start with Checkbox set to 'false' and Toggle switch on Off or in my case 'Remove'

on click or on change It sets the Check box to true:

on the second click i.e setting back to remove the check box is still true and does not change:

I have also tested manually setting the check box to true to see if it sets it false and it does not.

In short I just need to know how to get the toggle switch to work going Off as well as On. Code below:

HTML:

<div class="can-toggle">
<input id="a" type="checkbox" ng-model="yes_no_item_1" ng-change="c.changed('y_n_checkbox')">
<label for="a">
<div class="can-toggle__switch" data-checked="Add" data-unchecked="Remove"></div>
</label>
</div>

Client Script:

function($scope) {
/* widget controller */
var c = this;
var g_form = $scope.page.g_form;
c.y_n_checkbox= 'false'; //Ensure this default value matches the default value of the variable

c.changed=function(){
alert('hello');
if(c.y_n_checkbox) {
g_form.setValue('y_n_checkbox', 'true');
}else{
g_form.setValue('y_n_checkbox', 'false');
}
}
}

Thanks to any help in advance

[Markell · Accepted solution]

Sorted it. Leaving this here incase anyone else needs it in future.

function($scope) {
/* widget controller */
// var c = this;
var g_form = $scope.page.g_form;
var field = $scope.page.field;
//c.y_n_checkbox= 'false'; //Ensure this default value matches the default value of the variable

$scope.changed=function(field){
var field_obj = g_form.getField(field);
var value = g_form.getValue(field);

if (value == 'No'){
//alert('Add');
g_form.setValue('yes_no_item_1','Yes');
}
else if(value == 'Yes'){
// alert('Remove');
g_form.setValue('yes_no_item_1','No');
}
}

}