Horizon Framework

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

ServicePropertyDescription
ListapiClient.ui.listList configurations for collections
FilterapiClient.ui.filterSaved filters
NavapiClient.ui.navNavigation structures
ResourceapiClient.ui.resourceAPI resources (datasources)
TemplateapiClient.ui.templateNunjucks templates
ValidationapiClient.ui.validationJSON schema validations
View OverrideapiClient.ui.viewOverrideUser view customisations
PageapiClient.ui.pagePage definitions
Page TemplateapiClient.ui.pageTemplatePage template configurations
ActionsapiClient.ui.actionsBulk 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' } })