How can I new up and append the "epi-cms/widget/CategoryTree" to

How can I new up and append the "epi-cms/widget/CategoryTree" to my template in dojo?

Andreas Johansson

Vote:

I have created a dojo widget that inherits from epi-cms/widget/HierarchicalList. It looks like this -> (a lot of code omitted).

define([
    "epi-cms/widget/CategoryTree",
    "epi-cms/widget/HierarchicalList"
], function (
    
    CategoryTree,
    ContentReferenceListEditor) {

    return declare("myclassname",
        [ContentReferenceListEditor], {

});
});

Now I get the HierarchicalList's view and functionality that I can overrride as expected. Where I fail is that I want to extend the HierarchicalList by adding the CategoryTree view with its functionality into HierarchicalList's html. When I look into HierarchicalList's html code I see that it does like this

which I think means it knows how to new up the ContentList module and expose its functionality.

Now I know how to add my own HTML to the view I have but I don't know how to add this CategoryTree data-dojo-type for instance and then new it up so I have a reference and it's functionality->

var node = _this.searchBoxNode;
                domConstruct.place('',
                    _this.searchBoxNode, 'before');

All help is highly appreciated!

#145383

Mar 02, 2016 18:11

Andreas Johansson

Vote:

EDIT: I'm trying with this code

postCreate: function () {
                this.inherited(arguments);
                var _this = this;

                var node = _this.searchBoxNode;
                var domElem = domConstruct.place('<div id="cTreeId" data-attach-point="cTree" data-dojo-type="epi-cms/widget/CategorySelector"></div>',
                    _this.searchBoxNode, 'before');

                parser.instantiate([_this.cTree], { 'data-dojo-type': this "epi-cms/widget/CategorySelector" });
// or 
                parser.parse('cTreeId');

            },

So if I use parser.instantiate() I get a silent error, the module isn't even rendered. If I use parser.parse('cTreeId') I get dojo/parser::parse() error TypeError: Cannot read property 'firstChild' of null

EDIT 2: I realize it's the "CategorySelector" I want to have, not CategoryTree

EDIT 3: So I think I've either come further or am heading the wrong way. This is my code now

postCreate: function () {
                
                this.inherited(arguments);
                var _this = this;
                var categerySelector = new CategorySelector();
                var node = _this.searchBoxNode;
                var domElem = domConstruct.place(categerySelector.domNode,
                    _this.searchBoxNode, 'before');

                parser.instantiate([categerySelector.domNode], { 'data-dojo-type': "epi-cms/widget/CategorySelector" });

            },

Now I get the category element displayed but when pressing the "+"/"Add category"-button I get this error message -> Uncaught Error: dijit._WidgetsInTemplateMixin template:rootCategory. So I'm stuck again.

EDIT 4: So the error occurs in CategorySelector.js in the _createDialog function. It's the this.root in the below code snippet that is undefined

_createDialog: function () {
            // summary:
            //		Create page tree dialog
            // tags:
            //    protected

            this.categorySelectorDialog = new CategorySelectorDialog({
                rootCategory: this.root
            });

            this.dialog = new Dialog({
                title: this.localization.popuptitle,
                content: this.categorySelectorDialog,
                dialogClass: "epi-dialog-portrait"
            });

            this.connect(this.dialog, 'onExecute', '_onExecute');
            this.connect(this.dialog, 'onShow', '_onShow');
            this.connect(this.dialog, 'onHide', '_onDialogHide');

            this.dialog.startup();
        },

#145395

Edited, Mar 03, 2016 8:30

Andreas Johansson

Vote:

So with the help from a colleague this is the solution

postCreate: function () {
                
                this.inherited(arguments);
                var _this = this;
                var categerySelector = new CategorySelector({});
                categerySelector.root = 1;
                
                var referenceNode = _this.searchBoxNode;
                var domElem = domConstruct.place(categerySelector.domNode,
                    referenceNode, 'before');
            },

After setting .root = 1 (which is what CategoryRepository.GetRoot() returns), it all works and we have a working CategorySelector in our module.

#145405

Mar 03, 2016 10:28