AEM 65 - Support Required validation in Bulk Metadata Editor for Multiple Selections

Goal

AEM bulk metadata editor supports required validation for single asset selection; when multiple assets are selected, required validation of fields is ignored. Following solution provides this missing feature...

Demo | Package Install | Github


Product

Extension

Solution

1) Login to CRXDE Lite (http://localhost:4502/crx/de), create folder /apps/eaem-bulk-edit-show-required-warning

2) Create node /apps/eaem-bulk-edit-show-required-warning/clientlib of type cq:ClientLibraryFolder, add String property categories with value dam.gui.coral.metadataeditor, String[] property dependencies with value lodash

3) Create file (nt:file) /apps/eaem-bulk-edit-show-required-warning/clientlib/js.txt, add

                        required-warning.js

4) Create file (nt:file) /apps/eaem-bulk-edit-show-required-warning/clientlib/required-warning.js, add the following code

(function ($, $document) {
    var FOUNDATION_CONTENT_LOADED = "foundation-contentloaded",
        META_EDITOR_FORM_SEL = "#aem-assets-metadataeditor-formid",
        SOFT_SUBMIT_SEL = "#soft-submit-popover",
        FOUNDATION_SELECTIONS_CHANGE = "foundation-selections-change",
        DAM_ADMIN_CHILD_PAGES_SEL = ".cq-damadmin-admin-childpages",
        INVALIDS_KEY = "foundationValidationBind.internal.invalids";

    $.fn.metadataUpdateErrorUI = $.fn.updateErrorUI;

    $.fn.updateErrorUI = function() {
        $.fn.superUpdateErrorUI.call(this);
        $.fn.metadataUpdateErrorUI.call(this);
    };

    function validateRequiredFields() {
        var $fields = $('.data-fields.active [aria-required="true"]'), $ele;

        $fields.each(function(index, field){
            Coral.commons.ready(field, function(elem) {
                $ele = $(elem);

                $ele.checkValidity();
                $ele.updateErrorUI();
            });
        });
    }

    function showAlert(message, title, callback){
        var fui = $(window).adaptTo("foundation-ui"),
            options = [{
                id: "ok",
                text: "OK",
                primary: true
            }];

        message = message || "Unknown Error";
        title = title || "Error";

        fui.prompt(title, message, "error", options, callback);
    }

    $document.on(FOUNDATION_CONTENT_LOADED, function() {
        validateRequiredFields();
    });

    $document.on(FOUNDATION_SELECTIONS_CHANGE, DAM_ADMIN_CHILD_PAGES_SEL , function(e) {
        validateRequiredFields();
    });

    $document.on("coral-overlay:open", SOFT_SUBMIT_SEL , function() {
        var invalids = $(META_EDITOR_FORM_SEL).data(INVALIDS_KEY);

        if (!invalids || (invalids.length === 0)) {
            $(SOFT_SUBMIT_SEL).show();
        }else{
            $(SOFT_SUBMIT_SEL).hide();
            showAlert("One or more required field(s) is/are empty.", "Error");
        }
    });
})(jQuery, jQuery(document));