SFCC Page Designer Multi-select

multiselect-server.js

'use strict';

module.exports.init = function (editor) {
  // Add in localization or server side processing here if you need it
};

multiselect.css

body {
    background-color: #fff;
}

/* 5 elements tall */
.slds-select[multiple] {
    min-height: calc(5 * 33px);
}

multiselect.js

(() => {
    subscribe('sfcc:ready', async ({ value, config, isDisabled, isRequired, dataLocale, displayLocale }) => {
        //   console.log('sfcc:ready', dataLocale, displayLocale, value, config);

        let selectedValues = typeof value === 'object' && value !== null && value.value instanceof Array ? value.value : [];
        const { options = {}, localization = {} } = config;
        let isValid = true;

        // Append basic DOM
        const template = obtainTemplate(options);
        const clone = document.importNode(template.content, true);
        document.body.appendChild(clone);

        // Set props
        const selectEl = document.querySelector('select');
        selectEl.required = isRequired;
        selectEl.disabled = isDisabled;

        // Set <options> from JSON config
        setOptions(selectEl, options.config || [], selectedValues);

        // Apply change listener
        selectEl.addEventListener('change', event => {
            const vals = Array.from(event.target.selectedOptions).map(option => option.value);

            emit({
                type: 'sfcc:value',
                payload: vals ? { value: vals } : null
            });
        });
    });

    function obtainTemplate(options) {
        const template = document.createElement('template');
        template.innerHTML = `
        <div class="slds-form-element">
            <div class="slds-form-element__control">
                <select class="slds-select" multiple>
                    <option value="">-- Select ---</option>
                 </select>
            </div>
        </div>
        `;

        return template;
    }

    function setOptions(selectEl, config, selectedValues) {
        config.forEach(option => {
            const optionEl = document.createElement('option');
            optionEl.text = option;
            optionEl.value = option;
            optionEl.selected = selectedValues.indexOf(option) > -1;
            selectEl.appendChild(optionEl);
        });
    }
})();

multiselect.json

{
    "name": "Mutli Select",
    "description": "Select multiple values to get an array of string values",
    "resources": {
        "scripts": [
            "/experience/editors/com/sfcc/multiselect.js"
        ],
        "styles": [
            "https://cdnjs.cloudflare.com/ajax/libs/design-system/2.8.3/styles/salesforce-lightning-design-system.min.css",
            "/experience/editors/com/sfcc/multiselect.css"
        ]
    }
}

sample-component.json

{
    "name": "Sample Video Player",
    "description": "Sample Video Player",
    "group": "assets",
    "attribute_definition_groups": [
        {
            "id": "media",
            "name": "Main Media",
            "description": "Video data",
            "attribute_definitions": [
                {
                    "id": "video_url_options_1",
                    "name": "Video Options",
                    "description": "Hold Ctrl/Cmd + click to select multiple options",
                    "type": "custom",
                    "editor_definition": {
                        "type": "com.sfcc.multiselect",
                        "configuration": {
                            "options": {
                                "config": [
                                    "autoplay",
                                    "controls",
                                    "loop",
                                    "muted"
                                ]
                            }
                        }
                    },
                    "required": false
                }
            ]
        },
    ],
    "region_definitions": []
}