Page Builder Runtime
Forms & uploads
Build Formik and Yup forms in Page Builder runtime code, including multipart PUT /jql uploads.
The Page Builder runtime includes Formik, Yup, Antly input components, field renderers, and multipart upload helpers. Use them when a custom page needs to create or update Antly data without leaving the builder.
Formik and Yup
jsx
1function LeadForm() {
2 const [createLead, { loading }] = useJqlMutation({
3 meta: {
4 namespace: "objects.Record",
5 authenticationClass: "jwt",
6 return: { id: null, data: null }
7 },
8 intent: "create"
9 });
10
11 return (
12 <Formik
13 initialValues={{ name: "", email: "" }}
14 validationSchema={Yup.object({
15 name: Yup.string().required("Name is required"),
16 email: Yup.string().email().required("Email is required")
17 })}
18 onSubmit={values =>
19 createLead({
20 object: 42,
21 data: values
22 })
23 }
24 >
25 {({ handleSubmit }) => (
26 <Form onSubmit={handleSubmit} className="space-y-4">
27 <TextField name="name" label="Name" />
28 <TextField name="email" label="Email" />
29 <button disabled={loading} type="submit">Create lead</button>
30 </Form>
31 )}
32 </Formik>
33 );
34}Multipart uploads
When a mutation has files, useJqlMutation sends PUT /jql with multipart/form-data. Files are attached to FormData, and the JSON JQL payload is sent in the query field. The hook adds:
json
1{
2 "__meta__": {
3 "sideEffects": {
4 "multipartFormUpload": true,
5 "fileFieldMapping": {
6 "attachment": "attachment"
7 }
8 }
9 }
10}Use MultipartFormProvider when fields collect files through runtime input components:
jsx
1function UploadEvidence({ recordId }) {
2 const [updateRecord] = useJqlMutation({
3 meta: {
4 namespace: "objects.Record",
5 authenticationClass: "jwt",
6 sideEffects: { multipartFormUpload: true },
7 return: { id: null }
8 },
9 intent: "update"
10 });
11
12 return (
13 <MultipartFormProvider>
14 <Formik initialValues={{ attachment: [] }} onSubmit={values => updateRecord({ id: recordId, ...values })}>
15 <Form>
16 <FileInput name="attachment" label="Attachment" />
17 <button type="submit">Upload</button>
18 </Form>
19 </Formik>
20 </MultipartFormProvider>
21 );
22}For the backend upload contract, see /reference/files-and-uploads if available, or /reference/jql-overview and /reference/crud-operations.