Hur Headless adaptive form fungerar?
Ett Headless adaptive form är en JSON-struktur (schema) som består av formulärfält (textruta, alternativ och många fler fält) och motsvarande regler (villkorslogik) för att lägga till interaktivt beteende i formuläret. Du kan använda REST API:er i ditt program eller på din webbplats för att begära den värdbaserade JSON-strukturen och återge JSON-strukturen som ett formulär i din app eller på din webbplats. Ett enda formulär utan Headless-funktioner kan hantera flera webbsidor och applikationer utan att göra några app- eller webbplatsspecifika ändringar i det.
Arkitektur architecture
En typisk Headless adaptive forms architecture centrerar sig på en Adobe Experience Manager Forms Server som är värd för Headless adaptive forms. Front-end-appar - webb, mobil, JavaScript, chattbots med mera - renderar formulären för varje kanal.
Den typiska arkitekturen för en Headless-driftsättning av adaptiva formulär ser ut så här:
Komponent i implementering av Headless-anpassade formulär
Adobe Experience Manager Server: Tillsammans med att fungera som värd för Headless-adaptiva formulär erbjuder Adobe Experience Manager följande backend-funktioner:
- RESTful API:er för att lista, hämta, förifylla, validera, skicka och spåra status för headless-formulär.
- Visuell redigerare för att enkelt utveckla ett Headless-anpassat formulär.
- Forms datamodell för att ta emot eller skicka data till olika datakällor.
- En arbetsflödesmotor som automatiserar komplexa uppgifter.
Headless adaptive forms: En Headless adaptive-form representeras som en .json-fil. JSON-strukturen definierar komponenter, begränsningar och struktur i ett formulär.
Front-end-appar: Front-end-appar som SPA (Single Page Applications), Mobile Apps, JavaScript Apps, använder Headless-anpassade formulär (JSON Form Representation) och återger formuläret på en klient. Du kan använda React Renderer-komponenten som levereras med Headless adaptive-formulär för att återge ett adaptivt formulär eller skapa en egen anpassad komponent för att återge Headless adaptive-formulär internt.
Utvecklarverktyg
I en typisk utvecklingscykel börjar du med att skapa och använda Headless-anpassade formulär på Adobe Experience Manager Forms Server. I det andra steget mappar du dina UI-komponenter eller använder ett offentligt UI-komponentbibliotek, som Google Material UI eller Chakra UI för att utforma formulären. I det sista steget hämtar och visar du formulär utan Headless-funktioner i programmet (webbplats, mobilprogram, JavaScript-appar, chattprogram eller många andra ytor).
Följande verktyg hjälper dig att skapa och integrera Headless-formulär i dina program:
Forms Web SDK (Client-Side Runtime): Forms Web SDK är ett klientbibliotek för JavaScript. Det gör att du kan använda validering på klientsidan på formulärfält, behålla formulärets status och tillhandahåller kopplingar för att ansluta formulär med UI-lager eller adaptiva formuläråtergivna komponenter. Det gör det möjligt för kunder att validera begränsningar som tillämpas på olika fält i ett formulär och att ansluta formulärets JSON-struktur till gränssnittets ramverk. Forms Web SDK har följande komponenter:
- Affärsregelprocessor: Affärsregelprocessorn accepterar formulärets JSON-struktur som indata, hanterar tillståndet för formulärfälten, kör regler och händelsehanterare som finns i JSON.
- Reagera binder: Tillhandahåller hookar över kontrollenhet för att lägga till tillstånd i Form Components. Det är också användbart när du ska fylla i ett formulär i förväg.
- Komponentbibliotek: Den innehåller React Spectrum-komponenter och använder kopplingar i React Binder-modulen för att lägga till tillstånd i dessa komponenter.
Förutom att tillhandahålla API:er för att validera begränsningar som tillämpas på olika fält i ett formulär, tillhandahåller Forms Web SDK kopplingar för att ansluta Headless-anpassade formulär till gränssnittets ramverk. Den har även en React-renderare för Headless-formulär som hjälper dig att integrera ett Headless-formulär i programmet. Följande komponenter i Web SDK är tillgängliga:
Alla dessa komponenter ingår i AEM Archetype. När du skapar ett AEM Archetype 37- eller senare-projekt för Headless-formulär ingår den senaste versionen av ovanstående bibliotek i projektet.
- Kodspelaren: Kodspelarmiljön är en interaktiv miljö som är utformad för utvecklare att experimentera med, lära sig om och testa funktionerna i Headless adaptive Forms.
Startat program: Adobe har också släppt ett startprogram som hjälper dig att snabbt komma igång med Headless-anpassade formulär.
Storybook: Storybook innehåller en översikt över olika komponenter i Headless-anpassade formulär. Den innehåller också en lista över alla komponenter som stöds, deras motsvarande egenskaper och begränsningar.
Visual Studio Code Extension: Visual Studio Code extension för att skapa en giltig JSON-struktur. Den har IntelliSense-stöd och -validering för JSON-formulärstruktur tillsammans med vanliga funktioner som att lägga till, ta bort eller byta namn på komponenter i en JSON-struktur.
HTTP- och JavaScript-API:er: HTTP-API:er gör att du kan visa, hämta, validera, skicka och spåra status för headless-formulär.
JSON-formel: Det är en implementering av formuläruttrycksgrammatik som hjälper dig att fråga efter JSON-struktur och skapa regler för Headless-adaptiva formulär. Grammatiken är en kombination av kalkylbladsliknande funktioner och operatorer och JMESPath är ett JSON-frågespråk. Du kan använda playground för att utforska JSON-formelsyntax och -funktioner.
Specifikationer för Adaptiv Forms version 2.0: Specifikationen Adaptiv Forms version 2.0 innehåller detaljerad information om alla komponenter, begränsningar och metoder som finns för att definiera adaptiva formulär utan Headless. Specifikationen är tillgänglig i formatet PDF.