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

Dropdown field in metadata schema: Set default choice in JSON input

Avatar

Level 2

Hi,

I'm currently looking into using a JSON file to set choices for a dropdown field in a metadata schema. For the basic approach, the answer from @lukasz-m in json for dropdown field in AEM Metadata Schema has already helped me a lot. 

 

My follow up question would be: Is it possible to set default values using JSON?

 

The reason I'm asking is that I would like to have more than one default option selected when using a multivalue dropdown. As far as I can tell, this is not possible in the UI.

Lukas307478337x42_1-1689324548867.png

 

 You can, however, do so by manually assigning the key value pair "selected" = "true" in CRXDE Lite. See the picture below for an example.

 

Lukas307478337x42_0-1689324287414.png 

=> Lukas307478337x42_2-1689324661996.png

 

When dealing with a larger set of data, it would be more comfortable to use a JSON for generating these choices and setting the default values. But currently, I cannot see how I would approach the later part.

 

I tried using "selected = true" in the JSON:

Lukas307478337x42_1-1689323873833.png

But while the options are generated correctly, no default is being set. 

 

In summary: How do I go about setting default choices in the JSON file for a dropwdown field in a metadata schema?

 

Best Regards,

Lukas

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @Lukas307478337x42 

Maybe in Adobe Experience Manager (AEM), setting default values for a dropdown field in a metadata schema using a JSON file is not directly supported. The JSON file is primarily used to define the available choices for the dropdown, but it does not handle default selections.

To set default values for a dropdown field in a metadata schema, you would need to utilize other AEM capabilities, such as custom code or scripts. Here's a possible approach:

  • Modify the TouchUI dialog XML for the metadata schema.
  • Add a custom client-side JavaScript file to handle the default selections.
  • In the JavaScript file, use the Granite UI API to set the default values programmatically.

Here's an example of how you could implement this:

  • In your TouchUI dialog XML, add a cq:listeners node to your dropdown field:

 

<myDropdown
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    fieldLabel="My Dropdown Field"
    name="./myDropdown"
    cq:listeners="[ready: function() { myNamespace.setDefaultValues(this); }]"
    options="load">
    <items jcr:primaryType="nt:unstructured">
        <option1 jcr:primaryType="nt:unstructured" text="Option 1" value="option1" />
        <option2 jcr:primaryType="nt:unstructured" text="Option 2" value="option2" />
        ...
    </items>
</myDropdown>

 

  • Create a JavaScript file (e.g., custom.js) and define the setDefaultValues function:

 

var myNamespace = myNamespace || {};

myNamespace.setDefaultValues = function (dropdown) {
    // Set the default values in the dropdown field
    dropdown.setValue(["option1", "option2"]);
};

 

  • Upload the custom.js file to your project and include it in your component.

You can have a try with this. Thanks.

View solution in original post

2 Replies

Avatar

Correct answer by
Community Advisor

Hi @Lukas307478337x42 

Maybe in Adobe Experience Manager (AEM), setting default values for a dropdown field in a metadata schema using a JSON file is not directly supported. The JSON file is primarily used to define the available choices for the dropdown, but it does not handle default selections.

To set default values for a dropdown field in a metadata schema, you would need to utilize other AEM capabilities, such as custom code or scripts. Here's a possible approach:

  • Modify the TouchUI dialog XML for the metadata schema.
  • Add a custom client-side JavaScript file to handle the default selections.
  • In the JavaScript file, use the Granite UI API to set the default values programmatically.

Here's an example of how you could implement this:

  • In your TouchUI dialog XML, add a cq:listeners node to your dropdown field:

 

<myDropdown
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/select"
    fieldLabel="My Dropdown Field"
    name="./myDropdown"
    cq:listeners="[ready: function() { myNamespace.setDefaultValues(this); }]"
    options="load">
    <items jcr:primaryType="nt:unstructured">
        <option1 jcr:primaryType="nt:unstructured" text="Option 1" value="option1" />
        <option2 jcr:primaryType="nt:unstructured" text="Option 2" value="option2" />
        ...
    </items>
</myDropdown>

 

  • Create a JavaScript file (e.g., custom.js) and define the setDefaultValues function:

 

var myNamespace = myNamespace || {};

myNamespace.setDefaultValues = function (dropdown) {
    // Set the default values in the dropdown field
    dropdown.setValue(["option1", "option2"]);
};

 

  • Upload the custom.js file to your project and include it in your component.

You can have a try with this. Thanks.

Avatar

Community Advisor

Since drop-down value coming from json are not visible in metadata form location setting the default option as select twill not work OOTB with values coming from json.

if you still want to achieve this then you need to do your custom implementation. Check this for reference https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/display-default-text-on-dr...