This architecture is common in enterprise-grade form builders and Low-Code/No-Code platforms. By decoupling the HTML structure from the logic (JS) and providing a global management layer, the system balances flexibility with maintainability.

Here is an explanation of how these features work together to streamline Form development in the FlowWright application.

Importing JS Files: Extending Core Functionality

Standard HTML forms are static. By allowing JS imports, the FlowWright application enables developers to transform a simple data-entry tool into a dynamic application.

• Custom Validation: Go beyond simple required attributes to perform complex logic (e.g., "If Field A is 'Premium', Field B must be greater than $500").
• API Integration: Fetch data from external databases or services to pre-fill form fields based on user input.
• Dynamic UI: Hide or show form sections based on user roles or previous answers.

Mapping JS to Form Definitions: Contextual Logic

The ability to "map" specific files to specific forms ensures that logic remains modular and scoped.

• Trigger-Based Execution: You can map a JS function to a specific Event, such as onLoad, onChange, or onSubmit. This ensures the code runs only when necessary.
• Namespace Isolation: Mapping prevents "naming collisions." Logic intended for an "Invoice Form" won't accidentally interfere with a "User Registration Form" just because both have a field named ID.
• Reusability: You can map the same validation script to ten different forms without rewriting the code ten times.

Global JS Management: Centralized Control

Managing files "globally" is the backbone of the application's scalability. Instead of burying scripts inside individual pages, they live in a central repository.

Import the Global JS file. 

On the Form Definition page, select “Import > Global JS” menu. 

Choose the JS file from the local folder and click the “Upload” button. 

The JS file is validated and imported into the application, and an alert prompts confirmation to overwrite if the file already exists. 

A confirmation message is displayed in the top-right corner. 

The JS file content is validated during import, and an invalid JS file cannot be imported.  

Map the Global JS file. 

Edit the form definition on the designer page. Select the "Page > Map Global JS" menu. 

A pop-up displays a list of Global JS files in the repository. The Global JS files are stored in the FlowWright server repository at C:\FlowWright\wwwroot\js\formEvents\formGlobalJS

The Global JS file is linked to the form definition, and a confirmation message appears in the top-right corner. 

Map the JS file locally. 

Local JS files are tied directly to a single form definition. The code is only active when that specific form is loaded. It cannot be "seen" or used by other forms in the application. The local JS files are stored in the FlowWright server repository at C:\FlowWright\wwwroot\js\formEvents and are renamed with the form's GUID. 

Edit the form definition on the designer page. Select the "Page > Upload Script File" menu. 

Choose the JS file from the local folder and click the “Upload” button. The JS file is validated and imported into the application, and an alert prompts confirmation to overwrite if the file already exists. 

A confirmation message is displayed in the top-right corner. 

Select the "Page > Upload Script File" menu. A pop-up displays the list of JS files. Use the remove icon to dissociate the JS file from the Form Definition. 

Global JS file management. 

Managing files "globally" is the backbone of the system's scalability. 

On the Form Definitions page, select “View > Global JS” menu. 

A pop-up displays a list of Global JS files, as shown in the example below. Click the download icon (black) to copy the file to the local folder. 

Click the red remove icon to permanently delete the CSS file. An alert will appear about the JS file dependency, and the scripts applied across the forms will be affected. This action cannot be undone. Click OK to confirm.