Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.

Select Default value in coral select field at AEM Page Properties 6.3

Avatar

Level 3

Hi All,

 

I am trying to set default dropdown value at page properties level where I need to first get the selected value and then change the default value based on current url. Below is the code snippet I tried so far: 

 

 

 

$(document).ready(function() {
    var currentUrl = window.location.href;
    	var hrefLang = "x-default";
    	if(currentUrl.indexOf('us/en') > -1){
            hrefLang = "en-US";          
        }
    $("#coral-id-105").each(function(index, value) {
			$("#coral-id-105 coral-selectlist-item[value="+ hrefLang +"]").prop('selected', true);
		});
});

 

 

I am getting undefined every time when I am trying to alert the current value.

Note: I don't need to add value from datasource. I have static values just need to set one as default.

 

@arunpatidar @Suraj_Kamdi 

11 Replies

Avatar

Community Advisor

Hi @naveen_27_05 

Are you saying that you are not able to get the value selected in the drop-down? Can you be more specific?

Thanks,

Kiran Vedantam.

Avatar

Level 2

Hi Kiran,

 

Yes, I am unable to set the default dropdown value with the js I have shared in the code snippet above.

 

Thank you.

Avatar

Community Advisor

Hi,

Your code should look like something below.

This is not tested but just an idea to execute code on pageproperty dialog load event

 

(function (document, $) {
    "use strict";

    
    var currentUrl = decodeURIComponent(window.location.href);
    var hrefLang = "x-default";
    const dropDownSelector = "#coral-id-105"

    $(document).on("foundation-contentloaded", function () {
    setValue(dropDownSelector);
    });

  

    function setValue(dropDownSelector) {
        if(currentUrl.indexOf('us/en') > -1){
            hrefLang = "en-US";          
        }
        $(dropDownSelector).each(function() {
            $(dropDownSelector + " coral-selectlist-item[value="+ hrefLang +"]").prop('selected', true);
        });
    }

})(document, Granite.$);

 



Arun Patidar

Avatar

Level 3

Hi,

 

I have tried with same way for single drop down it's working if we have 3 or 4 dropdown value id getting changed for each value so I have tried with creating the class and I tried executing the same code by changing the id to class but not working.

 

	    $(window).on("load", function() {
      
       // e.preventDefault();
        var currentUrl = window.location.href;
        var hrefLang = "x-default";
        if (currentUrl.indexOf('us/en') > -1) {
            hrefLang = "en-US";
        }else if(currentUrl.indexOf('fr/fr') > -1){
			hrefLang = "fr-FR";
        }
        $(".href-lang-dropdown").each(function(index, value) {

            $(".href-lang-dropdown coral-selectlist-item[value=" + hrefLang + "]").prop('selected', true);
        });
    });

 

Thank you.

 

Avatar

Community Advisor

what property did you added?

granite:class for coral3 or class (for coral3)?

you need to check the HTML dom, the custom id/class are added to the corel-select element.



Arun Patidar

Avatar

Level 3

Hi,

 

Added granite:class for coral3. I checked that there is no custom id and class in coral-select-element.

Avatar

Community Advisor

It should be added. Can you share your dialog xml?

 

Arun_Patidar_0-1653036297677.png

 



Arun Patidar

Avatar

Level 2

Hi,

nave_27_0-1653100298065.png

 

I have added granite:class and I am able to make default value but I have one issue when I open the page properties en/us it's showing default value as en-US when I open de/de page it should be default value as de-DE when i open the page first it is not showing if I load it again then default is setting. 

 

	    $(window).on("load", function() {
       // e.preventDefault();
        var currentUrl = window.location.href;
        var hrefLang = "x-default";
        if (currentUrl.indexOf('us/en') > -1) {
            hrefLang = "en-US";
        }else if(currentUrl.indexOf('fr/fr') > -1){
			hrefLang = "fr-FR";
        }else if(currentUrl.indexOf('de/de') > -1){
			hrefLang = "de-DE";
        }else if(currentUrl.indexOf('jp/ja') > -1){
			hrefLang = "ja-JP";
        }else if(currentUrl.indexOf('int/en/') > -1){
			hrefLang = "en-INT";
        }

        $(".href-lang-dropdown").each(function(index, value) {

            $(".href-lang-dropdown coral-selectlist-item[value=" + hrefLang + "]").prop('selected', true);
        });
    });


 

 

  <href_lang
                                                granite:class="href-lang-dropdown"
                                                jcr:primaryType="nt:unstructured"
                                                sling:resourceType="granite/ui/components/coral/foundation/form/select"
                                                fieldLabel="Href language Tags"
                                                name="./hreflangtag"
                                                value="true">
                                                <items jcr:primaryType="nt:unstructured">
                                                    <default
                                                        jcr:primaryType="nt:unstructured"
                                                        text="x-default"
                                                        value="x-default"/>
                                                    <en-US
                                                        jcr:primaryType="nt:unstructured"
                                                        text="en-US"
                                                        value="en-US"/>
                                                    <de-DE
                                                        jcr:primaryType="nt:unstructured"
                                                        text="de-DE"
                                                        value="de-DE"/>
                                                    <fr-FR
                                                        jcr:primaryType="nt:unstructured"
                                                        text="fr-FR"
                                                        value="fr-FR"/>
                                                    <ja-JP
                                                        jcr:primaryType="nt:unstructured"
                                                        text="ja-JP"
                                                        value="ja-JP"/>
                                                    <en-INT
                                                        jcr:primaryType="nt:unstructured"
                                                        text="en-INT"
                                                        value="en-INT"/>
                                                </items>
                                            </href_lang>

 

Avatar

Community Advisor

Can you try changing the event from

$(window).on("load", function() {
...
}

To

$(document).on("foundation-contentloaded", function () {
    ...
    });

 

 



Arun Patidar