DocumentatieAEMTutorials voor AEMTutorials voor AEM Forms

De JSON van het formulier ophalen

Laatst bijgewerkt: 24 maart 2025
  • Van toepassing op:
  • Experience Manager 6.5
  • Onderwerpen:
  • Adaptieve formulieren

Gemaakt voor:

  • tussenpersoon
  • Gebruiker

Login aan uw de auteurinstantie van AEM Forms en creeer een nieuwe adaptief gebruikend Leeg met het malplaatje van de Componenten van de Kern. Publiceer het formulier naar uw publicatie-exemplaar.

Als u het formulier wilt insluiten, haalt u eerst de json van het adaptieve formulier op door een get call uit te voeren met onze publicatieserver.

Het volgende codefragment haalt de json van de adaptieve vorm genoemd contactus

const getForm = async () => {

        const resp = await fetch('/adobe/forms/af/L2NvbnRlbnQvZm9ybXMvYWYvZmlyc3RoZWFkbGVzcw==');
        // Get the form id manually using the listform api
        let formJSON = await resp.json();
        console.log("The contact form json is "+formJSON);
        setForm(formJSON.afModelDefinition)
      }

De volledige code van de component Contactfunctie wordt hieronder gegeven

import Form from './components/Form';
import PlainText from './components/plainText';
import TextField from './components/TextField';
import Button from './components/Button';
import Panel from './components/Panel';
import { useState,useEffect } from "react";
import { AdaptiveForm } from "@aemforms/af-react-renderer";

export default function Contact(){
   const [selectedForm, setForm] = useState("");
   const extendMappings = {
        'plain-text' : PlainText,
        'text-input' : TextField,
        'button' : Button,
        'form': Form
      };
    const getForm = async () => {

        const resp = await fetch('/adobe/forms/af/dor/L2NvbnRlbnQvZm9ybXMvYWYvcmlzaGk=');
        let formJSON = await resp.json();
        setForm(formJSON.afModelDefinition)

      }
      useEffect( ()=>{
        getForm();


    },[]);
    return(

        <div>
            <h1>Get in touch with us!!!!</h1>
            <AdaptiveForm mappings={extendMappings} formJson={selectedForm} />


        </div>
    )
}

De bovenstaande code gebruikt native HTML-componenten die zijn toegewezen aan de componenten die in het adaptieve formulier worden gebruikt. We wijzen bijvoorbeeld de adaptieve formuliercomponent voor tekstinvoer toe aan de component TextField. De inheemse componenten die in het artikel worden gebruikt kunnen van hier worden gedownload

Volgende stappen

Een formulier selecteren in de vervolgkeuzelijst

recommendation-more-help
8de24117-1378-413c-a581-01e660b7163e