Skip to content

Instantly share code, notes, and snippets.

@ProNotion
Last active June 19, 2024 07:24
Show Gist options
  • Save ProNotion/bc1692a02085f4e1d3d3a22214fbbbe4 to your computer and use it in GitHub Desktop.
Save ProNotion/bc1692a02085f4e1d3d3a22214fbbbe4 to your computer and use it in GitHub Desktop.
Umbraco Radio Button List With Default Value
<div ng-controller="RadioButtonListWithDefault.DropdownController as vm">
<select ng-model="vm.model.value">
<option ng-repeat="item in vm.items" value="{{item.value}}">
{{item.value}}
</option>
</select>
</div>
angular.module("umbraco").controller("RadioButtonListWithDefault.Controller", ['$scope', '$controller', function ($scope, $controller) {
// Extend the core CheckboxListController
angular.extend(this, $controller('Umbraco.PropertyEditors.CheckboxListController', { $scope: $scope }));
const vm = this;
vm.model = $scope.model;
// Initialize items and default from the configuration
vm.items = vm.model.config.items;
vm.default = vm.model.config.default;
// Ensure model value is set to default if not already set
if (!vm.model.value && vm.default) {
vm.model.value = vm.default;
}
}]);
angular.module("umbraco").controller("RadioButtonListWithDefault.DropdownController", ['$scope', function ($scope) {
const vm = this;
vm.model = $scope.model;
// Access the preValues from the correct scope
const preValues = $scope.$parent.$parent.preValues;
// Initialize items from the preValues
let itemsConfig = null;
if (preValues && preValues.length > 0) {
itemsConfig = preValues.find(preValue => preValue.alias === 'items');
}
vm.items = itemsConfig ? itemsConfig.value || [] : [];
// Ensure items is an array
if (!Array.isArray(vm.items)) {
vm.items = [];
}
// Watch for changes in the itemsConfig configuration and update items
$scope.$watch(() => itemsConfig.value, function (newValue, oldValue) {
if (newValue !== oldValue) {
vm.items = newValue || [];
if (!Array.isArray(vm.items)) {
vm.items = [];
}
}
}, true);
}]);
<div ng-controller="RadioButtonListWithDefault.Controller as vm">
<div class="umb-radiobutton-list">
<div ng-repeat="item in vm.items">
<label>
<input type="radio" name="{{vm.model.alias}}" ng-value="item.value" ng-model="vm.model.value" ng-checked="item === vm.default"/>
{{item.value}}
</label>
</div>
</div>
</div>
using Umbraco.Cms.Core.PropertyEditors;
namespace MyProject.Web.UI.PropertyEditors;
public class RadioButtonListWithDefaultConfiguration
{
[ConfigurationField("items", "Configure", "multivalues", Description = "Add, remove or sort values for the list.")]
public List<ValueListConfiguration.ValueListItem> Items { get; set; }
[ConfigurationField("default", "Default Value", "~/App_Plugins/MyProject/backoffice/DataEditors/RadioButtonListWithDefault/DefaultValueOptions.html", Description = "Select the default value from the list")]
public string Default { get; set; }
}
using Umbraco.Cms.Core.IO;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.Services;
namespace MyProject.Web.UI.PropertyEditors;
public class RadioButtonListWithDefaultConfigurationEditor : ConfigurationEditor<RadioButtonListWithDefaultConfiguration>
{
public RadioButtonListWithDefaultConfigurationEditor(IIOHelper ioHelper,
IEditorConfigurationParser editorConfigurationParser) : base(ioHelper, editorConfigurationParser) { }
}
using Umbraco.Cms.Core;
using Umbraco.Cms.Core.IO;
using Umbraco.Cms.Core.Models;
using Umbraco.Cms.Core.PropertyEditors;
using Umbraco.Cms.Core.Services;
namespace MyProject.Web.UI.PropertyEditors;
[DataEditor(
alias: "MyProject.RadioButtonListWithDefault",
type: EditorType.PropertyValue,
name: "RadioButtonList with default selection",
view: "~/App_Plugins/MyProject/PropertyEditors/RadioButtonListWithDefault/RadioButtonListWithDefault.html",
Group = Constants.PropertyEditors.Groups.Lists,
ValueType = ValueTypes.Text)]
public class RadioButtonListWithDefaultPropertyEditor : DataEditor
{
private readonly IIOHelper _ioHelper;
private readonly IEditorConfigurationParser _editorConfigurationParser;
public RadioButtonListWithDefaultPropertyEditor(IDataValueEditorFactory dataValueEditorFactory,
IIOHelper ioHelper,
IEditorConfigurationParser editorConfigurationParser) : base(dataValueEditorFactory)
{
_ioHelper = ioHelper;
_editorConfigurationParser = editorConfigurationParser;
}
protected override IConfigurationEditor CreateConfigurationEditor() =>
new RadioButtonListWithDefaultConfigurationEditor(_ioHelper, _editorConfigurationParser);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment