UI API
The UI API provides a set of CRUD services for managing UI configuration objects such as lists, filters, navigation, templates, pages, and more. It is accessible via apiClient.ui on the ApiClientV1 instance.
Accessing the UI API
// No framework
import { ApiClientV1 } from '@skedulo/horizon-core'
const apiClient = new ApiClientV1({ auth, platformApiDomain })
// Access a UI service
const lists = await apiClient.ui.list.getMany({})
// React
import { useApiClient } from '@skedulo/horizon-core'
const MyComponent = () => {
const apiClient = useApiClient()
useEffect(() => {
apiClient?.ui.list.getMany({}).then(console.log)
}, [apiClient])
return null
}
Available Services
| Service | Property | Description |
|---|---|---|
| List | apiClient.ui.list | List configurations for collections |
| Filter | apiClient.ui.filter | Saved filters |
| Nav | apiClient.ui.nav | Navigation structures |
| Resource | apiClient.ui.resource | API resources (datasources) |
| Template | apiClient.ui.template | Nunjucks templates |
| Validation | apiClient.ui.validation | JSON schema validations |
| View Override | apiClient.ui.viewOverride | User view customisations |
| Page | apiClient.ui.page | Page definitions |
| Page Template | apiClient.ui.pageTemplate | Page template configurations |
| Actions | apiClient.ui.actions | Bulk actions and action definitions |
Common Patterns
CRUD Operations
Most UI services support the same core CRUD methods:
// Create
await apiClient.ui.list.create({ list: { name: 'My List', resourceId: '...' } })
// Read single item
await apiClient.ui.list.get({ uid: 'abc123' })
// Read many items
await apiClient.ui.list.getMany({ resourceId: '...' })
// Update (merge-and-put — merges with existing before writing)
await apiClient.ui.list.put({ list: { uid: 'abc123', name: 'Updated Name' } })
// Delete
await apiClient.ui.list.del({ uid: 'abc123' })
Pagination
getMany requests support limit and page parameters for pagination:
const items = await apiClient.ui.list.getMany({
resourceId: 'myResource',
limit: 20,
page: 1,
})
Merge-and-Put
The put method on CRUD services uses a merge-and-put pattern — it fetches the current item from the API, merges your partial update into it, then writes the result back. This means you only need to include the fields you want to change:
// Only updates the name; all other fields are preserved
await apiClient.ui.list.put({ list: { uid: 'abc123', name: 'New Name' } })