> 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/case-scripting/on-load-scripts.md).

# On Load Scripts

Scripts that run in the browser when a case page is opened.

An on load script runs in the user's browser every time a case of a matching case type is opened. It is ordinary client-side JavaScript, so it can change what the user sees, fetch data and talk to other services, but it cannot write anything back into the case.

Use one when you want to react to a case as it is presented: warn about a value, surface something buried several tabs down, or pull in information from elsewhere.

## When it runs

The script is placed into the case page and runs once the page is ready, after the case data and the standard interface have loaded. It runs on every visit to the case, including when the user returns to it after a save.

Because it runs after the page is built, anything the script adds is not part of the saved case. It is display only, so it never appears in reports or document templates.

## What is available to your script

<table><thead><tr><th width="180">Available</th><th>Notes</th></tr></thead><tbody><tr><td><code>caseid</code></td><td>A variable holding the numeric ID of the case being viewed. Use it to build API calls.</td></tr><tr><td>jQuery</td><td>Loaded on the case page, so <code>$</code> is available and the script already runs at document ready. You do not need your own ready wrapper.</td></tr><tr><td><code>#scriptingTarget</code></td><td>An empty container near the top of the case page, provided for scripts to write into.</td></tr><tr><td><a href="/developer-documentation/case-data-api.md">Case Data API</a></td><td>How you read case values, including custom fields, contacts and tables.</td></tr></tbody></table>

A minimal script that reads one custom field and writes a message onto the case looks like this:

```javascript
$.get('/api/case/' + caseid + '/data?getValues=Custom.CustomerRating', function (data) {
    var value = data.data.customFields[0].value;
    if (value < 50) {
        $('#scriptingTarget').html('<div class="alert alert-danger">This customer has a negative rating</div>');
    }
});
```

## Writing to the page

`#scriptingTarget` is the supported place to put your own content, and it sits where the user will see it as the case opens. Writing into it with `.html()` replaces anything already there, so if you have more than one script contributing to the same case, use `.append()` instead, or give each script its own child element.

You can reach the rest of the page with jQuery as well, but the surrounding markup is not a published interface and may change between releases, so anything beyond `#scriptingTarget` is worth re-testing after an upgrade.

{% hint style="warning" %}
Every on load script attached to the case type runs on the same page, in the same scope. A syntax error in one script can stop the others from running, and two scripts declaring the same variable name will collide. Keep each script self-contained, ideally wrapped in its own function.
{% endhint %}

## Examples

<table data-view="cards"><thead><tr><th>Example</th><th>What it shows</th><th data-card-target data-type="content-ref">Target</th></tr></thead><tbody><tr><td><strong>Custom Messages Within Cases</strong></td><td>Showing a different message depending on the value of a custom field.</td><td><a href="/developer-documentation/case-scripting/on-load-scripts/custom-messages-within-cases.md">Custom Messages Within Cases</a></td></tr><tr><td><strong>Add Custom Field Data To Main Case Panel</strong></td><td>Lifting a value out of a custom field group onto the front of the case.</td><td><a href="/developer-documentation/case-scripting/on-load-scripts/add-custom-field-data-to-main-case-panel.md">Add Custom Field Data To Main Case Panel</a></td></tr><tr><td><strong>Integrating with 3rd party services</strong></td><td>Passing case data to an external service and rendering what comes back.</td><td><a href="/developer-documentation/case-scripting/on-load-scripts/integrating-with-3rd-party-services.md">Integrating with 3rd party services</a></td></tr></tbody></table>

## Adding one

On load scripts are created in the same place as on save scripts. Choose the on load option when you set the script's type, as described in [Adding a New Script](/developer-documentation/case-scripting/adding-a-new-script.md).