Expand my Community achievements bar.

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