Expand my Community achievements bar.

Nomination window for the Adobe Community Advisor Program, Class of 2025, is now open!
SOLVED

Show Hide Component Dialog Fields Based on Template Selection

Avatar

Level 2

I need to design a component dialog in such a way that some dialog fields will be shown or hidden based on the selection of a group of templates.

 

Need some suggestions how to implement it?

 

@aanchal-sikka @EstebanBustamante 

@arunpatidar @Shashi_Mulugu 

@lukasz-m @Mahedi_Sabuj 

@kautuk_sahni @Sudheer_Sundalam

@lukasz-m @Rohan_Garg 

1 Accepted Solution

Avatar

Correct answer by
Community Advisor
3 Replies

Avatar

Correct answer by
Community Advisor

Avatar

Community Advisor

Hi @S__k__Agarwal ,

You can use Granite Render Conditions to dynamically show or hide fields based on the selected template in AEM.

AEM provides OOTB (Out-of-the-Box) conditions, or you can create a custom condition as shown below:

<homepageText
    jcr:primaryType="nt:unstructured"
    sling:resourceType="granite/ui/components/coral/foundation/form/textfield"
    fieldLabel="HomePage Text"
    name="./homepageText">
    <granite:rendercondition 
        jcr:primaryType="nt:unstructured"
        sling:resourceType="granite/ui/components/coral/foundation/renderconditions/simple"
        expression="${granite:containsIgnoreCase(requestPathInfo.suffix, '/en/home-page')}"/> 
</homepageText>

For a detailed explanation, check out this article: Granite Render Condition in AEM

For more condition examples, refer to: GitHub Gist – Render Conditions

You can also explore the Granite Library documentation here: Granite UI Render Conditions

Regards,

Shiv Prakash

Avatar

Level 7

Use Granite Render Conditions to dynamically show/hide dialog fields based on template selection.

1.Create a Select Field for template choice.
2. Add Granite Render Condition to fields you want to show/hide:

<granite:rendercondition 
    expression="${'template1' == properties['templateSelection']}"/>

3. Use the condition to display fields based on the selected template.
Please refer : https://ankanghosh-webdev.medium.com/granite-render-condition-in-aem-64d32f03a7d1