Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

Dynamic Multifield Length

Avatar

Level 3

Depending on certain layout properties returned by the sling model, I would like to make either 1 or 2 multifield entries available in my dialog. Is there a way make the dialog display either 1 or 2 entries in a multifield? Is this best handled via validation scripts?

1 Accepted Solution

Avatar

Correct answer by
Level 6

Hi @johns43992246 

 

  • While validation scripts can help enforce rules, they are typically used for validation (e.g., mandatory fields, data formats) rather than dynamically adjusting the number of multifield entries.

however you can try below steps:

 

  • Create a Sling Model associated with your component. Within the Sling Model, inject the dialog’s values using the @ValueMapValue annotation. Based on the layout properties, dynamically set the properties of the current page’s ValueMap.

    you can check the attached blog reference for more detailed walkthrough
    All About Dynamic Dropdown (Granite DataSource) in AEM - unLock Learning

View solution in original post

4 Replies

Avatar

Level 3

hey @johns43992246 ,

If you possess this data (maximum number of entries per multifield) prior to loading the dialog or during the dialog loading process, then you can proceed to register it with the foundation validator.

(function (document, $) {
    "use strict";
    $(document).on('foundation-contentloaded', function () {
    //get max count with your business logic
});
validation("./fieldName",maxCount);
function validation(fieldName,maxCount) {
        $(window).adaptTo("foundation-registry")
            .register("foundation.validation.validator", {
                selector: 'coral-multifield[data-granite-coral-multifield-name^="' + fieldName + '"]',
                validate: function (el) {
                    var totalCount = $(document).find(el).find('>coral-multifield-item').length;
                        if (totalCount > maxCount) {
                            return "Maximum Fields allowed are: " + maxCount;
                        }
                    }
                },
            });
    }


})(document, Granite.$);

 

Avatar

Correct answer by
Level 6

Hi @johns43992246 

 

  • While validation scripts can help enforce rules, they are typically used for validation (e.g., mandatory fields, data formats) rather than dynamically adjusting the number of multifield entries.

however you can try below steps:

 

  • Create a Sling Model associated with your component. Within the Sling Model, inject the dialog’s values using the @ValueMapValue annotation. Based on the layout properties, dynamically set the properties of the current page’s ValueMap.

    you can check the attached blog reference for more detailed walkthrough
    All About Dynamic Dropdown (Granite DataSource) in AEM - unLock Learning

Avatar

Level 3

Honestly we discussed on my team and decided this would be too tricky to implement and decided to go another route. I think what was asking is a sort of anti-pattern for typical AEM component implementations. I was trying to use a parent component applied style classes to define the child component's number of multifield items. This could probably be done in the sling model on first initialization by creating those child nodes. Then the multifield will automatically have the correct number of multifields. Since we are going another route I won't bother trying to implement it.

Avatar

Administrator

@johns43992246 Did you find the suggestions from users helpful? Please let us know if you require more information. Otherwise, please mark the answer as correct for posterity. If you've discovered a solution yourself, we would appreciate it if you could share it with the community. Thank you!



Kautuk Sahni