Expand my Community achievements bar.

SOLVED

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

Avatar

Level 7

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

 

 

acs_old1.png

 

 

 

 

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

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

View solution in original post

3 Replies

Avatar

Correct answer by
Employee Advisor

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

Avatar

Level 7

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"

 

 

Avatar

Level 7

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-altern...