Horizon Framework

UI API — Filter

apiClient.ui.filter manages saved filters — named query configurations that can be applied to lists and views.

Methods

create

Create a new filter.

const filter = await apiClient.ui.filter.create({
  filter: {
    name: 'Open Jobs',
    resourceId: 'Jobs',
    // filter definition fields...
  },
})
console.log(filter.uid)

get

Fetch a single filter by UID.

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

getMany

Fetch multiple filters, with optional filters.

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

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

// Filter by name
const named = await apiClient.ui.filter.getMany({ name: 'Open Jobs' })

put

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

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

del

Delete a filter by UID.

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

getRelevant

Get the most relevant filter for a given resource.

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

React Example

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

const FilterSelector = ({ resourceId, onSelect }) => {
  const apiClient = useApiClient()
  const [filters, setFilters] = useState([])

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

  return (
    <select onChange={(e) => onSelect(e.target.value)}>
      {filters.map((f) => (
        <option key={f.uid} value={f.uid}>
          {f.name}
        </option>
      ))}
    </select>
  )
}