> ## Documentation Index
> Fetch the complete documentation index at: https://docs.insight.nobly.dk/llms.txt
> Use this file to discover all available pages before exploring further.

# Build your first Caseflow template

> Create an editable contract form, preview it, resolve validation issues, and verify template selection and saving.

## What you will build

An Update template for a Contract class with a required name, customer reference, review notes, and one explicit save button. Start with the form; add related objects, searches, and scripts after this version saves correctly.

## Prepare the class and access

You need `caseflow-configuration.manage` to author templates. Prepare a class with these attributes and an existing test object:

| Attribute name      | Purpose                                   |
| ------------------- | ----------------------------------------- |
| `Name`              | Contract name; text                       |
| `CustomerReference` | Customer reference; text                  |
| `ReviewNotes`       | Review notes; text with a suitable length |

Use the exact attribute names from your class. Template labels can be friendly text, but `attributeName` must resolve to the configured attribute. The test account also needs permission to open and update the object.

## Open the editor

Under **Settings → Admin → Caseflow → Templates**, select the application and class, then create an **Update** template. Name it `Contract review`.

The editor combines template settings, source, component help, validation problems, and a preview. A starter or **Scaffold from class** gives you a starting point. Loading a starter changes the draft; it does not save it. Review its placeholder names against your class.

## Add the form

Use this complete starting template:

```html theme={null}
<!-- caseflow:hideDefaultSubmit -->
<div class="space-y-4 p-4">
  <h2 class="text-xl font-semibold">Contract review</h2>
  <p>Check the reference and record the review decision.</p>
  <EditableField attributeName="Name" label="Contract name" required="true" />
  <EditableField attributeName="CustomerReference" label="Customer reference" />
  <EditableField attributeName="ReviewNotes" label="Review notes" type="textarea" />
  <SaveButton scope="primary" label="Save review" />
</div>
```

The first line is a supported template directive. It hides the host's default submit button because the template supplies its own SaveButton. Keep the directive exactly as shown.

The form's `required` rule improves the editing experience. It does not replace API validation or an access rule for other callers.

## Preview and resolve problems

Use the preview to inspect spacing, labels, and the selected template type. Use the Problems panel to locate unknown attributes, misspelled component names, and invalid properties. Component help supplies the supported properties; do not assume an arbitrary HTML attribute is a component option.

The preview offers **Sample data** and **Real object**. Saving, scripts, and other side effects are blocked in preview mode, even if a control is displayed. A preview is useful for layout and bindings. Verify saving on an actual test object as well: a good-looking form is not evidence that its user can update the class.

<Frame caption="The complete example beside its generated sample-data preview. Save review is blocked in preview.">
  <img src="https://mintcdn.com/nobly/vtIE7VxmxD31SQoh/images/guides/template.png?fit=max&auto=format&n=vtIE7VxmxD31SQoh&q=85&s=5760ed86093171e8638987d663560b7d" alt="The complete example beside its generated sample-data preview. Save review is blocked in preview." width="1440" height="1000" data-path="images/guides/template.png" />
</Frame>

## Save and verify selection

Save the template, then open the test object through the normal Caseflow surface. Check:

1. The intended Update template is selected for the account.
2. Existing values appear in all three fields.
3. Clearing Name prevents the form's required-field validation from passing.
4. Saving an edited review note persists it; reopening the object shows the new value.
5. An account without update rights cannot gain write access through the template.

If the wrong template opens, inspect its type, class, default fallback, group assignments, and precedence. An explicit template name in a link or component can select a specific template. See [template selection](/caseflow/templates#template-selection).

## Compare and restore a saved version

Open **History** while editing an existing template. Select a saved version to compare it with the current draft.

* **Load into editor** changes the draft only. Review the preview and save when ready.
* **Restore** is a server-side change: it overwrites the saved template with the selected version and creates a new history entry. Current group assignments remain unchanged. Read the confirmation before proceeding.

If a restore reports a precedence conflict or concurrent change, resolve that condition and reload the current version before trying again. Do not assume a failed restore changed the saved template.

## Use AI assistance for a bounded change

When AI template assistance is available to your group, open its panel and describe the business form and the change you want. You still need permission to manage Caseflow templates.

A useful request is: “Keep the current Contract form. Put the customer reference beside the contract name and move Review notes below them. Keep the existing attribute bindings and Save review action.”

The proposal appears as a diff against your draft. **Accept** brings it into the editor; **Discard** leaves the draft unchanged. Acceptance does not save the template. Inspect the Problems panel and preview, then verify saving with a real test object. If the draft changed during generation, compare against the current text before accepting.

Generated code can need further correction even after syntax checks pass. Begin with a starter or **Scaffold from class** when a standard layout is sufficient.

## Extend one behavior at a time

* Add a [RelationPicker](/caseflow/form-components#relationpicker) when the customer is a related object rather than text.
* Add an [ObjectSearch](/caseflow/data-components#objectsearch) for child records, with an explicit filter linking them to the current object.
* Add a [script-backed autofill](/scripts/examples) to normalize the reference, then verify the script's target attributes and published version.
* Add an `onBeforeSave` hook for a form business rule, and test both the successful and rejected paths.

Keep the basic save path working after each addition. Use template history to inspect changes, and test restored content before applying it to live work.

## Where to read next

<Card title="Templates and syntax" icon="code" href="/caseflow/templates" horizontal>
  Learn how Caseflow templates work — types, selection, syntax for variables, conditionals, loops, and the scope model.
</Card>