Collapse nodes in ContentSelector widget

Emelie Karlsson

Vote:

I'm using a custom property attribute to modify the content selector dialog and filter out all irreleveant content types for the ContentReference property. I have accomplished this by setting the EditorConfiguration Roots property to only hold content nodes wich contains children of my requested types along with the AllowedTypes property. This combination works well to hide all irrelevant content.

extendedMetadata.EditorConfiguration["roots"] = GetDesiredParents();
extendedMetadata.EditorConfiguration["AllowedTypes"] = new Type[] { typeof(Type1), typeof(Type2) };

My problem is that when the dialog opens all root nodes are expanded by default so that the user has to manually close all nodes or scroll all the way down to the bottom to find content in the last nodes. Is there any way to make the nodes stay collapsed when the dialog opens? Or, do anyone have an idea of how to accomplish my desired behaviour some other way?

#199006

Nov 13, 2018 9:50

Mattias Olsson

Vote:

Hi!

Maybe there is a better way to do this but it worked for me:

define("alloy/widget/CollapsedContentSelector", [
// dojo
    "dojo/_base/array",
    "dojo/_base/declare",
    "dojo/_base/lang",

    "epi-cms/widget/ContentSelector"
],

function (
// dojo
    array,
    declare,
    lang,

    ContentSelector
) {

    return declare([ContentSelector], {
        _getDialog: function () {
            var dialog = this.inherited(arguments);

            // At this stage, the dialog has been created in base class. Override _expandRootNodes method.
            this.contentSelectorDialog.multiRootsMode = true;

            this.contentSelectorDialog.tree._expandRootNodes = function () {
                return Promise.resolve();
            };

            return dialog;
        }
    });
});

And in your editor descriptor or property attribute:

extendedMetadata.ClientEditingClass = "alloy/widget/CollapsedContentSelector";

For this example, ~/module.config looks like this:

<?xml version="1.0" encoding="utf-8"?>
<module>
  <dojoModules>
    <add name="alloy" path="Scripts" />
  </dojoModules>
</module>

#199106

Nov 15, 2018 13:35

Emelie Karlsson

Vote:

Yes, this solution makes all nodes stay collapsed as I wanted. An unexpected side effect though, was that one of my parent nodes is a block folder and that node suddenly lost its plus sign icon so it could not be expanded at all. When I added a subfolder the plus sign reappeared, but I can't expect all block folders to contain empty folders for this reason.

However, this fix made it possible for me to implement my original idea of adding all content of my Type1 and Type2 directly as root nodes, without episerver trying to expand them every time the dialog opens so it actually works really well for my purpose. Thank you!

#199144

Nov 16, 2018 13:59

Mattias Olsson

Vote:

Hi! So the block folder had children but no expand icon?

#199147

Nov 16, 2018 14:32

Emelie Karlsson

Vote:

It has child blocks yes. The expand icon only appears if I add a child folder.

#199151

Nov 16, 2018 14:37

Try our conversational search powered by Generative AI!

Collapse nodes in ContentSelector widget