Copied to clipboard

Flag this post as spam?

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

  • Jamie Howarth 306 posts 773 karma points c-trib
    Feb 04, 2019 @ 14:49
    Jamie Howarth

    Custom field type & prevalues

    Hi folks,

    I'm using Forms 7.0.5 on an Umbraco 7.13.1 installation. I've managed to set up a custom field type, no problem. Now I'd like to set up a custom view for a [Setting] (which can be done by specifying the "view" value in the attribute).

    The view is rendering, but events aren't binding. Here's my code:

    .directive('ccFormsInlineKeyedPrevalueEditor', function (notificationsService) {
        return {
            restrict: 'E',
            replace: true,
            templateUrl: '/App_Plugins/cc/views/umb-forms-inline-prevalue-keyed-editor.html',
            require: "ngModel",
            link: function (scope, element, attr, ctrl) {
                scope.prevalues = [];
                ctrl.$render = function () {
                    if ($viewValue) === '[object Array]') {
                        scope.prevalues = ctrl.$viewValue;
                function updateModel() {
                function addKeyedPrevalueData() {
                    //Check that our array does not already contain the same item
                    if (scope.prevalues.indexOf(scope.newPrevalueKey) < 0) {
                        scope.prevalues.push({ "key" : scope.newPrevalueKey, "value" : scope.newPrevalueValue });
                        scope.newPrevalueKey = '';
                        scope.newPrevalueValue = '';
                    } else {
                        //Notify user they are trying to add a prevalue that already exists
                        notificationsService.error("PreValue Error", "Unable to add PreValue as this is a duplicate");
                scope.addPrevalue = function () {
                    alert("Saving prevalue");

    With markup:

    <form ng-submit="addPrevalue()" class="umb-form-prevalue">
        <i class="icon icon-add blue"></i>
        <input type="text" placeholder="Add Key" class="inline-editor prevalue" prevent-default ng-model="newPrevalueKey" />
        <input type="text" placeholder="Add Value" class="inline-editor prevalue" prevent-default ng-model="newPrevalueValue" />
        <small ng-show="newPrevalueKey && newPrevalueValue">Press enter to add a value</small>

    (This is included as a directive like so:)

    <div ng-if="field.prevalueSourceId == null && field.removePrevalueEditor !== true || field.prevalueSourceId == '00000000-0000-0000-0000-000000000000' && field.removePrevalueEditor !== true">
        <cc-forms-inline-keyed-prevalue-editor ng-model="field.preValues" />

    And finally, the C# attribute code:

    [Setting("Field Titles", alias ="field_titles", view="~/App_Plugins/cc/views/multivalueswithkeys.html")]
    public Dictionary<string, object> FieldTitles { get; set; }

    So I'd expect the directive to bind to the scope (it binds and markup shows up, but the scope.addPrevalue is never called).

    Any pointers would be most appreciated.



Please Sign in or register to post replies

Write your reply to: