macro custom content picker with start node

Owain Jones 55 posts 384 karma points MVP 3x c-trib

Dec 10, 2019 @ 17:17

Using Umbraco And Getting Started

Umbraco 8

Hello,

I'm trying to add a custom content picker (with a start node) to a macro's parameter editor on Umbraco 8.

I can successfully do this on Umbraco 7 by generating a package manifest, from a custom DataType, with this plugin: Parameter Editor Generator

Which generates this file:

{
  "propertyEditors": [
    {
      "alias": "Peg.ReusableContentPickerRichTextContent.2a4bda56-fbbe-4853-b18f-218133d69196",
      "name": "Reusable Content Picker - Rich Text Content",
      "editor": {
        "view": "~/umbraco/views/propertyeditors/contentpicker/contentpicker.html",
        "hideLabel": false,
        "valueType": "STRING"
      },
      "defaultConfig": {
        "showOpenButton": "0",
        "ignoreUserStartNodes": "0",
        "startNodeId": "umb://document/221f086fda99486482c64255670989e9"
      },
      "isParameterEditor": true,
      "group": "Generated Parameter Editors",
      "icon": "icon-autofill"
    }
  ]
}

And that works brilliantly on Umbraco 7, but if I use that same package manifest on my Umbraco 8 project (with the GUIDs changed accordingly) it almost works, the only part that doesn't is the start node...

During my digging, I did notice that the DataType config structures are different in Umbraco 8 compared to 7.

This is how my custom content picker data type's config looks in Umbraco 8:

<?xml version="1.0" encoding="utf-8"?>
<DataType Key="cb0bff3c-9244-4b58-a488-19dfd6c150df" Alias="Reusable Content Picker - Rich Text Content" Level="1">
  <Info>
    <Name>Reusable Content Picker - Rich Text Content</Name>
    <EditorAlias>Umbraco.ContentPicker</EditorAlias>
    <DatabaseType>Nvarchar</DatabaseType>
  </Info>
  <Config><![CDATA[{
  "ShowOpenButton": false,
  "StartNodeId": "umb://document/e4c58b7fa7b84207bee2f2ae7f313f25",
  "IgnoreUserStartNodes": false
}]]></Config>
</DataType>

and Umbraco 7:

