Five New Optimizely Certifications are Here! Validate your expertise and advance your career with our latest certification exams. Click here to find out more

Ha Bui
Jun 10, 2021
  3054
(1 votes)

DnD support for PropertyList<T>

Hi all,

As you might know then PropertyList<T> is very powerfull. It is help us to easy to manage and organize a list of complex property data but the limitation as I am facing with is that it is not official support sorting via drag and drop (or atleast I don't know how to turn it on - although take hour to googling).

Drag and drop not working on product | Episerver Developer Commun

Then I digged a bit with javascript solution as below then its worked: (I am assumming that you already know about how to create your module via module.config, create your custom editor and map it to your property list property)

So here is our code: SortableCollectionEditor.js

define([
    // dojo
    "dojo/_base/array",
    "dojo/_base/declare",
    "dojo/_base/lang",
    "dojo/aspect",
    "dojo/dom-class",
    "dojo/dom-style",
    "dojo/topic",

    // EPi Framework
    "epi/shell/widget/_FocusableMixin",
    "epi/shell/dnd/Target",


    // epi cms
    "epi-cms/contentediting/editors/CollectionEditor",
    "epi-cms/contentediting/editors/_TextWithActionLinksMixin",

    // epi commerce
    "epi-ecf-ui/contentediting/editors/_GridWithDropContainerMixin"
],
    function (
        //dojo
        array,
        declare,
        lang,
        aspect,
        domClass,
        domStyle,
        topic,

        // EPi Framework
        _FocusableMixin,
        Target,

        // epi cms
        CollectionEditor,
        _TextWithActionLinksMixin,

        // epi commerce
        _GridWithDropContainerMixin,
    ) {
        return declare([CollectionEditor, _GridWithDropContainerMixin, _FocusableMixin], {
            // module:
            //      app/editors/sortablecollectioneditor
            // summary:
            //      Editor widget for support propertylist dnd 

            resources: { "drophere": "You can drop {content} here", "actions": { "content": "content" } },

            postMixInProperties: function () {
                // summary:
                //      Post mix in properties initialization.
                // description:
                //      Fullfills properties that needed to start up the widget.
                // tags:
                //      protected

                this.inherited(arguments);

                this.gridSettings.dndParams = lang.mixin(this.gridSettings.dndParams, {
                    _checkAcceptanceForItems: function (items, acceptedTypes) {
                        var types = array.map(items, function (item) {
                            return item.data.typeIdentifier;
                        });

                        var flag = false;
                        for (var j = 0; j < types.length; ++j) {
                            if (types[j] in acceptedTypes) {
                                flag = !!acceptedTypes[types[j]];
                                break;
                            }
                        }
                        return flag;
                    }
                });
            }
        });
    });

Hope that help!

Ha Bui

Jun 10, 2021

Comments

Scott Reed
Scott Reed Jun 10, 2021 08:23 AM

Is this just because the modal background is greyed out? I did a blog about something similar a while ago using CSS https://world.episerver.com/blogs/scott-reed/dates/2018/3/making-drag-and-drop-pagesmedia-work-with-the-ilist/

Ha Bui
Ha Bui Jun 10, 2021 08:29 AM

Hi Scott, actually the default one CollectionEditor (epi-cms/contentediting/editors/CollectionEditor) did not support this.

Scott Reed
Scott Reed Jun 10, 2021 08:32 AM

Hmmmn, strange I know when I posted the blog and removed the CSS overlay I could drag and drop blocks/media and such in the PropertyList at least at the time of writing

Ha Bui
Ha Bui Jun 10, 2021 08:35 AM

Ah, it is different, my workaround is for change item sort order inside the list (using DnD instead of move up/down, very anoying when you have a long list)

And by the way, I'm talking about generic one (CollectionEditor) but not CommerceMediaCollectionEditor.

Scott Reed
Scott Reed Jun 10, 2021 09:41 AM

Yes I'm just referring to a PropertyList not anything commerce. Okay I see, sort order, I thought you meant drag and drop as in from other panes. My bad :p

Tomasz Madeyski
Tomasz Madeyski May 23, 2022 09:08 AM

Do you have a version working in a setup without Commerce? (in my solution epi-ecf-ui/contentediting/editors/_GridWithDropContainerMixin is missing)

Please login to comment.
Latest blogs
Optimizely Configured Commerce and Spire CMS - Figuring out Handlers

I recently entered the world of Optimizely Configured Commerce and Spire CMS. Intriguing, interesting and challenging at the same time, especially...

Ritu Madan | Mar 12, 2025

Another console app for calling the Optimizely CMS REST API

Introducing a Spectre.Console.Cli app for exploring an Optimizely SaaS CMS instance and to source code control definitions.

Johan Kronberg | Mar 11, 2025 |

Extending UrlResolver to Generate Lowercase Links in Optimizely CMS 12

When working with Optimizely CMS 12, URL consistency is crucial for SEO and usability. By default, Optimizely does not enforce lowercase URLs, whic...

Santiago Morla | Mar 7, 2025 |

Optimizing Experiences with Optimizely: Custom Audience Criteria for Mobile Visitors

In today’s mobile-first world, delivering personalized experiences to visitors using mobile devices is crucial for maximizing engagement and...

Nenad Nicevski | Mar 5, 2025 |