Custom JavaScript with CORS Requests in Business Process Forms

API References

Dive deeper into specific areas of the LFForm API:

• Read API

  Learn how to retrieve field values and find fields.

• Write API

  Discover how to modify fields and handle operations.

• Events API

  Subscribe to and handle form, field, and lookup events.

• Properties API

  Understand runtime form properties and state.

Additional Resources

• Recipes

  Learn more about common patterns and solutions.

• Custom HTML guide

  Check out our custom HTML and sandbox integrations.

Cross-Origin Resource Sharing (CORS)

Custom JavaScript code in forms can make cross-origin requests to third-party APIs and external services where CORS is enabled. Scripts run in a security-hardened sandbox on a dedicated domain (sandbox-forms.laserfiche.com), with full network access while remaining isolated from the parent application. You can configure APIs to accept requests only from sandbox-forms.laserfiche.com.

In order for custom JavaScript in a Laserfiche form to make HTTP requests to a third-party API, the target web server must be configured for Cross-Origin Resource Sharing (CORS).

The following example demonstrates fetching data from an external API.

Step 1: Open the Form Designer

1. Navigate to the Business Process app in your Laserfiche Cloud.
2. Create a new form or open an existing form in the Form Designer.

Step 2: Add Custom JavaScript

1. In the Form Designer, click the JavaScript icon:
2. Add your custom JavaScript in the Custom JavaScript editor.

The following custom JavaScript example fetches address suggestions from an external API when a user types in a "Street Address" field and populates a drop-down with the results:

```javascript
// Example: Fetch data from a third-party API with CORS support
LFForm.onFieldChange(
  async function () {
    const query = LFForm.getFieldValues({ variableName: "Street_Address" });

    if (query && query.length > 3) {
      try {
        const response = await fetch(
          "https://api.example.com/address/suggest?q=" +
            encodeURIComponent(query),
          {
            method: "GET",
            headers: {
              "Content-Type": "application/json",
              Authorization: "Bearer YOUR_API_KEY",
            },
          },
        );

        const data = await response.json();

        // Populate a dropdown field with the results
        const options = data.suggestions.map((s) => s.formattedAddress);
        LFForm.changeFieldSettings({ variableName: "Address_Suggestions" }, { autoCompleteValues: options });
      } catch (error) {
        console.error("API request failed:", error);
      }
    }
  },
  { variableName: "Street_Address" },
);
```

More Information

Cross-Origin Resource Sharing (CORS) must be enabled on the target server. Your JavaScript can make requests to any API that allows cross-origin requests from the sandbox domain. If the target server does not include the appropriate Access-Control-Allow-Origin headers, the request will be blocked by the browser.

Security isolation is enforced. The sandbox prevents custom scripts from accessing the parent application's cookies, localStorage, or navigating to the top-level window. This is by design to protect user sessions.

External scripts load before inline scripts. Any external JavaScript files you configure will be fully loaded before your inline scripts execute, allowing you to reference external library functions.

Support for CORS requests in Laserfiche business process forms is being deployed in phases. If you do not yet see CORS requests working in your forms, contact your administrator to confirm that the feature has been enabled for your account.