Hello @genghis314
To control the "state" of a tab for a panel in AEM Forms, specifically to trigger the "visited" state when required fields are completed, you can follow these steps:
Utilize GuideBridge API:
The GuideBridge API in AEM Forms can be used to track and respond to changes in field validation status. This API is invaluable for custom logic that responds to form interactions.
Use the elementValidationStatusChanged event from the GuideBridge API to detect when a field's validation status changes. This event helps identify when fields in a panel are correctly filled or if errors remain.
Create Custom JavaScript Functions:
Implement a custom function that listens for validation changes. When all required fields in a tab are validated successfully, you can programmatically add the "visited" class or state to the tab.
Conversely, if fields are incomplete or invalid, ensure that the "visited" state is not applied, maintaining the tab in its default state.
Styling the Tabs:
Use CSS to define styles for the "visited" state and default state of tabs. This might involve adding a tick or changing colors.
For example, you can use classes like .tab-visited and .tab-default to manage styles.
Apply Logic to Manage Tab States:
Write logic that checks all fields within a tab. If all required fields pass validation, apply the tab-visited class to the tab.
Remove the tab-visited class if any required fields fail validation, reverting to the default tab state.
References:
Refer to the GuideBridge JavaScript API for more details.
For more about theme customization, visit Creating and using themes.
Thanks,
Rahul Pandey