property editor checkbox toggle - Using Umbraco and getting started

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Thobias Michel 18 posts 99 karma points

Jun 05, 2020 @ 20:31
0

Property Editor - Checkbox Toggle
I am trying to create a custom property editor with a checkbox.

The basic html checkbox is no problem, but how can i get the umbraco styles toggle button for TrueFalse?

I tried
```
 <label class="checkbox">
    <input type="checkbox" value="true" class="umb-property-editor umb-toggle" ng-model="model.value.applystylesheet"/>Apply Stylesheet
</label>
```
Is there some css class missing?
Copy Link
Bo Jacobsen 606 posts 2404 karma points

Jun 05, 2020 @ 22:18
0
```
<umb-toggle
        checked="model.value.applystylesheet"
        on-click="vm.toggle()">
</umb-toggle>
```
https://our.umbraco.com/apidocs/v8/ui/#/api/umbraco.directives.directive:umbToggle
Copy Link

Thobias Michel 18 posts 99 karma points

Jun 06, 2020 @ 09:57

Thanks for this hint!

My working source code:

JS:

var vm = this;

        vm.toggle = toggle;
        vm.disabled = false;
        vm.checked = $scope.model.value.applystylesheet;            

        function toggle() {
            vm.checked = !vm.checked;
            $scope.model.value.applystylesheet = vm.checked;
        }

        $scope.vm = vm;

Html:

 <umb-toggle
        checked="model.value.applystylesheet"
        disabled="vm.disabled"
        show-labels="true"
        label-on="Start"
        label-off="Stop"
        label-position="right"
        on-click="vm.toggle()">
</umb-toggle>

The documentation does not mentioned how to store the value back in the model. This prevents the view from updating the toggle button and storing the new value.

Copy Link

Bo Jacobsen 606 posts 2404 karma points

Jun 06, 2020 @ 12:21
0
Hi Thobias.

I dunno why you can't store the new value. Aint that what you doing here?
```
function toggle() {
    vm.checked = !vm.checked;
    $scope.model.value.applystylesheet = vm.checked;
}
```
Copy Link
Thobias Michel 18 posts 99 karma points

Jun 06, 2020 @ 12:24
0
At 8.6.2 the value was not stored without this line
```
$scope.model.value.applystylesheet = vm.checked;
```
I am not sure why, but it works for me.
Copy Link
Bo Jacobsen 606 posts 2404 karma points

Jun 06, 2020 @ 12:32
0
Yes, thats correct. You need to assign the new value to your $scope.model.value.applystylesheet
```
function toggle() {
    $scope.model.value.applystylesheet = !$scope.model.value.applystylesheet;
}
```
Copy Link
Thobias Michel 18 posts 99 karma points

Jun 06, 2020 @ 12:34

0

Yes. The code above is just an example. Needs to be refactored in some cases.

But for other people who have trouble, could this be helpful.

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?

Property Editor - Checkbox Toggle