Der folgende Code wurde verwendet, um das Formular anzuzeigen, wenn der Benutzer auf eine Karte klickt. Der Pfad des anzuzeigenden Formulars wird mithilfe der Funktion useParams aus der URL extrahiert.
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 {Link, useParams} from 'react-router-dom';
import { AdaptiveForm } from "@aemforms/af-react-renderer";
export default function DisplayForm()
{
const [selectedForm, setForm] = useState("");
const params = useParams();
const extendMappings =
{
'plain-text' : PlainText,
'text-input' : TextField,
'button' : Button,
'form': Form
};
const getAFForm = async () =>
{
const resp = await fetch(`/adobe/forms/af/${params.formID}`);
let formJSON = await resp.json();
console.log("The contact form json is "+formJSON);
setForm(formJSON.afModelDefinition)
}
useEffect( ()=>{
getAFForm()
},[]);
return(
<div>
<AdaptiveForm mappings={extendMappings} formJson={selectedForm}/>
</div>
)
}