Expand my Community achievements bar.

Enhance your AEM Assets & Boost Your Development: [AEM Gems | June 19, 2024] Improving the Developer Experience with New APIs and Events
SOLVED

Multifield Limits in Touch UI

Avatar

Level 5

I'm trying to disable the add button when a user gets to 4 (example).

I can get access to the click event for remove, but not for the add.  Some other listener must be grabbing the event. 

Is there a good way to "disable" the add button on a multiField component?

I've tried this approach and could not get it to work ....

http://experience-aem.blogspot.com/2015/11/aem-61-sample-granite-widget-in-touch-ui-extending-multif...

Thank you,

-Dean

 

 

I've added the following code to multiField.jsp

<%@ 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/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
        //eg. {"page":"English","path":"/content/geometrixx/en"}
        var addDataInFields = function () {
         // console.log("addDataInFields is CALLED");
            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);
                    }

                    if($field.attr("type") == "checkbox" && record[name] == "true") {
      $field.prop('checked', true);
                    } else {
                    $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 () {
         // console.log("collectDataFromFields is CALLED");
                var $form = $(this).closest("form.foundation-form"), mName = '<%=mName%>';

                //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);
                        }

                     // console.log("Field Type: " + $field.attr("type"));
                     // console.log("Field Value: " + $field.val());
   
                        if($field.attr("type") == "checkbox" && $field.prop('checked')) {
       // console.log("this one is checked");
                            record[name] = "true";
                        } else if($field.attr("type") == "checkbox") {
       // console.log("this one is NOT checked");
                            record[name] = "false";
                        } else {
                         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();
        });

        $(document).on("click", ".js-coral-Multifield-add", function () {
         alert('add clicked');
  });
  
        $(document).on("click", ".js-coral-Multifield-remove", function () {
         alert('remove clicked');
  });

    })();
</script>

1 Accepted Solution

Avatar

Correct answer by
Level 4

Hi there.

After working with AEM there are a number of ways to accomplish this, but I found it easiest to handle via clientlibs that are called during AEM dialogs. I have had to do it to a project myself.

You will need to do two things:

  • Create a clientlib that has logic 
  • Add that clientlib to be called when that specific dialog is in use

I would suggest watching this cq gem as it demonstrates how to do the above as far as getting the logic to javascript to fire at the right time. The rest will be jQuery magic.

http://dev.day.com/content/ddc/en/gems/customizing-dialog-fields-in-touch-ui.html

View solution in original post

4 Replies

Avatar

Correct answer by
Level 4

Hi there.

After working with AEM there are a number of ways to accomplish this, but I found it easiest to handle via clientlibs that are called during AEM dialogs. I have had to do it to a project myself.

You will need to do two things:

  • Create a clientlib that has logic 
  • Add that clientlib to be called when that specific dialog is in use

I would suggest watching this cq gem as it demonstrates how to do the above as far as getting the logic to javascript to fire at the right time. The rest will be jQuery magic.

http://dev.day.com/content/ddc/en/gems/customizing-dialog-fields-in-touch-ui.html

Avatar

Level 2

The link is obsolete now. Gives me a 404. Could you please share some other link?

Avatar

Level 2

Could you please share the correct link ?