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
@kautuk_sahni @Sudheer_Sundalam
Solved! Go to Solution.
Views
Replies
Total Likes
You can use design dialog and based on a property, you can show/hide fields in the dialog.
Example to disable Call to Action.
Dialog
Design Dialog
You can use design dialog and based on a property, you can show/hide fields in the dialog.
Example to disable Call to Action.
Dialog
Design Dialog
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,
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
Views
Replies
Total Likes