You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
For a scenario when a form(ex:Sign In) is embedded on a page,
As and end user, I have a Sign in/ Login form with user name and password and a link with Register button
When I click on Register button, the current form should hide and Register form should be displayed
Description & Motivation
Sign up and Sign In are most used forms on any web application and switching between forms without loading/reloading the page will be helpful
Deliverables
New AEM forms core Component to allow switching between forms
OR
Update Switch Component to hide current form and display new form on page
Acceptance Criteria
Switching between forms by a simple link/click on button
Verification Steps
A simple switch between forms by clicking on a button without reloading
The text was updated successfully, but these errors were encountered:
New AEM forms core Component to allow switching between forms
OR
Update Switch Component to hide current form and display new form on page
@shravanthprasad Using core components, you can also create multiple forms on a single page. To achieve the current use-case mentioned in the issue, you can subscribe to the submitSuccess listener of each form using guideBridge and then hide the form using DOM APIs. Here is a sample code to demonstrate this:
const onSubmitSuccess = (event, formid) => {
// hide the form using form id
const formElement = document.getElementById(formId);
if (formElement) {
formElement.style.display = 'none';
}
};
const onValidationComplete = (event) => {
const x = event.payload[0].id;
// do something with the invalid field
};
const initialGbEvents = (guideBridge) => {
guideBridge.getFormModel().subscribe((action) => {
onSubmitSuccess(action, guideBridge.getFormModel().id);
}, 'submitSuccess');
guideBridge.getFormModel().subscribe((action) => {
onValidationComplete(action);
}, 'validationComplete');
};
const connectGuideBridge = (bridge, formContainerPath, connectFunction) => {
guideBridge.connect(
() => connectFunction(bridge),
null,
formContainerPath
);
};
const formContainerConfigurations = [
{
path: '<form-container-path-1>',
connectFunction: initialGbEvents,
},
{
path: '<form-container-path-2>',
connectFunction: (guideBridge) => {
// Custom function for form-container-path-2
console.log('Connected to form-container-path-2');
// Additional logic for this form
}
},
// Add more form container configurations as needed
];
if (window.guideBridge !== undefined) {
const bridge = window.guideBridge;
formContainerConfigurations.forEach((config) => {
connectGuideBridge(bridge, config.path, config.connectFunction);
});
} else {
window.addEventListener("bridgeInitializeStart", (event) => {
const bridge = event.detail.guideBridge;
formContainerConfigurations.forEach((config) => {
connectGuideBridge(bridge, config.path, config.connectFunction);
});
});
}
User Story
For a scenario when a form(ex:Sign In) is embedded on a page,
As and end user, I have a Sign in/ Login form with user name and password and a link with Register button
When I click on Register button, the current form should hide and Register form should be displayed
Description & Motivation
Sign up and Sign In are most used forms on any web application and switching between forms without loading/reloading the page will be helpful
Deliverables
New AEM forms core Component to allow switching between forms
OR
Update Switch Component to hide current form and display new form on page
Acceptance Criteria
Switching between forms by a simple link/click on button
Verification Steps
A simple switch between forms by clicking on a button without reloading
The text was updated successfully, but these errors were encountered: