Skapa ett adaptivt formulär

Senaste uppdatering: 2023-12-05
  • Skapat för:
  • Beginner
    User
    Developer
Version Artikellänk
AEM 6.5 Klicka här
AEM as a Cloud Service Den här artikeln

Med anpassningsbara Forms kan du skapa engagerande, responsiva, dynamiska och anpassningsbara formulär. AEM Forms har en användarvänlig guide för att snabbt skapa Adaptiv Forms. Guiden har en snabb fliknavigering där du enkelt kan välja förkonfigurerade mallar, format, fält och alternativ för att skicka formulär för att skapa ett adaptivt 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 komponenter för datainhämtning. 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) komponenter för datainhämtning. Du kan fortsätta att använda dessa för att redigera dina befintliga grundläggande komponentbaserade adaptiva formulär. Om du skapar nya formulär rekommenderar Adobe att du använder Adaptiva Forms Core-komponenter för att skapa en adaptiv Forms.

Guide för att skapa ett adaptivt formulär

Krav

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

  • Aktivera adaptiva Forms Core-komponenter för din miljö: När du skapar ett program är de adaptiva Forms Core-komponenterna redan aktiverade för din miljö. Om du har en as a Cloud Service Forms-miljö baserad på Archetype 39 eller tidigare, Aktivera adaptiva Forms Core-komponenter för din miljö. När du aktiverar kärnkomponenterna för din miljö, Adaptiv Forms (kärnkomponent) mall- och arbetsytetemat läggs till i din miljö. Om din AEM SDK-version är äldre än 2023.02.0, se till att du har prerelease flagga aktiverad i din miljö som adaptiva Forms Core Components ingick i förleasingen före version 2023.02.0.

  • En adaptiv formulärmall: 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 till exempel skicka insamlade data till en datakälla. Molntjänsten tillhandahåller en OOTB-mall med namnet blank:

    • The blank -mallar ingår i alla nya as a Cloud Service AEM Forms-program.
    • Du kan installera referenspaketet via Package Manager för att lägga till blank till ditt as a Cloud Service AEM Forms-program.
    • Du kan också skapa en adaptiv Forms-mall (kärnkomponenter) från scratch.
    • Du kan också distribuera exempelmallar i din miljö. Med dessa kan du snabbt börja skapa formulär.
  • 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. The Canvas -mallar ingår i alla nya as a Cloud Service AEM Forms-program. Du kan också distribuera exempelteman i 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 forms-users grupp. Medlemmarna i forms-users gruppen har behörighet att skapa ett adaptivt formulär. En detaljerad lista över formulärspecifika användargrupper finns i Grupper och behörigheter.

Skapa ett adaptivt formulär

  1. Logga in på Experience Manager Forms Författarinstans. Det kan vara en molninstans eller en lokal utvecklingsinstans.

  2. Ange dina uppgifter på inloggningssidan för Experience Manager. När du är inloggad väljer du Adobe Experience Manager > Forms > Forms & Documents.

  3. Välj Create > Adaptive Forms. Guiden öppnas. Välj en mall på fliken Källa:

    Kärnkomponentmall

    När du väljer en mall väljs automatiskt ett tema och en skicka-åtgärd som anges i mallen, och Create knappen är aktiverad. Du kan gå till Style eller Submission för att välja ett annat tema eller skicka-åtgärd. Om den valda mallen inte anger något tema förblir knappen Skapa inaktiverad. Du kan gå till Styles om du vill välja ett tema manuellt.

    OBSERVERA

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

  4. I Style väljer du ett tema:

    • När den valda mallen anger ett tema väljs temat automatiskt i guiden. Du kan också välja ett annat tema på fliken Format.

    • Om den valda mallen inte anger något tema kan du använda fliken Format för att välja ett tema. The Create knappen aktiveras först när ett tema har valts.

  5. (Valfritt) Välj en datamodell på fliken Data:

    • Formulärdatamodell: A Formulärdatamodell Med kan ni integrera enheter och tjänster från olika datakällor i ett adaptivt formulär. Välj Formulärdatamodell om det adaptiva formulär du skapar inbegriper att hämta och skriva data från och till flera datakällor.

    • JSON-schema: JSON-schema Vår Core-Components-baserade adaptiva form möjliggör smidig integrering med företagets back-end-system genom att ge möjlighet att associera ett JSON-schema, som representerar strukturen för de data som produceras eller konsumeras. Den här kopplingen gör det möjligt för författare att dynamiskt lägga till innehåll i det adaptiva formuläret med elementen i schemat. Elementen i schemat är enkelt tillgängliga på fliken Datamodellsobjekt i innehållsläsaren under redigeringsprocessen, och alla fält läggs automatiskt till i alla skapade adaptiva formulär.

    Som standard markeras alla fält i det associerade JSON-schemat automatiskt och konverteras till motsvarande adaptiva formulärkomponenter, vilket effektiviserar redigeringsprocessen. I guiden kan du välja vilka fält som ska inkluderas i det anpassade formuläret med hjälp av kryssrutor.

  6. I Submission väljer du en Skicka-åtgärd:

    • När du väljer en mall markeras åtgärden Skicka som anges i mallen automatiskt. Du kan välja en annan skickaåtgärd på fliken Skicka. The ​ Submission på -fliken visas alla tillgängliga skicka-åtgärder.

    • När den valda mallen inte anger någon skicka-åtgärd kan du använda Submission flik för att välja en skicka-åtgärd

  7. (Valfritt) I dialogrutan Delivery kan du ange ett publicerings- eller avpubliceringsdatum för ett adaptivt formulär.

  8. Välj Create. En dialogruta där du kan ange namn, namn och plats för att spara det adaptiva formuläret visas:

    • Title Anger formulärets visningsnamn. Titeln hjälper dig att identifiera formuläret i Experience Manager Forms användargränssnitt.
    • 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. Alla ogiltiga indata ersätts med ett bindestreck.
    • Path: Anger platsen där det adaptiva formuläret ska sparas. Du kan spara det anpassade formuläret direkt på /content/dam/formsanddocuments eller skapa en mapp som /content/dam/formsanddocuments/adaptiveforms för att spara ett adaptivt formulär. Se till att du skapar mappen innan du använder den i sökvägen. The Path skapas ingen mapp automatiskt.
  9. Välj Create. Ett adaptivt formulär skapas och öppnas i den adaptiva Forms-redigeraren. Redigeraren visar det innehåll som är tillgängligt i mallen. Baserat på typen av adaptiv form finns formulärelementen i den associerade JSON-schema eller formulärdatamodell visas i Data Model Objects -fliken i Content Browser i sidlisten. Du kan också dra och släppa dessa element för att skapa ett anpassat formulär.

