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 445 posts 1059 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!).

  • This forum is in read-only mode while we transition to the new forum.

    You can continue this topic on the new forum by tapping the "Continue discussion" link below.

Please Sign in or register to post replies