> For the complete documentation index, see [llms.txt](https://docs.agilecase.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.agilecase.com/developer-documentation/custom-form-scripting/examples.md).

# Examples

Worked JavaScript label scripts, indexed by what each one demonstrates.

Each page below is a complete script with the field settings it depends on, written around a different technique. Between them they cover every common shape a JavaScript label takes: displaying a derived value, reacting to what the user has entered, reaching across tabs, driving a layout from rules, and working inside a table.

The scenarios are drawn from several sectors deliberately. None of these techniques is specific to a kind of casework, and the same handful of patterns solve the same problems whether you are running a charity, a school, an insurance desk or a membership club.

## Finding an example

Search this table for the helper you want to use, the field type you are working with, or the outcome you are after. The Keywords column is plain text, so your browser's find-on-page search works across it.

| Example                                                                                                                                                 | Level        | What it does                                                             | Keywords                                                                                                  |
| ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------ | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------- |
| [Calculating Age From Date of Birth](/developer-documentation/custom-form-scripting/examples/calculating-age-from-date-of-birth.md)                     | Beginner     | Derives a value from a date field and displays it                        | date of birth, age, derived value, jQuery, contact tab                                                    |
| [Changing Colours in a Dropdown Menu](/developer-documentation/custom-form-scripting/examples/changing-colours-in-a-dropdown-menu.md)                   | Beginner     | Restyles another field based on its selected value                       | dropdown, colour, css, background, risk, formatting                                                       |
| [Mirroring a Field From Another Tab](/developer-documentation/custom-form-scripting/examples/mirroring-a-field-from-another-tab.md)                     | Beginner     | Displays a value that is edited elsewhere on the case                    | preLoadServerData, preloadCaseData, cross tab, Case Data API, insurance                                   |
| [Reading a Single Field From Another Tab](/developer-documentation/custom-form-scripting/examples/reading-a-single-field-from-another-tab.md)           | Beginner     | Fetches one value from elsewhere without a request string                | getCrossTabValueById, cross tab, synchronous, Client Connect, insurance                                   |
| [Showing and Hiding Dependent Fields](/developer-documentation/custom-form-scripting/examples/showing-and-hiding-dependent-fields.md)                   | Beginner     | The standard config label and its first rule                             | ThisJSLabel, HideRow, ExecuteAllRules, hide, NOT\_EQUALS, config label, charity                           |
| [Showing a Message Against a Field](/developer-documentation/custom-form-scripting/examples/showing-a-message-against-a-field.md)                       | Beginner     | Validates two fields against each other and warns                        | outputFieldMessage, removeFieldMessage, validation, stacking, capacity, charity                           |
| [Enabling a Field From a Checkbox](/developer-documentation/custom-form-scripting/examples/enabling-a-field-from-a-checkbox.md)                         | Beginner     | Locks and unlocks a field from a checkbox                                | Disable, Enable, checkbox, read-only, Gift Aid, charity                                                   |
| [Clearing Draft Values From a Form](/developer-documentation/custom-form-scripting/examples/clearing-draft-values-from-a-form.md)                       | Beginner     | Blanks a whole form, and why to prefer targeted rules                    | clearForm, reset, draft, hidden inputs, checkbox, triggerHandler, privacy notice                          |
| [A Colour-Coded Status Summary](/developer-documentation/custom-form-scripting/examples/a-colour-coded-status-summary.md)                               | Intermediate | Builds a multi-line HTML summary from several fields                     | html, colour, moment, get\_moment, summary, checkbox, GDPR                                                |
| [Building a Map Link From a Postcode](/developer-documentation/custom-form-scripting/examples/building-a-map-link-from-a-postcode.md)                   | Intermediate | Validates a format and renders a link                                    | link, anchor, encodeURIComponent, postcode, validation, school                                            |
| [Driving a Layout From Several Rules](/developer-documentation/custom-form-scripting/examples/driving-a-layout-from-several-rules.md)                   | Intermediate | One config label, several independent rules                              | ExecuteAllRules, ruleset, hide, map, sticky, privacy notice                                               |
| [Linking to an External Form](/developer-documentation/custom-form-scripting/examples/linking-to-an-external-form.md)                                   | Intermediate | Builds a link to another system, pre-filled from the case                | preLoadServerData, originalName, query string, caseFields, integration, charity                           |
| [Comparing Postcodes Across Tabs](/developer-documentation/custom-form-scripting/examples/comparing-postcodes-across-tabs.md)                           | Intermediate | Reports whether a contact field and a custom field agree                 | preLoadServerData, caseFields, customFields, normalise, contact, insurance                                |
| [Looking Up a Tariff From a Case Value](/developer-documentation/custom-form-scripting/examples/looking-up-a-tariff-from-a-case-value.md)               | Intermediate | Maps a case-level code onto a rate                                       | Case.ClientCode, lookup, switch, rate card, tariff, school                                                |
| [Setting and Locking a Reference](/developer-documentation/custom-form-scripting/examples/setting-and-locking-a-reference.md)                           | Intermediate | Fills in a derived reference and takes it out of reach                   | Value3, disable, ALWAYS, Case().CaseReference, reference, set\_values, GDPR                               |
| [Transitioning a Field to a Dropdown](/developer-documentation/custom-form-scripting/examples/transitioning-a-field-to-a-dropdown.md)                   | Intermediate | Replaces free text with a dropdown without losing history                | Disable, Enable, migration, legacy field, outputFieldMessage, GDPR                                        |
| [Copying a Structured Value to a Legacy Field](/developer-documentation/custom-form-scripting/examples/copying-a-structured-value-to-a-legacy-field.md) | Intermediate | Mirrors a dropdown into the text field it replaced                       | Value3, migration, legacy field, mirror, loop guard, club                                                 |
| [Hiding a Custom Field Group Tab](/developer-documentation/custom-form-scripting/examples/hiding-a-custom-field-group-tab.md)                           | Intermediate | Hides a whole tab when a flag is not set                                 | hide\_tabs, CustomFieldTab, group id, tab, privacy notice                                                 |
| [Re-running Rules on a Field Change](/developer-documentation/custom-form-scripting/examples/re-running-rules-on-a-field-change.md)                     | Intermediate | Change handlers, and why a label rarely needs one                        | ExecuteAllRulesOnChange, change event, input event, binding, charity                                      |
| [Blocking the Save Button](/developer-documentation/custom-form-scripting/examples/blocking-the-save-button.md)                                         | Intermediate | Disables Save until a question is answered                               | disable\_save, outputSaveButtonMessage, validation, IN\_LIST, club                                        |
| [Making Fields Mandatory When Visible](/developer-documentation/custom-form-scripting/examples/making-fields-mandatory-when-visible.md)                 | Intermediate | Ties a field's requirement to its visibility                             | hide\_and\_blank\_mandatory, setFieldRequired, required, mandatory, school                                |
| [Hiding and Blanking Dependent Fields](/developer-documentation/custom-form-scripting/examples/hiding-and-blanking-dependent-fields.md)                 | Intermediate | Clears fields as it hides them, so nothing stale is saved                | hide\_and\_blank, stale values, clearing, dependent, insurance                                            |
| [Encoding a Checkbox List](/developer-documentation/custom-form-scripting/examples/encoding-a-checkbox-list.md)                                         | Intermediate | Turns a checkbox list into a tick code for templates                     | helper\_checkboxlist\_to\_list, checkbox list, wire format, Value3, club                                  |
| [Writing a Value With Value3](/developer-documentation/custom-form-scripting/examples/writing-a-value-with-value3.md)                                   | Intermediate | The standard way to set a field, and a default the user can still change | Value3, setHiddenValueElement, default, hidden value element, setValueAndReturnNodes, set\_values, school |
| [Comparing Two Dates in a Rule](/developer-documentation/custom-form-scripting/examples/comparing-two-dates-in-a-rule.md)                               | Intermediate | A custom test function comparing two fields                              | test\_type function, test\_before, test\_after, BETWEEN, dates, GDPR                                      |
| [Hiding Table Columns and Stamping a Row](/developer-documentation/custom-form-scripting/examples/hiding-table-columns-and-stamping-a-row.md)           | Intermediate | Table scripting: hiding columns and writing to a row                     | HideInTable, table control, row edit form, {{n}}, Value3, club                                            |
| [Validating Percentages Across Tabs](/developer-documentation/custom-form-scripting/examples/validating-percentages-across-tabs.md)                     | Advanced     | Chooses between rulesets from JavaScript                                 | ALWAYS, output\_messages, preLoadServerData, contact relationship, club                                   |
| [Reading a Preloaded Table](/developer-documentation/custom-form-scripting/examples/looking-up-a-preloaded-table-row.md)                                | Advanced     | Walks the rows of a preloaded custom field table                         | CaseTable, getRowByName, simplifyRowContent, customTables, rows, items, insurance                         |
| [Gating a Table Row](/developer-documentation/custom-form-scripting/examples/gating-a-table-row.md)                                                     | Advanced     | Derives row flags and holds the row's Save button                        | table control, disable\_save, output\_messages, derived flags, tableForm, school                          |

### What the levels mean

| Level        | Typical contents                                                                                     |
| ------------ | ---------------------------------------------------------------------------------------------------- |
| Beginner     | One field read, one thing done with it, little or no branching                                       |
| Intermediate | Several fields, a ruleset, a cross-tab read, or a table                                              |
| Advanced     | Decisions made in JavaScript and carried out by rules, several outputs at once, or a preloaded table |

{% hint style="info" %}
Calculated fields have their own worked examples, under [Calculated Fields](/developer-documentation/case-scripting/calculated-fields.md) in Case Scripting. They run on the server, so they are a different kind of script from everything here.
{% endhint %}

## Before you copy an example

Every field ID in these pages, such as `6108` or `6421`, is made up. Field IDs are specific to your own system, so replace them with yours before using a script. The same is true of every group ID, every dropdown option and every URL.

Four things are worth knowing before you start, because they explain most of the choices made in these pages.

**A label re-runs constantly.** Your script is called when the tab is rendered and again on every change to any field on the form. Write it to work the answer out from scratch each time, and clear anything it appends — a message, a link — before writing it again.

**Nothing here saves anything.** A label can put a value into a field's input box, and that value is stored when the user saves the form. The script itself never writes to the database, and a user who navigates away loses it. Anything that must be stored whatever happens belongs in an [on save script](/developer-documentation/case-scripting/on-save-scripts.md).

**Nothing here is enforcement.** Disabled fields, required fields and a blocked Save button are all properties of one page in one browser. They stop mistakes; they do not stop data arriving through an upload, an integration or the API. Validation that has to hold goes in an [on save script](/developer-documentation/case-scripting/on-save-scripts/examples/blocking-a-save-with-validation.md) as well.

**Errors are silent.** A label is wrapped in a `try`/`catch` that writes to the browser console. A broken script looks like a field that stays empty. Open the console first.

**There are two ways to write a field, and they take the value differently.** `CustomField(id).Value3(value)` takes it as it should appear and works the encoding out from the field's type. The [`set_values`](/developer-documentation/custom-form-scripting/rule-reference.md#set_values) rule action takes it in the form the field stores, which is why rulesets carry the quotes — a good fit for dates and for values the user does not read, and it keeps the write beside the rules around it. You will also meet `setValueAndReturnNodes`, an [earlier form](/developer-documentation/custom-form-scripting/scripting-helper-api-reference.md#deprecated) of the same idea. These examples use each where it fits and say which and why.

{% hint style="info" %}
For the full list of what a script can call, see the [Scripting Helper API Reference](/developer-documentation/custom-form-scripting/scripting-helper-api-reference.md), and the [Rule Reference](/developer-documentation/custom-form-scripting/rule-reference.md) for the declarative rulesets several of these examples use.
{% endhint %}