Global formulas

Global formulas provide a way to create reusable calculations and logic that can be accessed from any page or component in your project. Unlike component-level formulas that are only available within a specific component, global formulas can be used throughout your entire application.

Global formulas are ideal for:

• Common calculations used across multiple components
• Shared data transformations
• Utility functions like date formatting or number parsing
• Business logic that needs to be consistent throughout the application
• Complex operations that might be reused

Using global formulas ensures consistency in your application and reduces duplication of code.

Create a global formula

Live

To create a global formula:

1. 1

   Open the project sidebar by clicking the folder icon or using Cmd/Ctrl + K
2. 2

   Find the Formulas section, click the + button and name your formula
3. 3

   Optionally add arguments as input parameters
4. 4

   Define your formula logic using either
   (A) The formula editor, or
   (B) Custom JavaScript code by clicking the Convert to custom code button at the bottom left of the screen

Global formulas appear in the formula selection dropdown throughout your project, making them easily accessible from any component or page.

Custom code formulas extend the capabilities of the standard formula editor by allowing you to write JavaScript directly. This enables you to implement functionality that isn't available through the built-in formula components.

Custom code formula

Live

In the custom code editor, your formula must have an entry function with the same name as your formula. This function receives two parameters:

• args: The defined input parameters passed to your formula
• ctx: The context object that provides access to Nordcraft-specific functionality

When using custom code in global formulas, keep these important points in mind:

• Pure functions: Custom formulas should be pure functions without side effects; given the same inputs, they should always return the same outputs without modifying external state
• Client-side only: Custom code formulas execute in the browser only and not during server-side rendering; this can cause layout shifts during page load and may impact your page performance scores, and as a result, SEO
• Synchronous execution: Custom formulas must be synchronous; do not use Promise, fetch or other asynchronous JavaScript APIs in global formulas
• Shadow DOM compatibility: When components are exported as web components, use ctx.root instead of document to access DOM elements; this ensures compatibility with Shadow DOM encapsulation