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

SOLVED

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

vigiaemnewbie
Level 3
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
antoniom5495929
Correct answer by
Level 7
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
Gaurav-Behl
Community Advisor
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.

smacdonald2008
Level 10
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)

antoniom5495929
Correct answer by
Level 7
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