Expand my Community achievements bar.

Dive into Adobe Summit 2024! Explore curated list of AEM sessions & labs, register, connect with experts, ask questions, engage, and share insights. Don't miss the excitement.
SOLVED

How to populate by default item in multifield dialog

Avatar

Level 4

By default it will be nothing as shown in screenshot, I want to highlight single item without clicking "Add" button. 

keshava219_1-1693484242256.png

I heard like we need right custom js for this, any reference let me know. I'm Using

"granite/ui/components/coral/foundation/form/multifield"

 

 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @keshava219,

You can consider using "cq:template" here. The values will be stored to the content node as soon as you add the component to the page. 

_cq_template / .content.xml (country / language can be empty based on your needs) 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
  jcr:primaryType="nt:unstructured">
  <navItems jcr:primaryType="nt:unstructured">
    <item0 jcr:primaryType="nt:unstructured"
      country="Germany"
      language="German"/>
  </navItems>
</jcr:root>

Screenshot 2023-08-31 at 7.14.00 PM.png

 

Reference: https://www.aem-blog.com/post/how-to-pre-populate-values-in-aem-component 

View solution in original post

2 Replies

Avatar

Community Advisor

Hello @keshava219 ,
You can try this script,
In your clientlib JS,

(function($) {
    $(document).on("foundation-contentloaded", function(e) {
        console.log("Hello");
        $(".coral-Form-field.coral3-Multifield").each(function() {
            let $multifield = $(this);
            let $fields = $multifield.find(".coral3-Multifield-item");

            // Check if the multifield is empty
            if ($fields.length === 0) {
                // Add default item
                $multifield.find(".coral3-Button").click();
            }
        });
    });
})(jQuery);

Add the clientlib by using 

extraClientlibs=[your.clientlib.name]

 

Avatar

Correct answer by
Community Advisor

Hi @keshava219,

You can consider using "cq:template" here. The values will be stored to the content node as soon as you add the component to the page. 

_cq_template / .content.xml (country / language can be empty based on your needs) 

 

<?xml version="1.0" encoding="UTF-8"?>
<jcr:root xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"
  jcr:primaryType="nt:unstructured">
  <navItems jcr:primaryType="nt:unstructured">
    <item0 jcr:primaryType="nt:unstructured"
      country="Germany"
      language="German"/>
  </navItems>
</jcr:root>

Screenshot 2023-08-31 at 7.14.00 PM.png

 

Reference: https://www.aem-blog.com/post/how-to-pre-populate-values-in-aem-component