Expand my Community achievements bar.

Radically easy to access on brand approved content for distribution and omnichannel performant delivery. AEM Assets Content Hub and Dynamic Media with OpenAPI capabilities is now GA.
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