Level 6

Solved

/app/acs-commons-old throwing bug in multifield in dialog

3 replies
925 views
Translate

hi folks,

My Dialog Edit is failing after a recent upgrade.

Anybody got any idea if acs-commons-old should even be in use? It looks odd.

I checked the installed acs-aem-commons-ui apps and content versions and it says 4.11.0

thanks

Fiona

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.

DEBAL_DASAccepted solution

New Participant

Could you please share the .content.xml for your component's dialog editor, please let me know the AEM version with service pack.

DEBAL_DASAccepted solution

New Participant

Could you please share the .content.xml for your component's dialog editor, please let me know the AEM version with service pack.

Translate

fionas76543059Author

Level 6

hi !

Thanks so much for replying.

It is AEM 6.5.12 ( We only got service pack 12 a few days ago.)

The acs commons version is 4.11.0

I don't have acs-tools there.

The multifield component that is giving trouble is modified locally as follows

<%@ page import="com.adobe.granite.ui.components.Config" %>
<%@ page import="org.slf4j.Logger" %>
<%@ page import="org.slf4j.LoggerFactory" %>
<%@ page import="com.adobe.granite.ui.components.Value" %>
<%@ page import="org.apache.commons.lang3.StringUtils" %>
<%@include file="/libs/granite/ui/global.jsp" %>

<%--include ootb multifield--%>
<sling:include resourceType="/libs/granite/ui/components/coral/foundation/form/multifield"/>

<%!
    private final Logger mLog = LoggerFactory.getLogger(this.getClass());
%>

<%
    Config mCfg = cmp.getConfig();

    Resource mField = mCfg.getChild("field");

    if (mField == null) {
        mLog.warn("Field node doesn't exist");
        return;
    }

    ValueMap mVM = mField.adaptTo(ValueMap.class);

    String mName = mVM.get("name", "");

    if ("".equals(mName)) {
        mLog.warn("name property doesn't exist on field node");
        return;
    }

    Value mValue = ((ComponentHelper) cmp).getValue();

    //get the values added in multifield
    String[] mItems = mValue.get(mName, String[].class);
%>

<script>
    (function () {
        //function to add values into multifield widgets. The values are stored in CRX by collectDataFromFields() as json

        var addDataInFields = function () {
            var mValues = [ <%= StringUtils.join(mValue.get(mName, String[].class), ",") %> ],
                    mName = '<%=mName%>',
                    $fieldSets = $("[class='coral-Form-fieldset'][data-name='" + mName + "']");

            var record, $fields, $field, name;

            $fieldSets.each(function (i, fieldSet) {
                $fields = $(fieldSet).find("[name]");

                record = mValues[i];

                if (!record) {
                    return;
                }

                $fields.each(function (j, field) {
                    $field = $(field);

                    name = $field.attr("name");

                    if (!name) {
                        return;
                    }

                    //strip ./
                    if (name.indexOf("./") == 0) {
                        name = name.substring(2);
                    }

                    $field.val(record[name]);
                });
            });
        };

        //collect data from widgets in multifield and POST them to CRX as JSON
        var collectDataFromFields = function(){
            $(document).on("click", ".cq-dialog-submit", function () {
                var $form = $(this).closest("form.foundation-form"), mName = '<%=mName%>';

                if ($("input[name='./sling:resourceType'] ").val() == "ddpa/components/content/megamenu") {
                        var res = mName.substring(mName.indexOf("."), mName.lastIndexOf("/"))+"/title";

                        var valid = true;
                        var tab1Validiti = $('[name="./tab1/title"]').checkValidity();
                        var tab2Validiti = $('[name="./tab2/title"]').checkValidity();
                        var tab3Validiti = $('[name="./tab3/title"]').checkValidity();
                        var tab4Validiti = $('[name="./tab4/title"]').checkValidity();
                        var tab5Validiti = $('[name="./tab5/title"]').checkValidity();
                        var tab6Validiti = $('[name="./tab6/title"]').checkValidity();
                        var tab7Validiti = $('[name="./tab7/title"]').checkValidity();
                        var tab8Validiti = $('[name="./tab8/title"]').checkValidity();
                        var tab9Validiti = $('[name="./tab9/title"]').checkValidity();
                        var tab10Validiti = $('[name="./tab10/title"]').checkValidity();

                        if(tab1Validiti && tab2Validiti && tab3Validiti && tab4Validiti && tab5Validiti && tab6Validiti && tab7Validiti && tab8Validiti && tab9Validiti && tab10Validiti){
                            console.log("inside if, all titles validity is true ");
                        }
                        else{
                            valid=false;
                        }
                        if(valid){
                            //get all the input fields of multifield
                            var $fieldSets = $("[class='coral-Form-fieldset'][data-name='" + mName + "']");

                            var record, $fields, $field, name;

                            $fieldSets.each(function (i, fieldSet) {
                                $fields = $(fieldSet).find("[name]");

                                record = {};

                                $fields.each(function (j, field) {
                                    $field = $(field);

                                    name = $field.attr("name");

                                    if (!name) {
                                        return;
                                    }

                                    //strip ./
                                    if (name.indexOf("./") == 0) {
                                        name = name.substring(2);
                                    }

                                    record[name] = $field.val();

                                    //remove the field, so that individual values are not POSTed
                                    $field.remove();
                                });

                                if ($.isEmptyObject(record)) {
                                    return;
                                }

                                //add the record JSON in a hidden field as string
                                $('<input />').attr('type', 'hidden')
                                        .attr('name', mName)
                                        .attr('value', JSON.stringify(record))
                                        .appendTo($form);
                            });
                        }
                        else{
                            console.log("Not removing the input fields and not submitting the data as some field is required and not filled");
                        }
                }
                else{

               //get all the input fields of multifield
                    var $fieldSets = $("[class='coral-Form-fieldset'][data-name='" + mName + "']");

                    var record, $fields, $field, name;

                    $fieldSets.each(function (i, fieldSet) {
                        $fields = $(fieldSet).find("[name]");

                        record = {};

                        $fields.each(function (j, field) {
                            $field = $(field);

                            name = $field.attr("name");

                            if (!name) {
                                return;
                            }

                            //strip ./
                            if (name.indexOf("./") == 0) {
                                name = name.substring(2);
                            }

                            record[name] = $field.val();

                            //remove the field, so that individual values are not POSTed
                            $field.remove();
                        });

                        if ($.isEmptyObject(record)) {
                            return;
                        }

                        //add the record JSON in a hidden field as string
                        $('<input />').attr('type', 'hidden')
                        .attr('name', mName)
                        .attr('value', JSON.stringify(record))
                        .appendTo($form);
                    });
                }




            });
        };

        $(document).ready(function () {
            addDataInFields();
            collectDataFromFields();
        });
    })();
