Expand my Community achievements bar.

Don’t miss the AEM Skill Exchange in SF on Nov 14—hear from industry leaders, learn best practices, and enhance your AEM strategy with practical tips.
SOLVED

component dialog: how to auto-show/hide/retrieve fields (based on dropdown list selection. example inside)

Avatar

Level 9

Scenario.

  • I can have 1 or more primary tasks.
  • and 1 primary task can have 1 or more secondary tasks.
  • Both primary and secondary tasks are multifield (granite/ui/components/coral/foundation/form/multifield).

Screenshot explanation:

  • The primary task dropdown list has been entered via the "Primary Task" tab. I entered 4  values into it. (screenshot1)
  • On the secondary tab, I need to select 1 of the options from the "Primary tasks" that I entered.
  • If there are no "secondary tasks" associated with the selected "primary task", something like in screenshot2 is displayed. I will then manually enter records for it I choose to do so.
  • If there are "secondary tasks" associated with the selected "primary task", something like in screenshot3 will be displayed. The records will be displayed below and I should still be able to add more records.

Thanks heaps for the assistance.

3c544d54-6f5a-4658-8c67-947b1037be5d.pngca741ace-183f-4da8-9609-3bde6c8f03ca.png68f0e999-1a1f-4b2b-b9bc-cc4ff2940db3.png

1 Accepted Solution

Avatar

Correct answer by
Employee
4 Replies

Avatar

Employee

You can use custom render condition based on you selection you can show hide the fields in dialog or even tabs of the dialog.

Refer below tutorials - 

 https://levelup.gitconnected.com/aem-creating-custom-granite-render-conditions-28a21958f420.

https://jpsoares.medium.com/aem-granite-render-conditions-438c804b1e5a

 

Avatar

Level 9

any ideas on how to trigger a refresh when I change my selection in "primary task" dropdown?

Avatar

Correct answer by
Employee

you can refer below link for handling Select (Dropdown) change event.

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager/how-to-handle-the-coral-ui...

Avatar

Community Advisor

Hi @jayv25585659 

 

You can achieve this using built in properties of AEM component dialog. Please refer below blog,

 

https://experienceleaguecommunities.adobe.com/t5/adobe-experience-manager-blogs/show-hide-cq-dialog-...

 

Hope it helps