Load Static Files
Audience:
Low-code EngineersSkill Prerequisites:
Actions,Forms,HTML
Adds your own JavaScript and CSS files to the page, by URL. The files are loaded with the page, like the site's own scripts and styles.
It's meant for a form's On Page Load event. That's when the page is still being built, so the files can be added to it.
Typical Use Cases
- Load a JavaScript library that a form needs, such as a code editor or a charting library from a CDN
- Load a stylesheet with custom styles for one form, without adding it to the whole site
- Load a script only for some users or pages, with a condition
Don't use it to
- Run JavaScript after a button click or a submission. Use Execute Javascript Code And Continue Execution instead.
- Run a short script with the form. Use the form's Initialization scripts setting instead. See Forms Settings.
- Load files that every page of the site needs. Add them to the site's theme instead.
Related Actions
| Action Name | Description |
|---|---|
| Execute Javascript Code And Continue Execution | Runs JavaScript in the browser and continues. |
| Execute Javascript Code And Stop Execution | Runs JavaScript in the browser and ends execution. |
| Redirect To Url | The other action that's useful in On Page Load, to send users to another page. |
Input Parameter Reference
| Parameter | Description | Supports Tokens | Default | Required |
|---|---|---|---|---|
| JS Urls | The JavaScript files to load, as Id and URL pairs. URL is an absolute URL, such as https://cdn.example.com/lib.min.js, or a path on the site, such as /Portals/0/scripts/orders.js. Id is a name for the script, such as ChartLib. Give each script its own Id. | Yes | empty | No |
| CSS Urls | The CSS files to load, as Id and URL pairs. URL works the same as for JS Urls. Id is only a label here. | Yes | empty | No |
Where the files go
- JavaScript files are added at the end of the page body, with a late load priority, so they come after the form's own scripts.
- CSS files are added to the page head.
- The files are added through the site's client resource management, so the same URL isn't added twice.
Considerations
- Use
On Page Load. In later events, such asOn Initor a button click, the page has already been sent to the browser. The action then does nothing, and there's no error. - The action doesn't add a version to the URL. When you change a file, browsers may keep using the old copy. Change the URL to force a new copy, for example
/Portals/0/scripts/orders.js?v=2. - Mind what you load. A script from a URL runs with the same rights as the page. Only load files from sources you trust. Don't build URLs from values users can type.
- Check the URL. A wrong URL isn't reported by the action. The browser console shows the failed request.
- Not in APIs. The action adds files to a page, so it isn't available in API endpoints.
- Conditions. To load a file only in some cases, give the action a condition, for example
"[User:IsSuperUser]" == "True". See Common Parameters.
Examples
tip
To understand how to use the below examples, please see Running Examples.
1. Load a code editor from a CDN
Add this action to a form's On Page Load event. It loads the CodeMirror editor, its SQL mode and its stylesheet from a CDN.
{
"Title": "Load Static Files",
"ActionType": "RegisterStaticFiles",
"Description": "Load CodeMirror for the SQL editor",
"Parameters": {
"JsPaths": [
{
"name": "CMjs",
"value": "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/codemirror.min.js"
},
{
"name": "CMjsSQL",
"value": "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/mode/sql/sql.min.js"
}
],
"CssPaths": [
{
"name": "CMcss",
"value": "https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.59.2/codemirror.min.css"
}
]
}
}
2. Load the site's own script and styles
This action loads a script and a stylesheet from the site's Portals/0 folder. The ?v=3 at the end makes browsers get the new copy after an update.
{
"Title": "Load Static Files",
"ActionType": "RegisterStaticFiles",
"Description": "Load the order form script and styles",
"Parameters": {
"JsPaths": [
{
"name": "OrderForm",
"value": "/Portals/0/scripts/order-form.js?v=3"
}
],
"CssPaths": [
{
"name": "OrderFormCss",
"value": "/Portals/0/styles/order-form.css?v=3"
}
]
}
}
Revised 09/27/2026