Nu kan du dra och släppa Adaptiva Forms Core-komponenter till Adaptiv Forms-behållare för att utforma och skapa formuläret. Du kan också 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

Med en Skicka-åtgärd kan du välja målet för data som har hämtats via 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:

  1. Öppna innehållsläsaren och välj Guide Container som ingår i det adaptiva formuläret.

  2. Klicka på egenskaperna för stödlinjebehållaren Stödlinjeegenskaper -ikon. Dialogrutan Adaptiv formulärbehållare öppnas.

  3. Klicka på Submission -fliken.

    Klicka på skiftningsikonen för att öppna dialogrutan Adaptiv formulärbehållare och konfigurera en sändningsåtgärd

  4. Välj och konfigurera en Submit action, baserat på era behov. Mer information om Skicka åtgärder finns i Inlämningsåtgärd för 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:

  1. Öppna innehållsläsaren och välj Guide Container som ingår i det adaptiva formuläret.

  2. Klicka på egenskaperna för stödlinjebehållaren Stödlinjeegenskaper -ikon. Dialogrutan Adaptiv formulärbehållare öppnas.

  3. Öppna Submission -fliken.

    Klicka på ikonen för skiftnyckel för att öppna dialogrutan Adaptiv formulärbehållare för att konfigurera en omdirigeringssida eller ett tack för ditt meddelande

    • Om du vill konfigurera en omdirigerings-URL för alternativet Skicka väljer du Redirect to URL och bläddra och markera en AEM Sites-sida, eller ange en URL-adress för en extern sida.

    • Om du vill konfigurera ett anpassat meddelande eller ett tackmeddelande väljer du alternativet Skicka i Show Message och skriv ett meddelande i Message content box. 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

Du kan använda formulärdatamodellen för att ansluta ett formulär till en datakälla 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:

  1. Öppna innehållsläsaren och välj Guide Container som ingår i det adaptiva formuläret.

  2. Klicka på egenskaperna för stödlinjebehållaren Stödlinjeegenskaper -ikon. Dialogrutan Adaptiv formulärbehållare öppnas.

  3. Öppna Data Model -fliken.

    Klicka på ikonen för skiftnyckel för att öppna dialogrutan Adaptiv formulärbehållare för att konfigurera ett JSON-schema eller en formulärdatamodell

  4. Välj och konfigurera ett JSON-schema eller en formulärdatamodell utifrån dina krav:

    • När du väljer Form Model -alternativ, använd Select Form Data Model för att välja en förkonfigurerad formulärdatamodell.
    • När du väljer Schema -alternativ, använd Schema för att välja ett JSON-schema för formuläret.
  5. Klicka på Done.

Konfigurera en förifyllningstjänst

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

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örifyllnad av formulärdatamodell använder Hämta tjänst för konfigurerad formulärdatamodell 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:

  1. Öppna innehållsläsaren och välj Guide Container som ingår i det adaptiva formuläret.
  2. Klicka på egenskaperna för stödlinjebehållaren Stödlinjeegenskaper -ikon. Dialogrutan Adaptiv formulärbehållare öppnas.
  3. Klicka på egenskaperna för den adaptiva formulärbehållaren Egenskaper för adaptiv formulärbehållare -ikon. Dialogrutan Adaptiv formulärbehållare öppnas för att konfigurera datamodeller.
    Klicka på ikonen för skiftnyckel för att öppna dialogrutan Adaptiv formulärbehållare för att konfigurera en omdirigeringssida eller ett tack för ditt meddelande
  4. Välj en formulärdatamodell. Öppna Basic -fliken. I förifyllningstjänsten väljer du Form Data Model Prefill Service.
  5. Klicka på Done. Ditt adaptiva formulär har nu konfigurerats för att använda förifyllning av formulärdatamodell. Nu kan du använda regelredigerare om du vill skapa regler för förifyllning av formulärfält.

Redigera formulärmodellegenskaper för ett adaptivt formulär

  1. Markera det adaptiva formuläret och välj Sidinformation > Open Properties. Sidan Formuläregenskaper öppnas.

  2. Gå till Form Model och välj en formulärmodell. Om det adaptiva formuläret inte har någon formulärmodell kan du välja antingen ett JSON-schema eller en formulärdatamodell. Om det adaptiva formuläret däremot redan är baserat på en formulärmodell kan du växla till en annan formulärmodell av samma typ. Om formuläret till exempel använder ett JSON-schema kan du enkelt växla till ett annat JSON-schema, och på samma sätt kan du växla till en annan formulärdatamodell om formuläret använder en formulärdatamodell.

  3. Välj Save för att spara egenskaperna.

Se även

På denna sida