For high code generation flexibility, it is allowed to override code generating functions. To do this you need to write your event listener in JavaScript and place them in the User Code file.

By default, the User Code file is named as "usercode.js" and can be found under the "src" subfolder of the installed directory, e.g. C:\Program Files (x86)\<product name> <version>\src. However, you can rename it or put it elsewhere if necessary, just modify the value of the following registry key and specify the full path of your User Code file:

HKEY_CURRENT_USER\Software\<product name>\<version>\Settings\General
Value name: UserCode

 

1. Overriding System Function

In the User Code file, you can override the following system functions:

FieldView - This function outputs code for displaying the field in list, view and delete pages.
FieldEdit - This function outputs code for the field as form elements in add/copy, edit and search pages.

In general, you compare the generated code with the corresponding page in the template, find out which function generate the code you want to customize. Then you can modify the generated code outputted by the system function by adding a listener to the function:

where <SystemFunction> is the system function name.

For example, if you want to override the function FieldView,

1) View the original code first, make sure the code you want to replace is indeed generated by the function.

Example

Events.on("FieldView", (args) => {
    //Throw(args); // Output the args object as string and stop generation
    Throw(args.code); // Output the code and stop generation
});

Note The Throw() function will stringify the argument by JSON.stringify() and throw the string as error message and stop generation so that you can view the code.

2) Generate scripts, view the generated code, copy the code you want to replace, modify it as you need.

3) Modify args.code as you need.

Example

Events.on("FieldView", (args) => {
    args.code = args.code.replace(<pattern>, "new code"); // Replace part of the code (see note below), or
    args.code = "my code" + args.code; // Prepend your code to the end of the original code, or
    args.code += "my code"; // Append your code to the end of the original code, or
    args.code = "my code"; // Replace the old code with your own code completely
});

Note The String object's replace() method returns a new string with some or all matches of a pattern replaced by a replacement. The pattern can be a string or a RegExp, and the replacement can be a string or a function to be called for each match. If pattern is a string, only the first occurrence will be replaced.

 

2. BeginGenerate and EndGenerate Events

You can add your listeners for the BeginGenerate and EndGenerate events to do what you need by Node.js before and after generation.

Example

Events.on("EndGenerate", () => {
    // Your code to do something after generation
});

 

3. Project Settings

You can access the global PROJ object BEFORE generation. The PROJ contains all project settings and you can change everything.

Example

Add packages to package.json

PROJ.Require = {
    "@hkvstore/my-package": "1.0.0",
    ...
}; // In JSON format

Note This is just an example to show how you can change the project properties. To add packages easily, use Tools -> npm Packages, see Tools.

 

4. User Functions

You can add your own functions to the global object so you can use them in template and extensions.

Example

global.myFunc = function() {
    return "something";
};

Note Make sure you use unique function names for your functions so that they will not overwrite system functions. It is recommended that you group your own functions in an object, e.g.

global.myNamespace = {
     func1: function() {
        return "something";
    },
    func2: function() {
        return "something else";
    }
}

 

Also See

Customizing Template
Template Tags
Object Properties