Skip to main content
Version: 1.28 (Current)

Load Static Files

Audience: Low-code Engineers

Skill 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.
Action NameDescription
Execute Javascript Code And Continue ExecutionRuns JavaScript in the browser and continues.
Execute Javascript Code And Stop ExecutionRuns JavaScript in the browser and ends execution.
Redirect To UrlThe other action that's useful in On Page Load, to send users to another page.

Input Parameter Reference​

ParameterDescriptionSupports TokensDefaultRequired
JS UrlsThe 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.YesemptyNo
CSS UrlsThe CSS files to load, as Id and URL pairs. URL works the same as for JS Urls. Id is only a label here.YesemptyNo

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 as On Init or 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