AEM show/hide enable/disable dialog fields based on Checkbox

-
Hello All,

While developing AEM components we might need to show/hide or enable/disable fields in dialog based on Checkbox or on Select dropdown.
I implemented this for Touch UI dialog in AEM 6.5.
Thanks to my friend Sameer Gunjal who helped me here.

Requirement: On the basis of checkbox, We are going to enable/disable textfields of the dialog.


Steps:

 Add Granite:class to the checkbox node and to the fields you want to disable.  Remember, We are going to use these same classes in JS.

 




2     Create a clientlib, to place our JS file in it.
    
        

      I have created a JS file with name listeners.js, 
      Put below JS in the file that you created.
      
(function($) {
   "use strict";
   $(document).on("dialog-ready", function() {
   $(document).on('change', '.checkbox-test', chekbxt);
   if( $('.checkbox-test').length > 0 ) {
      chekbxt();
    }
    function chekbxt (){
        if($(".checkbox-test").attr("checked")){
        $( ".textfield-class" ).prop( "disabled", true );
        }else {$( ".textfield-class" ).prop( "disabled", false );}
       }
   });
})($);

3   Last step, you will have to add the clientlib name in the extraClientlibs property of the dialog.
       

4   Now you will be able to enable/disable fields of the dialog on the selection of checkbox. You can do hide/show similar way, you just need to tweak the JS as per your need.


Comments

Post a Comment

Popular posts from this blog

AEM Caching with Google Guava: Use Case, Importance, and Implementation

-
AEM Caching with Google Guava: Use Case, Importance, and Implementation AEM Caching with Google Guava: Use Case, Importance, and Implementation Caching is essential in optimizing the performance of web applications, and when it comes to Adobe Experience Manager (AEM), caching strategies can be implemented at various levels. One such powerful caching mechanism that developers can use within the AEM application itself is Google Guava caching . In this blog, we will explore why Google Guava caching is important, and how you can use it effectively in AEM, along with a practical use case. Why Caching Is Important in AEM AEM is a robust content management system, but its performance can be affected if multiple repetitive and expensive operations (like API calls, database queries, or service executions) are executed frequently. These operations increase the load on the AEM instances, reduce response times, and impact the user experience. Caching ...
Read more

Creating a Chrome Extension for Easy Redirection to Multiple AEM Instances

-
Creating a Chrome Extension for Easy Redirection to Multiple AEM Instances As developers or content authors working with Adobe Experience Manager (AEM), you may often find yourself switching between different environments like local, dev, UAT, and production. Constantly typing or bookmarking URLs can be cumbersome, especially when you have multiple instances of AEM running. In this blog post, I will walk you through how to create a custom Chrome extension that allows you to easily switch between your AEM instances with a single click. Why a Chrome Extension? A Chrome extension is a handy tool to quickly access commonly used URLs. By setting up buttons for each AEM instance (local author, dev publish, UAT author, etc.), you can streamline the process of navigating between environments, saving time and minimizing errors. What You’ll Need Basic knowledge of HTML, JavaScript, and JSON. Chrome browser for testing. Your AEM instance URLs. Let’s dive into the steps! ...
Read more