Skapa grundkomponenter baserade på adaptiva Forms creating-an-adaptive-form-core-components

Last update: Sat Jul 13 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Ämnen:

Skapat för:

Administratör
Utvecklare

Adobe rekommenderar att du använder kärnkomponenter för att lägga till adaptiv Forms på en AEM Sites-sidaeller för att skapa fristående adaptiv Forms.

Version

Artikellänk

AEM as a Cloud Service

Klicka här

AEM 6.5

Denna artikel

Med anpassningsbara Forms kan du skapa engagerande, responsiva, dynamiska och anpassningsbara formulär. AEM Forms har ett användarvänligt gränssnitt för att snabbt skapa adaptiva Forms. Användargränssnittet erbjuder snabb tabbnavigering så att du enkelt kan välja förkonfigurerade mallar, format, fält och alternativ för att skicka formulär för att skapa ett anpassat formulär.

Innan du börjar får du lära dig mer om vilken typ av Forms-komponenter du kan använda:

Adaptiva Forms Core-komponenter: Dessa är standardiserade datainhämtningskomponenter. Dessa komponenter har anpassningsmöjligheter, kortare utvecklingstid och lägre underhållskostnader för era digitala registreringsupplevelser. En utvecklare kan enkelt anpassa och utforma dessa komponenter. Adobe rekommenderar att du använder dessa moderna och utbyggbara komponenter för att utveckla Adaptiv Forms.
Adaptiva Forms Foundation-komponenter: Dessa är klassiska (gamla) datainhämtningskomponenter. Du kan fortsätta att använda dessa för att redigera dina befintliga grundläggande komponentbaserade adaptiva formulär. Om du skapar formulär rekommenderar Adobe att du använder adaptiva Forms Core-komponenter för att skapa en adaptiv Forms.

Krav

Du behöver följande för att skapa ett adaptivt formulär:

Aktivera adaptiva Forms Core-komponenter för din miljö: AEM Archetype-projektversion 41 eller senare krävs för att aktivera kärnkomponenter för din miljö. När du aktiverar Core Components för din miljö läggs mallen Adaptive Forms (Core Component) och Canvas-temat till i din miljö.

En mall för adaptiva formulär: En mall innehåller en grundläggande struktur och definierar utseendet (layouter och format) för ett adaptivt formulär. Den har förformaterade komponenter som innehåller vissa egenskaper och innehållsstruktur. Här finns också alternativ för att definiera ett tema och en skicka-åtgärd. Temat definierar utseendet, känslan och skickaåtgärden definierar vilken åtgärd som ska vidtas när ett adaptivt formulär skickas in. Du kan också distribuera exempelmallar till din miljö. Med dessa kan du snabbt börja skapa formulär.

note note
NOTE
Om du inte har det, Adaptiv Forms-mall (Core Component) i din miljö, Aktivera adaptiva Forms Core-komponenter för din miljö. När du aktiverar kärnkomponenterna för din miljö läggs mallen Adaptive Forms (Core Component) till i din miljö.

Ett adaptivt formulärtema: Ett tema innehåller formatinformation för komponenterna och panelerna. Format innehåller egenskaper som bakgrundsfärger, lägesfärger, genomskinlighet, justering och storlek. När du använder ett tema återspeglas det angivna formatet i motsvarande komponenter. Temat Canvas läggs till som standard när du aktiverar kärnkomponenter för din miljö. Du kan hämta och anpassa standardteman. För av-teman kan du distribuera exempelteman till din miljö. Dessa hjälper dig att börja utforma formulären och skapa en grundstruktur för att skapa eller anpassa ett tema efter företagets behov.
Behörigheter: Lägg till dina användare i gruppen forms-users. Medlemmarna i gruppen forms-users har behörighet att skapa ett anpassat formulär. En detaljerad lista över formulärspecifika användargrupper finns i Grupper och behörigheter.

Skapa ett adaptivt formulär create-an-adaptive-form

Logga in på din lokala AEM författarinstans.
Ange dina uppgifter på inloggningssidan för Experience Manager. När du är inloggad väljer du Adobe Experience Manager > Forms > Forms & Documents i det övre vänstra hörnet.
Välj Create > Create Adaptive Forms.
Välj en anpassad Forms Core Components-mall och klicka på Next.
Add Properties visas. Ange värdena för följande egenskapsfält. Fälten Titel och Namn är obligatoriska:
- Title: Anger formulärets visningsnamn. Titeln hjälper dig att identifiera formuläret i användargränssnittet för Experience Manager Forms.
- Name: Anger formulärets namn. En nod med det angivna namnet skapas i databasen. När du börjar skriva en titel genereras värdet för namnfältet automatiskt. Du kan ändra det föreslagna värdet. Namnfältet får endast innehålla alfanumeriska tecken, bindestreck och understreck.
- Description: Anger detaljerad information om formuläret.
- Theme Client Library: Anger temat för ett adaptivt formulär. Som standard är temat adaptiveform.theme.canvas3 valt. Du kan också välja ett annat tema i listrutan Theme Client Library.
- Configuration Container: Definierar en plats där konfigurationsfiler för Adaptive Forms lagras. Dessa konfigurationsfiler innehåller inställningar och egenskaper som är relaterade till beteendet och utseendet för Adaptive Forms.
- Tags: Anger taggar som unikt identifierar det adaptiva formuläret. Taggar hjälper dig att söka i formuläret. Om du vill skapa taggar skriver du nya taggnamn i rutan Tags.
Välj Create. Ett anpassat formulär skapas och en dialogruta öppnas där du kan öppna formuläret för redigering.
Välj Edit om du vill öppna det nya formuläret på en ny flik. Formuläret öppnas för redigering och visar det innehåll som är tillgängligt i mallen. Här visas också sidofältet för att anpassa det nya formuläret.

