Horizon Framework

UI API — List

apiClient.ui.list manages list configurations that define how collections of records are displayed.

Methods

create

Create a new list configuration.

const list = await apiClient.ui.list.create({
  list: {
    name: 'My List',
    resourceId: 'Jobs',
    // additional list fields...
  },
})
console.log(list.uid)

get

Fetch a single list by UID.

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

getMany

Fetch multiple lists, with optional filters.

// All lists for a resource
const lists = await apiClient.ui.list.getMany({ resourceId: 'Jobs' })

// Paginated
const page = await apiClient.ui.list.getMany({
  resourceId: 'Jobs',
  limit: 20,
  page: 1,
})

// Filter by name
const named = await apiClient.ui.list.getMany({ name: 'My List' })

put

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

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

del

Delete a list by UID.

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

getByName

Find the best-matching list by name (sorted by relevance).

const list = await apiClient.ui.list.getByName('My List')
if (list) {
  console.log(list.uid)
}

getRelevant

Get the most relevant list for a given resource.

const list = await apiClient.ui.list.getRelevant({ resourceId: 'Jobs' })

getListConfiguration

Fetch a fully-resolved list configuration, including template and filter data.

// By UID
const config = await apiClient.ui.list.getListConfiguration({ uid: 'abc123' })

// By name and resource
const config = await apiClient.ui.list.getListConfiguration({
  name: 'My List',
  resourceId: 'Jobs',
})

React Example

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

const ListViewer = ({ resourceId }) => {
  const apiClient = useApiClient()
  const [lists, setLists] = useState([])

  useEffect(() => {
    apiClient?.ui.list.getMany({ resourceId }).then(setLists)
  }, [apiClient, resourceId])

  return (
    <ul>
      {lists.map((list) => (
        <li key={list.uid}>{list.name}</li>
      ))}
    </ul>
  )
}