Show Hide Component Dialog Fields Based on Template Selection

[S__k__Agarwal]

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 

[arunpatidar · Accepted solution]

Hi @S__k__Agarwal 

You can use design dialog and based on a property, you can show/hide fields in the dialog.

Example to disable Call to Action.

https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/wcm-components/t...

Dialog

https://github.com/adobe/aem-core-wcm-components/blob/b6dc1b6249fe4159db8057b10ec3bb280fc5ee20/conte... 

Design Dialog

https://github.com/adobe/aem-core-wcm-components/blob/b6dc1b6249fe4159db8057b10ec3bb280fc5ee20/conte... 

[Shiv_Prakash_Patel]

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,

[AmitVishwakarma]

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