Don't miss out Virtual Happy Hour this Friday (April 26).

Try our conversational search powered by Generative AI!

Custom editor for categories

Vote:
 

Hi,
Im looking to implement a custom editor for the episerver CategoryList type.

There are examples out there (i.e http://krompaco.nu/2013/05/dropdownlist-category-picker-in-episerver-7/) but they all seem to use the Episerver Widgets SelectionEditor.js and others. 
I think I will need to create my own widget as it's gonna be kind of a "checked multiselect".

My question is what would be the preffered way of passing all the categories in the system to the widget client script and then looping them?

Thanks!

#87340
Jun 10, 2014 22:06
Vote:
 

Could you describe what you would like to do with your CategoryList editor?

If you're using the epi-cms/contentediting/editors/CheckBoxListEditor (or the new SelectMany attribute in 7.5), you'll only get a list of checkboxes without any visualization of the nested structure found in the categories.

#87341
Jun 10, 2014 22:51
Vote:
 

I created a quick mock up image to illustrate what I want to achieve.

One or many "Leaf categories" is choosable and when selected their parents will also be chosen (but the parents can't be chosen alone).

Mockup image

#87346
Edited, Jun 11, 2014 9:26
Vote:
 

Ah and I guess you want it directly in the forms mode instead of being an overlay as it is today?

The current Category Selector fetches the first level of the categories as a json:

{} && [{
    "id": 2,
    "name": "Meet",
    "description": "Alloy Meet",
    "hasChildren": true,
    "visible": true,
    "selectable": true,
    "parentsNameCollection": [null, "Alloy Meet"]
}, {
    "id": 3,
    "name": "Plan",
    "description": "Alloy Plan",
    "hasChildren": false,
    "visible": true,
    "selectable": true,
    "parentsNameCollection": [null, "Alloy Plan"]
}, {
    "id": 4,
    "name": "Track",
    "description": "Alloy Track",
    "hasChildren": true,
    "visible": true,
    "selectable": true,
    "parentsNameCollection": [null, "Alloy Track"]
}]

When opening the second level, the Category Selector retreives all the children for that level:

{} && [{
    "id": 5,
    "name": "MeetChild",
    "description": "Child to Alloy Meet",
    "hasChildren": false,
    "visible": true,
    "selectable": true,
    "parentsNameCollection": [null, "Alloy Meet", "Child to Alloy Meet"]
}]



I guess the ajax requests would be the reason it's a dialog.

So my impression is that it would be best that your custom editor is feeded with the entire category tree and lets the javascript sort everything out.

#87347
Edited, Jun 11, 2014 10:08
Vote:
 

Yes I would like to display it in the forms mode directly.

Im new to Widget creation. How would you feed the javascript with the category tree? Would you set up a service that the Widget requests with Ajax or can I pass the JSON from Epi in some other way?

#87351
Jun 11, 2014 10:33
Vote:
 

Dojo and how EPiServer works with dojo is not my strong suit. Linus Ekström has a blog post on dojo widgets that might help:

http://world.episerver.com/Blogs/Linus-Ekstrom/Dates/2012/7/Creating-a-custom-editor-for-a-property/

#87392
Jun 12, 2014 10:55
* You are NOT allowed to include any hyperlinks in the post because your account hasn't associated to your company. User profile should be updated.