Show Hide Component Dialog Fields Based on Template Selection | Community
Skip to main content
S
S__k__Agarwal
Level 3
January 31, 2025
Solved

Show Hide Component Dialog Fields Based on Template Selection

  • January 31, 2025
  • 3 replies
  • 808 views

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 

3 replies

Shiv_Prakash_Patel
Community Advisor
Shiv_Prakash_PatelCommunity Advisor
Community Advisor
January 31, 2025

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
    AmitVishwakarma
    Community Advisor
    AmitVishwakarmaCommunity Advisor
    Community Advisor
    February 1, 2025

    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

    Terms & ConditionsAccessibility statement

    Loading footer...