Hi @Learning4me ,
Yes, you can implement showing or hiding a text field based on the selection of a radio button in AEM Core Components Forms using the ClientLibs (JavaScript) for interactivity. Here’s a step-by-step guide on how to achieve this in AEM as a Cloud Service (AEMaaCS):
Step-by-Step Implementation
1. Create a Form with Radio Button and Text Field
First, you need to create a form that includes a radio button and a text field.
a. Create the Form Structure
You can create a form structure in AEM using Core Components:
Open your AEM instance and navigate to the page where you want to add the form.
Drag and drop the "Form Container" component onto your page.
Inside the Form Container, add a "Radio Button" component:
- Configure the radio button options.
- For simplicity, let's assume you have two options: "Show Text Field" and "Hide Text Field".
Inside the Form Container, add a "Text Field" component:
- Give it an appropriate name and field label.
b. Example of Radio Button Configuration
In the radio button component, you might configure the options as follows:
- Option 1:
- Text: Show Text Field
- Value: show
- Option 2:
- Text: Hide Text Field
- Value: hide
2. Add ClientLibs for Show/Hide Logic
You need to add a Client Library that contains JavaScript to handle the show/hide logic based on the radio button selection.
a. Create a ClientLib
Create a Client Library in your project (e.g., /apps/my-project/clientlibs):
- Create a folder named clientlibs under /apps/my-project.
- Under clientlibs, create a folder named form-show-hide.
- Inside form-show-hide, create a file named form-show-hide.js.
b. Write JavaScript to Handle Show/Hide Logic
Add the following JavaScript code to form-show-hide.js:
document.addEventListener('DOMContentLoaded', function() {
// Get the radio button group and the text field
const radioButtons = document.querySelectorAll('input[name="your-radio-button-name"]');
const textField = document.querySelector('input[name="your-text-field-name"]');
// Function to show or hide the text field based on the selected radio button value
function toggleTextField() {
const selectedValue = document.querySelector('input[name="your-radio-button-name"]:checked').value;
if (selectedValue === 'show') {
textField.closest('.cmp-form-text').style.display = 'block';
} else {
textField.closest('.cmp-form-text').style.display = 'none';
}
}
// Add change event listeners to the radio buttons
radioButtons.forEach(radioButton => {
radioButton.addEventListener('change', toggleTextField);
});
// Initialize the text field visibility based on the default selected radio button
toggleTextField();
});
Replace your-radio-button-name and your-text-field-name with the actual names of your radio button and text field.
c. Add the ClientLib to the Page
You need to include the Client Library in your page. This can be done by adding the following properties to your clientlibs/form-show-hide folder:
- Create a file named cq:ClientLibraryFolder (nt
) under form-show-hide. - Add the following properties to the cq:ClientLibraryFolder node:
- categories (String) with value [ "my-form-show-hide" ]
- dependencies (String) with value [ "cq.authoring.dialog" ]
Include this Client Library in your page template or component:
<sly data-sly-use.clientLibs="${'com.adobe.granite.ui.library' @ categories='["my-form-show-hide"]'}"></sly>
3. Deploy and Test
- Deploy the changes to your AEM environment.
- Open the page with the form and test the radio button functionality. The text field should show or hide based on the radio button selection.
By following these steps, you can create a form in AEM that dynamically shows or hides a text field based on the selection of a radio button. This approach leverages AEM's ClientLibs and Core Components to enhance the interactivity of your forms.
