Sign in Register
Copied to clipboard

Flag this post as spam?

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


  • Joao Pinto 3 posts 73 karma points
    Nov 29, 2019 @ 09:27
    Joao Pinto
    0

    V8 - Custom property editor - how to reuse umbraco umb-editor?

    Hello,

    I'm trying to update a custom property editor originally developed for Umbraco 7, to make it compatible with Umbraco 8.

    The property editor includes some fields and a content picker. For the content picker I used the original umb-editor contentPicker, but the same code is not working on Umbraco 8, it throws a 404 error.

    I tried to look at Umbraco 8 source and googled all around, but couldn't find a way to make it work, so here comes the question: What's the way to include umbraco editors inside a custom property editor? Specifically the content picker.

    Thank you.

    Code used on V7 implementation: html:

    <div ng-controller="Positioner.LinkButtonController">
  <div class="linkbutton-row">
    <label>internal link: </label>
    <div>
        <umb-editor model="contentPicker"></umb-editor>
    </div>
</div>

    controller.js:

    angular.module("umbraco")
.controller("Positioner.LinkButtonController", function ($scope, $http, $location, editorState) {
    $scope.contentPicker = {
        view: 'contentPicker',
        config: {
            minNumber: 0,
            maxNumber: 1
        },
        value: $scope.model.value.InternalLink
    };
});
    Copy Link
  • Joao Pinto 3 posts 73 karma points
    Dec 04, 2019 @ 10:35
    Joao Pinto
    0

    Question still open...

    Copy Link
  • Tito 314 posts 623 karma points
    Jun 09, 2020 @ 11:22
    Tito
    0

    any updates?

    Copy Link
  • Wojciech Zasadni 5 posts 77 karma points
    Jun 09, 2020 @ 14:22
    Wojciech Zasadni
    1

    I believe that you need to use <umb-property-editor>.

    HTML:

    <div ng-controller="Positioner.LinkButtonController">
    <div class="linkbutton-row">
        <label>internal link: </label>
        <div>
            <umb-property-editor model="contentPicker"></umb-property-editor>
        </div>
    </div>
</div>

    JS:

    angular.module("umbraco")
    .controller("Positioner.LinkButtonController", function ($scope) {
        $scope.contentPicker = {
            view: 'contentPicker',
            config: {
                minNumber: 0,
                maxNumber: 1
            },
            value: $scope.model.value.InternalLink
        };
    });

    Result: enter image description here

    Cheers,

    Copy Link
  • Tito 314 posts 623 karma points
    Jun 09, 2020 @ 16:12
    Tito
    0

    Thank you! now it works. Do you know where can i find documentation about this? I cant find it on the official documentation...

    Copy Link
  • Wojciech Zasadni 5 posts 77 karma points
    Jun 09, 2020 @ 18:58
    Wojciech Zasadni
    0

    I'm not sure if there is any documentation about it. I had to dig-it-up from sources. ;)

    Copy Link
  • Patrick van Kemenade 101 posts 339 karma points
    Jan 06, 2021 @ 16:36
    Patrick van Kemenade
    0

    I've implemented this. I'm able to pick a content item.

    However after I save it's empty again.

    Can anybody who implemented this succesfully explain what else needs to be done. How to retain the picked content and also how to display it in the .cshtml ?

    I'm using Umbraco 8.9.1 so maybe this is something which isn't possible anymore ???

    Copy Link
  • Peter Kindberg 17 posts 107 karma points
    Apr 20, 2021 @ 10:45
    Peter Kindberg
    0

    Necromany-answer here.

    First off, I'm really not great with Angular, so this solution may be a bit suboptimal - but for my specific needs, it works perfectly. Solution works in Umbraco 8.11.1

    (function () {
'use strict';
angular.module("umbraco").controller("kindbergco.localizationCopyValues.controller", function ($scope, editorState, eventsService) {
    function initConfig() {
        $scope.contentPicker = {
            view: 'contentPicker',
            config: {
                minNumber: 0,
                maxNumber: 1
            },
            value: $scope.model.value
        };
        $scope.contentPicker.value = 0;
    };
    initConfig();

    $scope.saveContent = function () {
        $scope.model.value = $scope.contentPicker.value;
        eventsService.emit("rte.shortcut.save");
    };
})

    })();

    View:

    <div ng-controller="kindbergco.localizationCopyValues.controller">
<div>
    <div>
        <umb-property-editor model="contentPicker" ng-model="contentPicker"></umb-property-editor>
    </div>
    <div ng-hide="!contentPicker.value">
        &nbsp;<br />
        Proceed with copying?<br /><br />
        <input type="button" ng-model="btn" ng-click="saveContent()" value="Copy now" />
    </div>
</div>

    Hope it helps someone :)

    Copy Link
Please Sign in or register to post replies

Write your reply to:

Draft