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: Förutom att vara värd för Headless adaptive forms har 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-anpassningsbar 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 adaptive-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-adaptiva formulär. För användning av inbyggda mobilformulär och offlineformulär rekommenderar vi att du bygger din egen app och hämtar formulärdefinitioner via API:t. se Bästa praxis för mobilformulär.
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 (klientkörningsmiljö): Forms Web SDK är ett JavaScript-bibliotek på klientsidan. 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 formulärfältens tillstånd, kör regler och händelsehanterare som finns i JSON.
- Reagera binder: Tillhandahåller kopplingar ö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.
- Kodspelargrund: Kodspelarmiljön är en interaktiv miljö som designats för att utvecklare ska kunna experimentera med, lära sig om och testa funktionerna i Headless Adaptive Forms.
Startade program: Adobe har också släppt en startad applikation som hjälper dig att snabbt komma igång med Headless-anpassade blanketter.
Storybook: Storybook innehåller en översikt över olika komponenter i Headless-anpassade former. Den innehåller också en lista över alla komponenter som stöds, deras motsvarande egenskaper och begränsningar.
Visual Studio-kodtillägg: 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: Med HTTP-API:er kan du lista, hämta, validera, skicka och spåra status för headless-formulär.
JSON-formel: Det är en implementering av grammatik för formuläruttryck som hjälper dig att fråga efter JSON-struktur och skapa regler för Headless-anpassade 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 Adaptive Forms version 2.0 innehåller detaljerad information om alla komponenter, begränsningar och metoder som finns för att definiera Headless-anpassade formulär. Specifikationen är tillgänglig i formatet PDF.