Allow Content to be Picked by Content Key (a GUID)

[Nicholas-Westby]

Currently, pickers.content allows content nodes to be picked by the content ID (an integer). However, sometimes it is necessary to pick content nodes by the content key (a GUID). An example would be for the contentKey field on the umbracoRedirectUrl table.

I have implemented this by copying pickers.content to create pickers.content.guid (modifying it appropriately), and it seems to work just fine. If you like, I can create a pull request for that.

However, I'm curious if UI-O-Matic field views can have additional settings. If so, maybe we can just modify pickers.content to have a setting that indicates the picker mode (i.e., by content ID or by content key).

[TimGeyssens]

Hi Nicholas, yup you can pass config in json to additional settings so would be a good idea to move it there, I'll see if I can find an example

[TimGeyssens]

Hey pull request would still be appreciated

[Nicholas-Westby]

Man, I really had to dig to find the code I was working on (checks watch) 3 years and 4 months ago. No time for a pull request at the moment. However, here's the code in case you (or somebody else) want to integrate it (would probably be better to do via a setting, but this code didn't use that approach):

You'll need to ensure the JavaScript gets included in the back office, which I'm doing with a package.manifest:

{
    "javascript": [
        "~/App_Plugins/Rhythm.UIOMatic/editors/pickers.content.guid.controller.js"
    ]
}

Here's the JavaScript (pickers.content.guid.controller.js):

angular.module("umbraco").controller("UIOMatic.FieldEditors.Pickers.ContentGuidController",
    function ($scope, $routeParams, $http, dialogService, entityResource, iconHelper) {

        function init() {
            if (!$scope.setting) {
                $scope.setting = {};
            }

            var val = $scope.property.value;

            if (val && val.length === 36 && val !== "00000000-0000-0000-0000-000000000000") {
                $scope.showQuery = false;

                entityResource.getById(val, "Document").then(function (item) {
                    item.icon = iconHelper.convertFromLegacyIcon(item.icon);
                    $scope.node = item;
                });
            }

            $scope.openContentPicker = function () {
                dialogService.treePicker({
                    section: "content",
                    treeAlias: "content",
                    multiPicker: false,
                    callback: populate
                });
            };

            $scope.clear = function () {
                $scope.node = undefined;
                $scope.property.value = undefined;
            };

            function populate(item) {
                $scope.clear();
                item.icon = iconHelper.convertFromLegacyIcon(item.icon);
                $scope.node = item;
                $scope.property.value = item.key;
            }
        }

        if ($scope.valuesLoaded) {
            init();
        } else {
            var unsubscribe = $scope.$on('valuesLoaded', function () {
                init();
                unsubscribe();
            });
        }
    });

And here's the HTML (pickers.content.guid.html):

<div ng-controller="UIOMatic.FieldEditors.Pickers.ContentGuidController">

    <ul class="unstyled list-icons" ng-if="node">
        <li>
            <i class="icon icon-delete red hover-show pull-right" ng-click="clear()"></i>
            <i class="icon {{node.icon}} hover-hide"></i>

            <a href prevent-default ng-click="openContentPicker()">{{node.name}}</a>
        </li>
    </ul>

    <a ng-if="!node" href ng-click="openContentPicker()" prevent-default>
        <localize key="general_choose">Choose a node</localize>...
    </a>

</div>

Here is the relevant bit of the C# code that points to the HTML file (this would not be part of the pull request, but it demonstrates how to use the GUID property):

[UIOMatic("redirects", "Redirects", "Redirect", FolderIcon = "icon-resize",
	ItemIcon = "icon-navigation-horizontal",
	RenderType = UIOMaticRenderType.List)]
[TableName("umbracoRedirectUrl")]
public class UmbracoRedirect
{

	/// <summary>
	/// The GUID of the Umbraco content node to redirect to.
	/// </summary>
	[UIOMaticField(View = "~/App_Plugins/Rhythm.UIOMatic/editors/pickers.content.guid.html",
		Name = "Destination Page", Description = "Pick the page to redirect to.")]
	[Column("contentKey")]
	[NullSetting(NullSetting = NullSettings.NotNull)]
	public Guid ContentKey { get; set; }

}

[TimGeyssens]

Sweet, thanks, yeah been a while, just housekeeping a bit and seems the package is used way more than I thought

[TimGeyssens]

in v5 you can just point it to existing property editors... (since storing model.value)so should also take care of this...