Select a form to fill from a drop-down list
Dropdown lists provide a compact and organized way to present a list of options to users. The items in the drop down list will be populated with the results of listforms API
Drop-Down List
The following code was used to populate the drop-down list with the results of the listforms API call. Based on the user selection, the adaptive form is displayed for the user to fill out and submit. Material UI components have been used in creating this interface
import * as React from 'react';
import Form from './components/Form';
import PlainText from './components/plainText';
import TextField from './components/TextField';
import Button from './components/Button';
import Box from '@mui/material/Box';
import InputLabel from '@mui/material/InputLabel';
import MenuItem from '@mui/material/MenuItem';
import FormControl from '@mui/material/FormControl';
import Select, { SelectChangeEvent } from '@mui/material/Select';
import { AdaptiveForm } from "@aemforms/af-react-renderer";
import { useState,useEffect } from "react";
export default function SelectFormFromDropDownList()
{
const extendMappings =
{
'plain-text' : PlainText,
'text-input' : TextField,
'button' : Button,
'form': Form
};
const[formID, setFormID] = useState('');
const[afForms,SetOptions] = useState([]);
const [selectedForm, setForm] = useState('');
const HandleChange = (event) =>
{
console.log("The form id is "+event.target.value)
setFormID(event.target.value)
};
const getForm = async () =>
{
console.log("The formID in getForm"+ formID);
const resp = await fetch(`/adobe/forms/af/${formID}`);
let formJSON = await resp.json();
console.log(formJSON.afModelDefinition);
setForm(formJSON.afModelDefinition);
}
const getAFForms =async()=>
{
const response = await fetch("/adobe/forms/af/listforms")
//let myresp = await response.status;
let myForms = await response.json();
console.log("Got response"+myForms.items[0].title);
console.log(myForms.items)
//setFormID('test');
SetOptions(myForms.items)
}
useEffect( ()=>{
getAFForms()
},[]);
useEffect( ()=>{
getForm()
},[formID]);
return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">Please select the form</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
value={formID}
label="Please select a form"
onChange={HandleChange}
>
{afForms.map((afForm,index) => (
<MenuItem key={index} value={afForm.id}>{afForm.title}</MenuItem>
))}
</Select>
</FormControl>
<div><AdaptiveForm mappings={extendMappings} formJson={selectedForm}/></div>
</Box>
);
}
The following two API calls were used in creating this user interface
-
ListForm. The call to fetch the forms is made only once when the component is rendered. The results of the API call is stored in the afForms variable.
In the above code, we iterate through the afForms using the map function and for every item in the afForms array, a MenuItem component is created and added to the Select component. -
Fetch Form - A get call is made to the getForm, where the id is the id of the selected adaptive form by the user in the drop-down list. The result of this GET call is stored in selectedForm.
const resp = await fetch(`/adobe/forms/af/${formID}`);
let formJSON = await resp.json();
console.log(formJSON.afModelDefinition);
setForm(formJSON.afModelDefinition);
- Display the selected form. The following code was used to display the selected form. The AdaptiveForm element is provided in the aemforms/af-react-renderer npm package and it expects the mappings and the formJson as its properties
<div><AdaptiveForm mappings={extendMappings} formJson={selectedForm}/></div>
Next Steps
Display the forms in card layout