Highlighted

Touch UI equivalent for showhide xtype

marcush35887118

09-10-2018

We're in the process of converting all of our Classic UI dialogs to Touch UI using the dialog conversion tool. We're using the showhide xtype in a lot of our form field components and we're looking for an equivalent or alternative widget for the Touch UI. Any suggestions?

Replies

Highlighted

Arun_Patidar

MVP

10-10-2018

Hi,

Is showhide is OOTB xtype or custom.

But there is no type available in touch UI to show hide with cutomization.

You can refer below example to create showhide functionality in touch ui diaog

Show/hide related implementation in dialog in AEM 6.3

https://gist.github.com/rjspiker/003cf9eac1e853bb109a

Highlighted

marcush35887118

10-10-2018

Hey Arun,

Thanks for the reply but the examples provided won't work for this scenario. The showhide is an OOTB xtype. It is used to capture the show/hide logic for fields within a web form instead show/hide logic for widgets within a dialog.

Highlighted

Arun_Patidar

MVP

10-10-2018

Hi,

In Touch UI , you need to write code which act on onChange event

For example below file is OOTB for show hide items based on dropdown selection, similarly you can write your own

/libs/cq/gui/components/authoring/dialog/dropdownshowhide/clientlibs/dropdownshowhide/js/dropdownshowhide.js

https://aem.adobemarketingclub.com/toggle-fields-based-on-selection-in-granite-ui-dialogs/

If you have ACS AEM common package install then you can check below as well.

Show/Hide Widgets

Highlighted

marcush35887118

10-10-2018

Arun,

I am aware of how to implement show/hide logic for widgets within a dialog. That's not what i'm asking about here. I'm referring to the specific showhide xtype which handles show/hide logic for the HTML elements in a web form, not widgets in a dialog. The values captured in this xtype are passed along to the Abacus JS which handles form logic for components that extend OOTB form field components. Below is a screenshot of the showhide xtype. Clicking that checkbox in the background dialog opens the 2nd dialog that allows authors to configure show/hide logic for elements that are present on the web form.

1593175_pastedImage_0.png

Highlighted
Highlighted