Checkbox List in widget settings

[elivnjak]

Hi,

I'm trying to have a public property in my widget which will be a checkbox list in the widget settings.

The checkbox options will be hard coded in the controller. So maybe like a list of some sort.

Any chance someone can help me with how to do it?

Many thanks,
Edin

[ElenaGaneva]

Hi Edin,

For this scenario you may want to create your custom designer view for your widget, so I can suggest you check the following article on the matter:
https://github.com/Sitefinity/feather/wiki/Create-a-custom-designer-view

Then you can add input checkbox as mentioned in the AngularJS documentaion

This approach can simplify your scenario if you want to hardcode the checkbox option in the widget designer isntead of in the widget's controller.

In case you have list of available options in the widget's controller then you can find more complex example how to work with lists through Feather's widget desinger in the following sample:
https://github.com/Sitefinity/feather-samples/tree/master/ListWidget

Regards,
Elena

[elivnjak]

Hi Elena,
Thanks for your reply.
I have implemented a custom view.
I have added a public boolean property in my MVC controller.
The thing i noticed that is i use the standard angular functionality the value of that public property is a String so that checkbox is not preselected. I had to check if its "True" then reset the property to true in the js file.
Am i doing something wrong?

(function ($) {
    var designerModule = angular.module('designer');

    //This is basic controller for the "ManageItems" designer view.
    designerModule.controller('SettingsCtrl', ['$scope', 'propertyService', function ($scope, propertyService) {

        $scope.feedback.showLoadingIndicator = true;

        propertyService.get()
            .then(function (data) {
                if (data) {
                    $scope.properties = propertyService.toAssociativeArray(data.Items);
                    if ($scope.properties.TestCheckBox.PropertyValue == "True") {
                        $scope.properties.TestCheckBox.PropertyValue = true;
                    } else {
                        $scope.properties.TestCheckBox.PropertyValue = false;
                    }
                }
            },
            function (data) {
                $scope.feedback.showError = true;
            })
            .finally(function () {
                $scope.testCheck = true;
                $scope.feedback.showLoadingIndicator = false;
            });

    }]);
})(jQuery);

<input type="checkbox" ng-model="properties.TestCheckBox.PropertyValue">

Thanks again
Edin

[ElenaGaneva]

Hi Edin,

You can try the following isntead:

<input type="checkbox" ng-true-value="'True'" ng-false-value="'False'" ng-model="properties.TestCheckBox.PropertyValue" />

Regards,
Elena

[elivnjak]

Hi Elena,

Unfortunately that didnt work for me. I tried 'True' and 'true' just in case but no luck.

Regards,
Edin