Skip to content

UI Multi select customise order drag drop

I have a custom Pagebuilder component with a category selector that manages a front end carousel component, what I want to do is to set the order of the selection, this is currently tied to the category ID which in turn will set the order on the front end.

I have looked at the datascope, currently ‘category_ids’ but cannot see where to add a custom filter or how I can enable drag and drop reordering to control the front end output.

I have gone through the Adobe docs and cannot see any option to add or enable this.

Just pointers would be really helpful here.

thanks

<field name="category_ids" component="Magento_Catalog/js/components/new-category" sortOrder="18" formElement="select">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="filterOptions" xsi:type="boolean">true</item>
                <item name="multiple" xsi:type="boolean">true</item>
                <item name="showCheckbox" xsi:type="boolean">true</item>
                <item name="disableLabel" xsi:type="boolean">true</item>
                <item name="levelsVisibility" xsi:type="number">1</item>
            </item>
        </argument>
        <settings>
            <elementTmpl>ui/grid/filters/elements/ui-select</elementTmpl>
            <label translate="true">Categories</label>
            <notice translate="true">Please specify categories you want to display on the frontend.</notice>
            <dataScope>category_ids</dataScope>
            <componentType>field</componentType>
            <visible>true</visible>
            <listens>
                <link name="${ $.namespace }.${ $.namespace }:responseData">setParsed</link>
            </listens>
            <validation>
                <rule name="required-entry" xsi:type="boolean">true</rule>
                <rule name="validate-category-thumbnail-image" xsi:type="boolean">true</rule>
            </validation>
            <additionalClasses>
                <class name="admin__field-action-multiselect-category-ids">false</class>
            </additionalClasses>
        </settings>
        <formElements>
            <select>
                <settings>
                    <options class="MagentoCatalogUiComponentProductFormCategoriesOptions"/>
                </settings>
            </select>
        </formElements>
    </field>

enter image description here