Lägg till anpassade felhanterare i AEM Adaptive Forms

Adobe rekommenderar att man använder modern och utbyggbar datainhämtning Kärnkomponenter for skapa ny Adaptive Forms eller lägga till adaptiv Forms på AEM Sites-sidor. De här komponenterna utgör ett betydande framsteg när det gäller att skapa adaptiva Forms-filer, vilket ger imponerande användarupplevelser. I den här artikeln beskrivs det äldre sättet att skapa Adaptiv Forms med baskomponenter.

AEM Forms har färdiga funktioner och felhanterare för att skicka in formulär. Den innehåller även funktioner för att anpassa felhanterarfunktioner. Du kan till exempel anropa ett anpassat arbetsflöde i serverdelen för specifika felkoder eller informera kunden om att tjänsten inte fungerar. Hanterare är funktioner på klientsidan som körs baserat på serversvaret. När en extern tjänst anropas med API:er överförs data till servern för validering, som returnerar ett svar till klienten med information om lyckad eller felhändelse för överföringen. Informationen skickas som parametrar till den relevanta hanteraren för att köra funktionen. En felhanterare hjälper till att hantera och visa fel eller valideringsproblem som påträffats.

Det adaptiva formuläret validerar indata som du anger i fält baserat på förinställda valideringskriterier och söker efter olika fel som returneras av REST-slutpunkten som konfigurerats för att anropa en extern tjänst. Du kan ange valideringskriterier baserat på den datakälla som du använder med det adaptiva formuläret. Om du till exempel använder RESTful-webbtjänster som datakälla kan du definiera valideringskriterierna i en Swagger-definitionsfil.

Om indatavärdena uppfyller valideringskriterierna skickas värdena till datakällan i annat fall visas ett felmeddelande i Adaptiv form med hjälp av en felhanterare. På samma sätt som detta arbetssätt integreras Adaptive Forms med anpassade felhanterare för datavalidering. Om indatavärdena inte uppfyller valideringskriterierna visas felmeddelandena på fältnivå i det adaptiva formuläret. Detta inträffar när det valideringsfelmeddelande som returneras av servern har standardmeddelandeformatet.

Användning av felhanterare

Felhanterare används för olika syften. Några av användningsområdena för felhanterarfunktioner visas nedan:

• Utför validering: Felhanteringen börjar med att användarindata valideras mot fördefinierade regler eller villkor. När användarna fyller i ett adaptivt formulär validerar felhanteraren indata så att det uppfyller det format, den längd eller andra begränsningar som krävs.

• Ge feedback i realtid: När ett fel upptäcks visar felhanteraren direkt feedback till användaren, t.ex. textbundna felmeddelanden under motsvarande formulärfält. Denna feedback hjälper användarna att identifiera och åtgärda fel utan att behöva skicka in formuläret och vänta på ett svar.

• Visa felmeddelanden: När en sändning med adaptiva formulär påträffar ett valideringsfel visas ett felmeddelande i felhanteraren. Felmeddelandena ska vara tydliga, koncisa och markera de specifika fält som behöver åtgärdas.

• Markerar det felaktiga fältet: För att dra användarens uppmärksamhet till specifika felaktiga fält markeras eller visas motsvarande fält. Den utförs genom att ändra bakgrundsfärgen, lägga till en ikon eller kantlinje eller någon annan visuell indikator som hjälper användarna att snabbt hitta och åtgärda felen.

Fel-/felsvarsformat

I ett adaptivt formulär visas felen på fältnivå om servervalideringsfelmeddelanden är i följande standardformat.
Koden nedan visar den befintliga strukturen för felsvar:

   {
    errorCausedBy : "SERVER_SIDE_VALIDATION/SERVICE_INVOCATION_FAILURE"
    errors : [
        {
             somExpression  : <somexpr>
             errorMessage / errorMessages : <validationMsg> / [<validationMsg>, <validationMsg>]
        }
    ]
    originCode : <target error Code>
    originMessage : <unstructured error message returned by service>
    }

Var:

• errorCausedBy beskriver orsaken till felet.
• errors Ange SOM-uttrycket för de fält som underkändes i valideringskriterierna tillsammans med valideringsfelmeddelandet.
• originCode fält som lagts till av AEM och innehåller http-statuskoden som returneras av den externa tjänsten.
• originMessage fält som lagts till av AEM och innehåller rådata som returnerats av den externa tjänsten.

