Copied to clipboard

Flag this post as spam?

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


  • Ayo Adesina 424 posts 1006 karma points
    Apr 03, 2020 @ 12:36
    Ayo Adesina
    0

    Nested Content Values as dropdown list on another document type - Possible?

    If I have a node in my content tree that has a Nested Content property that is a list of strings.

    That is published in the tree...

    I want another doctype to have a property that is a dropdown list that has a the list of strings from that node with the Nested Content property.

    Is this possible to do? (umbraco 8)

  • Tim Miller 32 posts 252 karma points
    Apr 03, 2020 @ 19:05
    Tim Miller
    0

    This can be done with a pretty simple custom property editor. If you are unfamiliar with how to create them, check this out: https://our.umbraco.com/documentation/Tutorials/Creating-a-Property-Editor/

    Here's a simple example doing what you are looking for. You'll need to update aliases etc. but this should get you close.

    For this I added a NestedContentDD folder to App_Plugins. That folder contains 3 files:

    • package.manifest
    • NestedContentDD.html
    • NestedContent.controller.js

    Here are the contents of each file.

    package.manifest

    {
    "propertyEditors": [
        {
            alias: "NestedContentDD",
            name: "Nested Content Dropdown",
            editor: {
                view: "~/App_Plugins/NestedContentDD/NestedContentDD.html"
            }
        }
    ],
    "javascript": [
        "~/App_Plugins/NestedContentDD/NestedContentDD.controller.js"
    ]
    

    }

    NestedContentDD.html

    <div ng-controller="Custom.Namespace.NestedContentDDController">
    <div ng-if="message !== ''" ng-bind-html="message"></div>
    <select name="ncVals" ng-if="ncOptions.length !== 0"
                        ng-model="model.value"
                        ng-options="opt.item for opt in ncOptions track by opt.item">
    </select>
    

    NestedContentDD.controller.js

    function NestedContentDDController($scope, contentResource, contentEditingHelper) {
    $scope.ncOptions = [];
    $scope.message = "";
    
    // If you don't know the id of the node with the Nested Content you are pulling 
    // your values from you're going to have to get it from somewhere first.
    contentResource.getById(1170)
        .then(function(data){
            // This is only looking at the default variant. If you have more you'll need to handle that.
            var props = contentEditingHelper.getAllProps(data.variants[0]),
                ncItems = props.find(function(prop){ return prop.alias === 'nCStringVals'; });// Whatever the property alias is of the nested content property.
    
            if(ncItems){
                if(ncItems.value.length > 0){
                    $scope.ncOptions = ncItems.value;
                }else{
                    $scope.message = "<em>No options have been entered.</em>";
                }
            }else{
                $scope.message = "<em>Unable to find options property.</em>";
            }
        },
        function(data){
            // Error handler
            $scope.message = "<em>Unable to find referenced node.</em>";
        });} angular.module('umbraco').controller("Custom.Namespace.NestedContentDDController", NestedContentDDController);
    

    The editor doesn't love having a controller pasted in, so the end of the file is ugly, but it looks like it took it all.

    Once those files have been added you'll need to create a new data type that uses the new property editor. The property editor will be named "Nested Content Dropdown" in the list (see package.manifest). Then just add a property to your content type using the new data type where you want your dropdown (tongue twister!).

Please Sign in or register to post replies

Write your reply to:

Draft