Expand my Community achievements bar.

Guidelines for the Responsible Use of Generative AI in the Experience Cloud Community.
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

Level 10

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");

        }

    }