</script>

It is old code but works o.k. in the lower environments so I assume the problem is something in the prod environment like a wrong library. Should I ask our Adobe to reinstall the acs commons libraries perhaps?

The component's dialog editor .content.xml is below, it is very long so I just show the multiitem

which seems to be the bit giving trouble.

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:sling="http://sling.apache.org/jcr/sling/1.0" xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
    jcr:primaryType="nt:unstructured"
    jcr:title="Small Article Feature"
    sling:resourceType="cq/gui/components/authoring/dialog"
    extraClientlibs="smallarticlefeature.dialog"
    helpPath="en/cq/current/wcm/default_components.html#Text">
    <content
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/foundation/container">
        <layout
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
            margin="{Boolean}false"
            type="nav"/>
        <items jcr:primaryType="nt:unstructured">
            <column
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/container">
                <items jcr:primaryType="nt:unstructured">
                    <column0

:

<items jcr:primaryType="nt:unstructured">
    <links
        jcr:primaryType="nt:unstructured"
        sling:resourceType="/apps/ddpa/components/content/multifield"
        class="full-width"
        fieldLabel="Item">
        <field
            jcr:primaryType="nt:unstructured"
            sling:resourceType="granite/ui/components/foundation/form/fieldset"
            name="./authored">
            <layout
                jcr:primaryType="nt:unstructured"
                sling:resourceType="granite/ui/components/foundation/layouts/fixedcolumns"
                method="absolute"/>
            <items jcr:primaryType="nt:unstructured">
                <column
                    jcr:primaryType="nt:unstructured"
                    sling:resourceType="granite/ui/components/foundation/container">
                    <items jcr:primaryType="nt:unstructured">
                        <image
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/pathbrowser"
                            fieldLabel="Image"
                            name="./image"
                            rootPath="/content/dam"/>
                        <categoryName
                            jcr:primaryType="nt:unstructured"
                            sling:resourceType="granite/ui/components/foundation/form/textfield"
                            fieldLabel="Category Name"
                            name="./categoryName"/>
                        <title
                            jcr:primaryType="nt:unstructured"

Translate

fionas76543059Author

Level 6

hi !

I posted another clearer Question as I think that the multifield problem is just a symptom of the old and new libraries getting muddled up.

In the end, in my .content.xml files, I put lodash.underscore instead of underscore and that worked to fix my Dialog errors.

thanks

Fiona

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/prod-environment-is-alternating-use-of-apps-acs-commons-old-and/m-p/543338#M134949

Translate

Sign up

Login with SSO

Login to the community

Login with SSO