Använd adaptiva Forms Core-komponenter för att skapa ditt formulär

När du har öppnat formuläret för redigering kan du använda tillgängliga adaptiva Forms Core-komponenter för att lägga till formulärfält i formuläret. Du kan dra och släppa eller använda alternativet + [insert component] för att lägga till dessa komponenter i ett formulär. Läs AEM Core Components-dokumentationen om du vill veta mer om tillgängliga adaptiva Forms Core-komponenter. Du kan även besöka https://aemcomponents.dev/ för att se hur de tillgängliga kärnkomponenterna fungerar i praktiken.

Konfigurera åtgärden Skicka för ett anpassat formulär configure-submit-action-for-form

Med en Skicka-åtgärd kan du välja målet för data som har hämtats med ett anpassat formulär. Den aktiveras när en användare klickar på knappen Skicka på ett anpassat formulär. Anpassade formulär innehåller några av de åtgärder som har vidtagits för att skicka in. Du kan också utöka en standardåtgärd för att skicka för att skapa en egen anpassad åtgärd. Så här konfigurerar du en Skicka-åtgärd för formuläret:

Öppna innehållsläsaren och markera komponenten Guide Container i det adaptiva formuläret.
Klicka på ikonen för egenskaper för stödlinjebehållaren . Dialogrutan Adaptiv formulärbehållare öppnas.
Klicka på fliken Submission.
Välj och konfigurera en Submit action utifrån dina krav. Mer information om Skicka-åtgärder finns i Åtgärden Skicka anpassat formulär

Dirigera om användaren till en sida eller visa ett tackmeddelande när formuläret skickas

När du skickar ett formulär kan du dirigera om användaren till en annan webbsida eller ett meddelande. Så här omdirigerar du användaren eller konfigurerar tackmeddelandet:

Öppna innehållsläsaren och markera komponenten Guide Container i det adaptiva formuläret.
Klicka på ikonen för egenskaper för stödlinjebehållaren . Dialogrutan Adaptiv formulärbehållare öppnas.
Öppna fliken Submission.
- Om du vill konfigurera en omdirigerings-URL, för alternativet Skicka, markerar du alternativet Redirect to URL och bläddrar och väljer en AEM Sites-sida, eller anger en URL för en extern sida.
- Om du vill konfigurera ett anpassat meddelande eller ett tackmeddelande för alternativet Skicka markerar du alternativet Show Message och anger ett meddelande i rutan Message content. Det är en RTF-ruta som du kan använda helskärmsalternativet för att visa alla tillgängliga RTF-objekt.

Konfigurera ett schema eller en formulärdatamodell för ett anpassat formulär configure-schema-or-data-model-for-form

Du kan använda formulärdatamodellen för att ansluta ett formulär till en Data Source för att skicka och ta emot data baserat på användaråtgärder. Du kan också ansluta ett formulär till ett JSON-schema för att ta emot skickade data i ett fördefinierat format. Beroende på vad som krävs kan du ansluta formuläret till ett JSON-schema eller en formulärdatamodell:

Konfigurera ett JSON-schema eller en formulärdatamodell för formuläret

Så här konfigurerar du ett JSON-schema eller en formulärdatamodell för formuläret:

Öppna innehållsläsaren och markera komponenten Guide Container i det adaptiva formuläret.
Klicka på ikonen för egenskaper för stödlinjebehållaren . Dialogrutan Adaptiv formulärbehållare öppnas.
Öppna fliken Data Model.
Välj och konfigurera ett JSON-schema eller en formulärdatamodell utifrån dina krav:
- När du väljer alternativet Form Model använder du alternativet Select Form Data Model för att välja en förkonfigurerad formulärdatamodell.
- När du väljer alternativet Schema använder du alternativet Schema för att välja ett JSON-schema för formuläret.
Klicka på Done.

NOTE

Du kan redigera JSON-schemat eller formulärdatamodellen för ett adaptivt formulär med hjälp av egenskaperna för Guide Container.

Konfigurera en förifyllningstjänst configure-prefill-service-for-form

Du kan använda förifyllningstjänsten för att autofylla fält i ett adaptivt formulär med befintliga data. När en användare öppnar ett formulär är värdena för dessa fält förifyllda. Du kan:

Använd förifyllningstjänsten för formulärdatamodell för att fylla i fält i ett adaptivt formulär i förväg fdm-prefill-service

Du kan använda förifyllningstjänsten för formulärdatamodell för att fylla i fält i ett adaptivt formulär i förväg med hjälp av en formulärdatamodell eller en anpassad förifyllningstjänst. Tjänsten för förifyllning av formulärdatamodell använder tjänsten Hämta tjänst för den konfigurerade formulärdatamodellen för att hämta data. Så här använder du förifyllningstjänsten för formulärdatamodell för ett adaptivt formulär:

Öppna innehållsläsaren och markera komponenten Guide Container i det adaptiva formuläret.
Klicka på ikonen för egenskaper för stödlinjebehållaren . Dialogrutan Adaptiv formulärbehållare öppnas.
Klicka på ikonen för den adaptiva formulärbehållaren . Dialogrutan Adaptiv formulärbehållare öppnas för att konfigurera datamodeller.
Välj en formulärdatamodell. Öppna fliken Basic. Välj Form Data Model Prefill Service i förifyllningstjänsten.
Klicka på Done. Ditt adaptiva formulär har nu konfigurerats för att använda förifyllning av formulärdatamodell. Du kan nu använda regelredigeraren för att skapa regler för att fylla i formulärfält i förväg.