ChecklistsLast updated on
Last updated on
Create task lists with boolean or enum statuses
This guide walks through creating a checklist with items, filling it with data, and rendering the output.
Define the Checklist
A checklist needs a name, version, title, and items. Each item has an ID, title, and status configuration.
import { open } from '@open-form/core'
const onboarding = open.checklist({
name: 'employee-onboarding',
version: '1.0.0',
title: 'Employee Onboarding Checklist',
items: [
{ id: 'signed-contract', title: 'Signed Employment Contract', status: { kind: 'boolean' } },
{ id: 'received-equipment', title: 'Received Equipment', status: { kind: 'boolean' } },
{ id: 'completed-training', title: 'Completed Training', status: { kind: 'boolean' } },
],
})Use Enum Statuses
Items can use enum statuses for multi-state workflows.
const approvals = open.checklist({
name: 'approval-workflow',
version: '1.0.0',
title: 'Approval Workflow',
items: [
{
id: 'manager-approval',
title: 'Manager Approval',
status: {
kind: 'enum',
options: [
{ value: 'pending', label: 'Pending' },
{ value: 'approved', label: 'Approved' },
{ value: 'rejected', label: 'Rejected' },
],
},
},
{
id: 'hr-approval',
title: 'HR Approval',
status: {
kind: 'enum',
options: [
{ value: 'pending', label: 'Pending' },
{ value: 'approved', label: 'Approved' },
{ value: 'rejected', label: 'Rejected' },
],
},
},
],
})Fill the Checklist
Use .fill() to create a draft checklist with item values.
const draft = onboarding.fill({
'signed-contract': true,
'received-equipment': true,
'completed-training': false,
})
// Access individual items
console.log(draft.getItem('signed-contract')) // true
// Get all items
console.log(draft.getAllItems())
// { 'signed-contract': true, 'received-equipment': true, 'completed-training': false }For enum checklists:
const draft = approvals.fill({
'manager-approval': 'approved',
'hr-approval': 'pending',
})Update Items
Use .setItem() to update individual items immutably.
// Create a new draft with updated item
const updated = draft.setItem('completed-training', true)
console.log(updated.getItem('completed-training')) // true
console.log(draft.getItem('completed-training')) // false (original unchanged)Add a Layer
Add a layer to render the checklist in a specific format.
const onboarding = open.checklist({
name: 'employee-onboarding',
version: '1.0.0',
title: 'Employee Onboarding Checklist',
items: [
{ id: 'signed-contract', title: 'Signed Employment Contract', status: { kind: 'boolean' } },
{ id: 'received-equipment', title: 'Received Equipment', status: { kind: 'boolean' } },
{ id: 'completed-training', title: 'Completed Training', status: { kind: 'boolean' } },
],
defaultLayer: 'markdown',
layers: {
markdown: {
kind: 'inline',
mimeType: 'text/markdown',
text: `
# {{schema.title}}
{{#each items}}
- [{{#if value}}x{{else}} {{/if}}] {{title}}
{{/each}}
`,
},
},
})Render the Checklist
Render the filled checklist using a renderer.
import { textRenderer } from '@open-form/renderer-text'
const draft = onboarding.fill({
'signed-contract': true,
'received-equipment': true,
'completed-training': false,
})
const output = await draft.render({ renderer: textRenderer() })
console.log(output)Output:
# Employee Onboarding Checklist
- [x] Signed Employment Contract
- [x] Received Equipment
- [ ] Completed TrainingSave the Artifact
Export the checklist to JSON or YAML for storage or version control.
const json = onboarding.toJSON()
const yaml = onboarding.toYAML(){
"$schema": "https://schemas.open-form.dev/schema.json",
"kind": "checklist",
"name": "employee-onboarding",
"version": "1.0.0",
"title": "Employee Onboarding Checklist",
"items": [
{
"id": "signed-contract",
"title": "Signed Employment Contract",
"status": { "kind": "boolean" }
},
{
"id": "received-equipment",
"title": "Received Equipment",
"status": { "kind": "boolean" }
},
{
"id": "completed-training",
"title": "Completed Training",
"status": { "kind": "boolean" }
}
]
}Load it back with open.load():
const loaded = open.load(jsonString) // works with JSON or YAML