Med förbättringarna i funktioner och efterföljande uppdateringar i AEM Forms-versionerna har den befintliga felsvarsstrukturen ändrats till ett nytt format baserat på RFC7807, som är bakåtkompatibel med den befintliga felsvarsstrukturen:

    {
        "type": "SERVER_SIDE_VALIDATION/FORM_SUBMISSION/SERVICE_INVOCATION/FAILURE/VALIDATION_ERROR", (required)
        "title": "Server side validation failed/Third party service invocation failed", (optional)
        "detail": "", (optional)
        "instance": "", (optional)
        "validationErrors" : [ (required)
            {
                "fieldName":"<SOM expression of the field whose data sent is invalid>",
                "dataRef":<JSONPath (or XPath) of the data element which is invalid>
                "details": ["Error Message(s) for the field"] (required)

            }
        ],
        "originCode": <Origin http status code>, (optional - in case of SERVER_SIDE_VALIDATION)
        "originMessage" : "<unstructured error message returned by service>" (optional - in case of SERVER_SIDE_VALIDATION)
    }

Var:

• type (required) anger feltypen. Det kan vara något av följande värden:

  • SERVER_SIDE_VALIDATION indikerar ett fel på grund av validering på serversidan.
  • FORM_SUBMISSION anger ett fel när formulär skickas
  • SERVICE_INVOCATION indikerar ett fel under ett anrop till en tjänst från tredje part.
  • FAILURE anger ett allmänt fel.
  • VALIDATION_ERROR indikerar ett fel på grund av ett valideringsfel.

• title (optional) innehåller en titel eller kort beskrivning av felet.

• detail (optional) innehåller ytterligare information om felet om det behövs.

• instance (optional) representerar en instans eller identifierare som är associerad med felet och hjälper till att spåra eller identifiera den specifika förekomsten av felet.

• validationErrors (required) innehåller information om valideringsfel. Den innehåller följande fält:

  • fieldname omnämns SOM-uttrycket för de fält som underkändes i valideringskriterierna.
  • dataRef representerar JSON-sökvägen eller XPath för de fält som underkändes vid valideringen.
  • details innehåller valideringsfelmeddelandet med det felaktiga fältet.

• originCode (optional) fält som lagts till av AEM och innehåller http-statuskoden som returneras av den externa tjänsten

• originMessage (optional) fält som lagts till av AEM och innehåller rådata som returnerats av den externa tjänsten.

Exempel på felsvarsformat

Vissa av alternativen för att visa felsvaren är:

Lägg till felhanterare med Regelredigeraren

Använda Regelredigerarens anropstjänst definierar du valideringskriterierna baserat på den datakälla som du använder med det adaptiva formuläret. Om du använder RESTful-webbtjänster som datakälla kan du definiera valideringskriterierna i en Swagger-definitionsfil. Genom att använda felhanterarfunktionerna och regelredigeraren i Adaptive Forms kan du effektivt hantera och anpassa felhanteringen. Du definierar villkoren med Regelredigeraren och konfigurerar de åtgärder som ska utföras när regeln aktiveras. Adaptiv form validerar indata som du anger i fält baserat på förinställda valideringskriterier. Om indatavärdena inte uppfyller valideringskriterierna visas felmeddelandena på fältnivån i ett adaptivt formulär.

Med regelredigeraren kan du:

• Lägg till standardfelhanterarfunktion
• Lägg till anpassad felhanterarfunktion

Lägg till standardfelhanterarfunktion

En standardfelhanterare stöds för att visa felmeddelanden i fält om felsvaret är i standardschema eller i valideringsfel på serversidan.
Så här använder du en standardfelhanterare med Regelredigerarens anropstjänst åtgärd, ta ett exempel på ett enkelt adaptivt formulär med två fält, Djurs-ID och Djurnamn och använder en standardfelhanterare på Djurs-ID fält för att kontrollera olika fel som returneras av REST-slutpunkten som konfigurerats för att anropa en extern tjänst, till exempel 200 - OK,404 - Not Found, 400 - Bad Request. Så här lägger du till en standardfelhanterare med hjälp av åtgärden Anropa tjänst i regelredigeraren:

1. Öppna ett adaptivt formulär i redigeringsläge, markera en formulärkomponent och tryck på Rule Editor för att öppna regelredigeraren.
2. Tryck på Create.
3. Skapa ett villkor i När -delen av regeln. Till exempel: När[Namn på Pet ID-fält] ändras. Markeringen ändras från Välj läge listruta.
4. I Sedan avsnitt, markera Invoke Service från Välj åtgärd listruta.
5. Välj en Bokför tjänst och dess motsvarande databindningar från Indata -avsnitt. Validera till exempel Djurs-ID väljer du en Bokför tjänst as GET /husdjur/{petId} och markera Djurs-ID i Indata -avsnitt.
6. Välj databindningar på menyn Utdata -avsnitt. Välj Djurnamn i Utdata -avsnitt.
7. Välj Default Error Handler från Felhanterare -avsnitt.
8. Klicka på Done.

Som ett resultat av den här regeln anger du värden för Djurs-ID kontrollerar validering för Djurnamn med en extern tjänst som anropas av REST-slutpunkten. Om valideringskriterierna som baseras på datakällan misslyckas, visas felmeddelandena på fältnivå.

Lägg till anpassad felhanterarfunktion

Du kan lägga till en anpassad felhanterarfunktion för att utföra några av åtgärderna:

• hantera felsvar som använder icke-standard- eller standardfelsvar. Observera att dessa felsvar som inte är standard inte följer standardschema för felsvar.
• skicka analyshändelser till alla analysplattformar. Exempel: Adobe Analytics.
• visa modal dialog med felmeddelanden.

Förutom de nämnda åtgärderna kan de anpassade felhanterarna användas för att utföra anpassade funktioner som uppfyller specifika användarkrav.

Den anpassade felhanteraren är en funktion (klientbibliotek) som är utformad för att svara på fel som returneras av en extern tjänst och leverera ett anpassat svar till slutanvändarna. Alla klientbibliotek med anteckningar @errorHandler betraktas som en anpassad felhanterarfunktion. Den här anteckningen hjälper till att identifiera felhanterarfunktionen som anges i .js -fil.
Så här skapar och använder du en anpassad felhanterare med Regelredigerarens anropstjänst åtgärd, låt oss ta ett exempel på Adaptiv form med två fält, Djurs-ID och Djurnamn och använda en anpassad felhanterare på Djurs-ID fält för att kontrollera olika fel som returneras av REST-slutpunkten som konfigurerats för att anropa en extern tjänst, till exempel 200 - OK,404 - Not Found, 400 - Bad Request.

Så här lägger du till och använder en anpassad felhanterare i ett adaptivt formulär:

1. Skapa en anpassad felhanterare
2. Använd regelredigeraren för att konfigurera en anpassad felhanterare

1. Skapa en anpassad felhanterare

Så här skapar du en anpassad felfunktion:

1. Klona din AEM Forms as a Cloud Service databas.

2. Skapa en mapp under [AEM Forms as a Cloud Service repository folder]/apps/ mapp. Skapa till exempel en mapp med namnet som experience-league

