I developed a form with a custom submit action which calls a service. This service calls an API endpoint to save some data. In this process anything can go wrong like connection errors and so on. So then my service returns an error code 500.
In this case the AEM Form shows an alert box with an AEM Forms error code "AEM-AF-901-004". But I don't want to show this alert box. In all backend error cases, I will show to the user a styled error message above the form like "Something went wrong. Please try again later!". I can't find a description how to define such global error messages. But actually it is a common case, right?
AEM Forms provides out-of-the-box success and error handlers (client-side functions that are executed based on the server response) for form submissions. Here you can write rules at the form level to override default handlers.
I found a solution for my problem but nowhere a good documentation/HowTo of it. So following steps I've done:
Create a text component within you form, where the error message should be shown and type in your error text.
In the properties dialog give the text component a "speaking" name, tick the "Hide object" checkbox to hide it initially and save the properties.
Select the form container and open the rules editor.
Create a new rule and select "WHEN formsubmission fails THEN show 'name of your text component'".
Save the rule
Open the properties dialog of the form and tick the checkbox "Use asynchronous submission" in section "Submission" and save the properties.
Unfortunately I don't know how to do it without asynchronous submission. Maybe I have to change something in my custom submit action to add a parameter which I can check in a rule or something different.