Your achievements

Level 1

0% to

Level 2

Tip /
Sign in

Sign in to Community

to gain points, level up, and earn exciting badges like the new
Bedrock Mission!

Learn more

View all

Sign in to view all badges

Adobe Summit 2023 [19th to 23rd March, Las Vegas and Virtual] | Complete AEM Session & Lab list
SOLVED

Is it possible to hide or show a field(s) in a dialog based on a dropdown selection in another dialog?

Avatar

Level 3

What I need to do is hide or show a text field (may be many more fields in the future) based on an option I select in another dialog. Let's say there are two dialogs A and B. There is a dropdown in dialog A which has two options 'Hide' and 'Show' and a textfield in dialog B. If I choose 'Show' from dialog A, a field in dialog B should be made visible the next time I open dialog B. If I choose 'Hide' from dialog A, then that field must be hidden in dialog B. The field in dialog B needs to be hidden by default. In such a way, is it possible to hide or show fields in dialogs based on selections in other dialogs? Currently developing in AEM 6.4.

1 Accepted Solution

Avatar

Correct answer by
Level 7

Hi,

i create something of similar for a project. In my case i use java code in order to change the dialog.

I attach here an example.

If i can suggest you, after using this way i think that it's better to change the design of your components in order to avoid this kind of behaviour.

It's better that elements of a dialog that are related, are configured in the same dialog. If you need to make this configuration because you have a "container" and elements configured for this container, is better that you try to create just only one dialog or manage this configuration by using page property (if it's possible).

@Override

    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)

            throws ServletException, IOException {

     

        BundleContext bundleContext = FrameworkUtil.getBundle(SessionService.class).getBundleContext();

        ServiceReference<?> osgiRef = bundleContext.getServiceReference(SessionService.class.getName());

        SessionService service = (SessionService) bundleContext.getService(osgiRef);

        if (service != null) {

          session = service.getSession();

          String[] tabList = null;

          String dialogPath = request.getParameter("dialogPath");

          resourcePath = request.getParameter("resourcePath");

          LOGGER.debug("dialogPath: "+dialogPath);

          LOGGER.debug("resourcePath: "+resourcePath);

         

          if (StringUtils.isNotBlank(dialogPath) && StringUtils.isNotBlank(resourcePath)) {

            String tabPartialName = "image";

            dialogPath += "/items/items";

            Resource resource = request.getResourceResolver().getResource(resourcePath);

            tabList = resource.getValueMap().get("nameoftabs", String[].class);

            if (tabList != null && tabList.length > 0) {

              WcmUtilsClassicUi.clearOldValueIntoResource(session, tabList, resource);

              WcmUtilsClassicUi.clearOldDialog(session, dialogPath, tabPartialName);

              updateDialogNodes(dialogPath, tabList, tabPartialName);

            } else {

              WcmUtilsClassicUi.clearOldDialog(session, dialogPath, tabPartialName);

            }

          }

        } else {

          LOGGER.error("Box - error on activate method:  is null");

        }

    }

View solution in original post

5 Replies

Avatar

Community Advisor

I'm not sure of the requirements that you have but in order to achieve your use case, you would need to persist & cleanup the state of those fields either in JCR node/json or in browser via cookie/localStorage/sessionStorage etc. The reason is because you want to perform certain actions that are outside the scope of your original request in a stateless architecture.

You would definitely need to consider the end-to-end design when concurrent users may want to interact with the system, probably same page/same component use cases.

Avatar

Level 10

YOu can write JQUery code to manipulate fields on the same dialog. For 2 different dialogs - never seen that uses case. However - i passed this to our Touch UI team to get their thoughts.  (but best practice is 1-1 - all fields are on 1 dialog and have nothing to do with other dialogs)

Avatar

Correct answer by
Level 7

Hi,

i create something of similar for a project. In my case i use java code in order to change the dialog.

I attach here an example.

If i can suggest you, after using this way i think that it's better to change the design of your components in order to avoid this kind of behaviour.

It's better that elements of a dialog that are related, are configured in the same dialog. If you need to make this configuration because you have a "container" and elements configured for this container, is better that you try to create just only one dialog or manage this configuration by using page property (if it's possible).

@Override

    protected void doGet(SlingHttpServletRequest request, SlingHttpServletResponse response)

            throws ServletException, IOException {

     

        BundleContext bundleContext = FrameworkUtil.getBundle(SessionService.class).getBundleContext();

        ServiceReference<?> osgiRef = bundleContext.getServiceReference(SessionService.class.getName());

        SessionService service = (SessionService) bundleContext.getService(osgiRef);

        if (service != null) {

          session = service.getSession();

          String[] tabList = null;

          String dialogPath = request.getParameter("dialogPath");

          resourcePath = request.getParameter("resourcePath");

          LOGGER.debug("dialogPath: "+dialogPath);

          LOGGER.debug("resourcePath: "+resourcePath);

         

          if (StringUtils.isNotBlank(dialogPath) && StringUtils.isNotBlank(resourcePath)) {

            String tabPartialName = "image";

            dialogPath += "/items/items";

            Resource resource = request.getResourceResolver().getResource(resourcePath);

            tabList = resource.getValueMap().get("nameoftabs", String[].class);

            if (tabList != null && tabList.length > 0) {

              WcmUtilsClassicUi.clearOldValueIntoResource(session, tabList, resource);

              WcmUtilsClassicUi.clearOldDialog(session, dialogPath, tabPartialName);

              updateDialogNodes(dialogPath, tabList, tabPartialName);

            } else {

              WcmUtilsClassicUi.clearOldDialog(session, dialogPath, tabPartialName);

            }

          }

        } else {

          LOGGER.error("Box - error on activate method:  is null");

        }

    }

Avatar

Level 10

Our team replied:

Hey there is a acs aem commons extension for this purpose… check if it helps

https://github.com/Adobe-Consulting-Services/acs-aem-commons/tree/master/content/src/main/content/jc...