Page Builder Runtime
Data hooks
Use useJql, useJqlMutation, table helpers, search params, and record context in Page Builder runtime code.
Runtime data access uses the same JQL envelope as the external API, but calls run from Antly's frontend shell. The runtime injects useJql for reads and useJqlMutation for actions.
useJql
useJql posts a JQL query, tracks loading, stores data, exposes error, and returns refresh() for reloading.
1function OpenTasks() {
2 const { data = [], loading, refresh } = useJql({
3 jqlQuery: {
4 __meta__: {
5 schema: "model",
6 namespace: "tasks.Task",
7 intent: "retrieve",
8 authenticationClass: "jwt",
9 return: {
10 id: null,
11 title: null,
12 status: null,
13 dueDate: null
14 }
15 },
16 filter: { status: "open" }
17 }
18 });
19
20 return (
21 <section>
22 <button onClick={refresh}>Refresh</button>
23 {loading ? "Loading..." : data.map(task => <p key={task.id}>{task.title}</p>)}
24 </section>
25 );
26}Use enabled when a query should wait for props, search params, or record context.
useJqlMutation
useJqlMutation builds a JQL query at call time. It accepts meta, intent, schema, default values, callbacks, and return fields.
1function CreateFollowUp({ ticketId }) {
2 const [createTask, { loading }] = useJqlMutation({
3 meta: {
4 namespace: "tasks.Task",
5 authenticationClass: "jwt",
6 return: { id: null, title: null }
7 },
8 intent: "create"
9 });
10
11 return (
12 <button
13 disabled={loading}
14 onClick={() =>
15 createTask({
16 title: "Follow up ticket",
17 ticket: ticketId
18 })
19 }
20 >
21 Create follow-up
22 </button>
23 );
24}Context helpers
Use useSearchParams() for URL state, useRecordContext() on record pages, and usePageBuilderFilter() with buildFilterQ() when the page has Page Builder filter bars. For filtering syntax, read /reference/filters-and-queries; for return trees, read /reference/crud-operations.