Hi Team,
Can we implement showing or hiding a text field based on radio button selection in AEM core component forms?
Core components Forms
AEMasCS
Thanks,
Roy
Views
Replies
Total Likes
Hi,
You could achieve such behavior by using JavaScript, but it's not available out-of-the-box if that was your question.
Hope this helps
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):
First, you need to create a form that includes a radio button and a text field.
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:
Inside the Form Container, add a "Text Field" component:
In the radio button component, you might configure the options as follows:
You need to add a Client Library that contains JavaScript to handle the show/hide logic based on the radio button selection.
Create a Client Library in your project (e.g., /apps/my-project/clientlibs):
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.
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:
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>
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.
Views
Like
Replies