<?xml version="1.0" encoding="utf-8"?>
<DataType Name="Reusable Content Picker - Rich Text Content" Key="2a4bda56-fbbe-4853-b18f-218133d69196" Id="Umbraco.ContentPicker2" DatabaseType="Nvarchar">
  <PreValues>
    <PreValue SortOrder="1" Alias="showOpenButton"><![CDATA[0]]></PreValue>
    <PreValue SortOrder="2" Alias="ignoreUserStartNodes"><![CDATA[0]]></PreValue>
    <PreValue SortOrder="3" Alias="startNodeId"><![CDATA[umb://document/221f086fda99486482c64255670989e9]]></PreValue>
  </PreValues>
</DataType>

This gif shows it working in Umbraco 7:

enter image description here

And it not working in Umbraco 8:

enter image description here

Has anyone else tried this before? And does anyone know how to properly format the Property Editor package manifest for Umbraco 8?

Copy Link

Javed 7 posts 88 karma points

Dec 11, 2019 @ 01:10

Hi,

I am also facing the same issue with Umbraco 8.3. Does anyone knows how to fix package manifest file for version 8.3?

Thanks.

Copy Link

Javed 7 posts 88 karma points

Dec 11, 2019 @ 04:05

After spending 2 hours on Umbraco (8.3) source code, I finally managed to create custom Macro Parameter Editor based on Content Picker and restrict selection to specific node's children.

Here is the C# code, if anyone interested:

using Umbraco.Core.Logging;
using Umbraco.Core.PropertyEditors;
using System.Configuration;

namespace Umbraco.Web.PropertyEditors
{
    /// <summary>
    /// Content property editor that stores UDI
    /// </summary>
    [DataEditor(
        "Umbraco.ContentPickerEx",
        EditorType.MacroParameter,
        "Content Picker Ex",
        "contentpicker")]
    public class ContentPickerExParameterEditor: DataEditor
    {
        public ContentPickerExParameterEditor(ILogger logger)
            : base(logger)
        {
            var startNodeId = ConfigurationManager.AppSettings["MacroParamEditors.InfoCardStartNodeId"];
            DefaultConfiguration.Add("startNodeId", startNodeId);
        }
    }
}

Hope it helps.

Thanks.

Copy Link

Owain Jones 55 posts 384 karma points MVP 3x c-trib

Dec 11, 2019 @ 10:10

Hi Javed,

Glad you've found a solution! :D

Where did you put that C# code in your solution? And did you need to do anything different with the package manifest file?

Cheers

Copy Link

Javed 7 posts 88 karma points

Dec 11, 2019 @ 17:26

Hi Owain,

Glad you fixed manifest file.

Just for records, I added C# file in VS.NET project with code I pasted above and added app settings in web.config. Build, deploy and I can see my new Macro parameter editor.

Thanks.

Copy Link

Owain Jones 55 posts 384 karma points MVP 3x c-trib

Dec 11, 2019 @ 11:29

I've fixed it!

I added a "prevalues" to my manifest that defined the start node and it started working! (also I changed the defaultConfig options to use bools instead of 1s & 0s).

EDIT: I also changed the StartNodeId to an ID instead of a UDI.

    {
      "propertyEditors": [
        {
          "alias": "ReusableContent-ContentPicker.cb0bff3c-9244-4b58-a488-19dfd6c150df",
          "name": "Reusable Content - Content Picker",
          "editor": {
            "view": "~/umbraco/views/propertyeditors/contentpicker/contentpicker.html",
            "hideLabel": false,
            "valueType": "STRING"
      },
      "prevalues": {
        "fields": [
          {
            "label": "Start node",
            "description": "Choose the start node",
            "key": "startNodeId",
            "view": "contentpicker"
          }
        ]
      },
      "defaultConfig": {
        "showOpenButton": false,
        "startNodeId": "1238",
        "ignoreUserStartNodes": false
      },
      "isParameterEditor": true,
      "group": "Generated Parameter Editors",
      "icon": "icon-autofill"
    }
  ]
}

I also added a .js and a .html file to my plugin and copied the Content Picker js controller and html view from the umbraco source code and then changed the manifest to reference them instead, as suggested here link!

{
  "propertyEditors": [
    {
      "alias": "ReusableContent-ContentPicker.cb0bff3c-9244-4b58-a488-19dfd6c150df",
      "name": "Reusable Content - Content Picker",
      "editor": {
        "view": "/App_Plugins/ReusableContent-ContentPicker/ReusableContent-ContentPicker.html",
        "hideLabel": false,
        "valueType": "STRING"
      },
      "prevalues": {
        "fields": [
          {
            "label": "Start node",
            "description": "Choose the start node",
            "key": "startNodeId",
            "view": "contentpicker"
          }
        ]
      },
      "defaultConfig": {
        "showOpenButton": false,
        "startNodeId": "1238",
        "ignoreUserStartNodes": false
      },
      "isParameterEditor": true,
      "group": "Generated Parameter Editors",
      "icon": "icon-autofill"
    }
  ],

  "javascript": [
    "/App_Plugins/ReusableContent-ContentPicker/ReusableContent-ContentPicker.controller.js"
  ]
}

As you can see with this gif, it now works as expected :D (Umbraco 8.3)

Gif of it now working

These links helped me with this: https://our.umbraco.com/documentation/Tutorials/Creating-a-Property-Editor/part-2

https://our.umbraco.com/forum/developers/extending-umbraco/63642-How-to-use-MultiNodeTreePicker-as-a-Macro-parameter-editor

Copy Link

is working on a reply...

Flag this post as spam?

Macro custom Content Picker with Start Node