how to add values to radiobuttonlist prevalue editor

Go to solution

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

Viktor Thorsson 2 posts 84 karma points

Aug 26, 2015 @ 08:15
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?
Copy Link
Rune Hem Strand 147 posts 911 karma points hq c-trib

Aug 27, 2015 @ 16:02
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 :)

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

Hope this helps

/rune
Copy Link
Viktor Thorsson 2 posts 84 karma points

Aug 31, 2015 @ 08:24

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 :-)

Copy Link
is working on a reply...

Please Sign in or register to post replies

Flag this post as spam?