Copied to clipboard

Flag this post as spam?

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


  • Viktor Thorsson 2 posts 84 karma points
    Aug 26, 2015 @ 08:15
    Viktor Thorsson
    0

    How to add values to radiobuttonlist prevalue editor

    I am in the process of creating a custom property editor and want to have three choices for one specific prevalue. In this specific case I want to give the ability to select between three different editors, but the problem I have is to get anything showing.

    prevalues: {
                    {
                        label: "Type of editor",
                        description: "The type of editor for this data type",
                        key: "typeofeditorkey",
                        view: "radiobuttonlist"
                        //What do I put here to get values?
                    }
                ]
            }
    

    I have tried to look at all the existing documentation and searching google for hours, trying different stuff from looking at the radiobuttonlist.html view but so far no luck.

    Can anyone give me any pointers?

  • Rune Hem Strand 147 posts 911 karma points hq c-trib
    Aug 27, 2015 @ 16:02
    Rune Hem Strand
    107

    Hi Viktor

    It is not possible to set prevalues for the radiobuttonlist prevalue editor. It is only used for Grid Layouts atm. I have logged a feature request on the issue tracker to make it usable from package.manifest.

    In the mean time I think the best option would be to make a custom prevalue editor. Something like this:

    1: Create a folder in /App_Plugins/ call it radiobuttonprevalue

    2: Create three files in /App_Plugins/radiobuttonprevalue/, package.manifest, radiobuttonprevalue.controller.js and radiobuttonprevalue.html.

    3: In package.manifest all we have to do is make sure the controller is added to Umbraco so:

    {
        javascript: ["~/app_plugins/radiobuttonprevalue/radiobuttonprevalue.controller.js"]
    }
    

    4: In radiobuttonprevalue.controller.js you set the prevalues you want:

    app.controller("my.radiobuttonprevaluecontroller", function ($scope) {
    
        $scope.model.prevalues = [
            "option 1",
            "option 2",
            "option 3"
        ];
    
    });
    

    5: You can use the view from the radiobuttonlist.html, all you need to add is the controller, so radiobuttonprevalue.html would look like:

    <ul class="unstyled" ng-controller="my.radiobuttonprevaluecontroller">
        <li ng-repeat="preval in model.prevalues">
            <label class="checkbox">
                <input type="radio" ng-model="model.value" value="{{preval}}" /> {{preval}}
            </label>
        </li>
    </ul>
    

    And that's it. Prevalue editor done!

    To use it simply add it to your custom editors package.manifestfile:

    prevalues: {
        fields: [
            {
                label: "Options",
                description: "Some options to choose from",
                key: "options",
                view: "~/app_plugins/radiobuttonprevalue/radiobuttonprevalue.html",
            }
        ]
    }
    

    and now you get a radiobuttonlist with 3 options :)

    radiobutton list prevalue editor

    The value selected will be available on the property editor in $scope.model.config.options.

    Hope this helps

    /rune

  • Viktor Thorsson 2 posts 84 karma points
    Aug 31, 2015 @ 08:24
    Viktor Thorsson
    2

    Thanks Rune!

    This answer was spot on!

    I should have suspected that it was a bug before I banged my head against the wall...

    This really did what I needed, the only difference I made was to have objects instead of strings for the prevalue options, to be able to separate the label from the actual value.

    You really made my day :-)

Please Sign in or register to post replies

Write your reply to:

Draft