3. Navigera till [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/experience-league/ och skapa ClientLibraryFolder as clientlibs.

4. Skapa en mapp med namnet js.

5. Navigera till [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/clientlibs/js mapp.

6. Lägg till en JavaScript-fil, till exempel function.js. Filen innehåller koden för den anpassade felhanteraren.
   Låt oss lägga till följande kod i JavaScript-filen för att visa svar och rubriker som tagits emot från REST-tjänstens slutpunkt i webbläsarkonsolen.

       /**
       * Custom Error handler
       * @name customErrorHandler Custom Error Handler Function
       * @errorHandler
       */
       function customErrorHandler(response, headers)
       {
           console.log("Custom Error Handler processing start...");
           console.log("response:"+JSON.stringify(response));
           console.log("headers:"+JSON.stringify(headers));
           guidelib.dataIntegrationUtils.defaultErrorHandler(response, headers);
           console.log("Custom Error Handler processing end...");
       }
   

   Följande rad i exempelkoden används för att anropa standardfelhanteraren från din anpassade felhanterare:
   guidelib.dataIntegrationUtils.defaultErrorHandler(response, headers)

   OBSERVERA

   I .content.xml fil, lägga till allowProxy och categories egenskaper.

   • allowProxy = [Boolean]true
   • categories= customfunctionsdemo
     I det här fallet [custom-errorhandler-name] anges som customfunctionsdemo.

7. Spara function.js -fil.

8. Navigera till [AEM Forms as a Cloud Service repository folder]/apps/[AEM Project Folder]/clientlibs/js mapp.

9. Lägg till en textfil som js.txt. Filen innehåller:

       #base=js
       functions.js
   

10. Spara js.txt -fil.
    Den skapade mappstrukturen ser ut så här:

    

    OBSERVERA

    Om du vill veta mer om hur du skapar anpassade funktioner klickar du på anpassade funktioner i regelredigeraren.

11. Lägg till, implementera och skicka ändringarna i databasen med följande kommandon:

        git add .
        git commit -a -m "Adding error handling files"
        git push
    

12. Kör pipelinen.

När pipeline har körts blir den anpassade felhanteraren tillgänglig i regelredigeraren för adaptiva formulär. Nu ska vi förstå hur du konfigurerar och använder en anpassad felhanterare med hjälp av regelredigerarens Invoke-tjänst i AEM Forms.

2. Använd regelredigeraren för att konfigurera en anpassad felhanterare

Innan du implementerar den anpassade felhanteraren i ett adaptivt formulär måste du kontrollera att klientbibliotekets namn finns i Client Library Category justerar med namnet som anges i kategorialternativet i .content.xml -fil.

I det här fallet anges klientbiblioteksnamnet som customfunctionsdemo i .content.xml -fil.

Använda en anpassad felhanterare med Rule Editor’s Invoke Service åtgärd:

1. Öppna ett adaptivt formulär i redigeringsläge, markera en formulärkomponent och tryck på Rule Editor för att öppna regelredigeraren.
2. Tryck på Create.
3. Skapa ett villkor i När -delen av regeln. Till exempel När [Namn på Pet ID-fält] ändras, välj ändras från Välj läge listruta.
4. I Sedan avsnitt, markera Invoke Service från Välj åtgärd listruta.
5. Välj en Bokför tjänst och dess motsvarande databindningar från Indata -avsnitt. Validera till exempel Djurs-ID väljer du en Bokför tjänst as GET /husdjur/{petId} och markera Djurs-ID i Indata -avsnitt.
6. Välj databindningar på menyn Utdata -avsnitt. Välj till exempel Djurnamn i Utdata -avsnitt.
7. Välj Custom Error Handler från Error Handler -avsnitt.
8. Klicka på Done.

Som ett resultat av den här regeln anger du värden för Djurs-ID kontrollerar validering för Djurnamn med en extern tjänst som anropas av REST-slutpunkten. Om valideringskriterierna som baseras på datakällan misslyckas, visas felmeddelandena på fältnivå.

Öppna webbläsarkonsolen och kontrollera svaret och rubriken som tagits emot från REST-tjänstens slutpunkt för valideringsfelmeddelandet.

Den anpassade felhanterarfunktionen ansvarar för att utföra ytterligare åtgärder, som att visa en modal dialogruta eller skicka en analyshändelse, baserat på felsvaret. En anpassad felhanterarfunktion ger flexibilitet att anpassa felhanteringen efter specifika användarkrav.

Se även

• Skapa ett AEM anpassat formulär
• Lägg till ett AEM anpassat formulär på AEM Sites-sidan
• Använda teman i ett AEM anpassat formulär
• Lägga till komponenter i ett AEM adaptivt formulär
• Använd CAPTCHA i en AEM anpassad form
• Generera PDF-version (DoR) av ett AEM adaptivt formulär
• Översätt en AEM adaptiv form
• Aktivera Adobe Analytics för ett adaptivt formulär för att spåra formuläranvändning
• Ansluta anpassat formulär till Microsoft SharePoint
• Ansluta anpassat formulär till Microsoft Power Automate
• Ansluta anpassat formulär till Microsoft OneDrive
• Ansluta anpassat formulär till Microsoft Azure Blob Storage
• Ansluta anpassat formulär till Salesforce
• Använda Adobe Sign i en AEM anpassad form
• Lägga till en ny språkinställning för ett adaptivt formulär
• Skicka adaptiva formulärdata till en databas
• Skicka data för anpassat formulär till en REST-slutpunkt
• Skicka anpassade formulärdata till AEM arbetsflöde
• Använd Forms Portal för att lista AEM Adaptive Forms på en AEM webbplats
• Skapa och använda anpassade felhanterare i Adaptive Forms (Core Components)