UI API — Page

apiClient.ui.page manages page definitions — structured configurations that define the layout and content of full application pages.

Page Types

Pages have a pageType field (from UI.CRUD.PageType) that determines their purpose:

Methods

create

Create a new page definition.

const page = await apiClient.ui.page.create({
  page: {
    name: 'Jobs List',
    slug: 'jobs-list',
    pageType: 'LIST',
    // additional page configuration...
  },
})
console.log(page.uid)

get

Fetch a single page by UID.

const page = await apiClient.ui.page.get({ uid: 'abc123' })

getMany

Fetch multiple pages, with optional filters.

// All pages
const pages = await apiClient.ui.page.getMany({})

// By name
const named = await apiClient.ui.page.getMany({ name: 'Jobs List' })

// By slug
const bySlug = await apiClient.ui.page.getMany({ slug: 'jobs-list' })

// Paginated
const paginated = await apiClient.ui.page.getMany({ limit: 20, page: 1 })

put

Update an existing page. Uses merge-and-put — only include the fields you want to change.

await apiClient.ui.page.put({
  page: { uid: 'abc123', name: 'Updated Page Name' },
})

del

Delete a page by UID.

await apiClient.ui.page.del({ uid: 'abc123' })

Page Type

React Example

import { useApiClient } from '@skedulo/horizon-core'
import { useEffect, useState } from 'react'

const usePage = (slug) => {
  const apiClient = useApiClient()
  const [page, setPage] = useState(null)

  useEffect(() => {
    apiClient?.ui.page.getMany({ slug }).then((pages) => {
      setPage(pages[0] ?? null)
    })
  }, [apiClient, slug])

  return page
}

const PageLoader = ({ slug }) => {
  const page = usePage(slug)

  if (!page) return <div>Loading...</div>

  return <div data-page-type={page.pageType}>{page.name}</div>
}