Using User Code

To provide best code generation flexibility, it is possible to override an existing code generating function to suit your needs. 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)\ASP.NET Maker <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

Note User Code uses events by Node.js. If you are not familiar with Node.js events, read Events first.

1. Overriding System Function

In the User Code File, you can override virtually all exposed functions. Refer to the System Functions list for functions that you can override.

Although there are many system functions, in real applications you usually only need to customize a few of them, for example,

ScriptView - This function generates code to render the fields in list, view and delete pages.
ScriptEdit - This function generates insert/update codes for the fields in add/copy and edit pages.
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:

Events.on("<SystemFunction>", (args) => {

// Your code to modify args.code

});

where <SystemFunction> is the system function name.

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

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

Example

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

The Throw() function will throw the code as error message and stop generation so that you can view the code.

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

Step 3 - Replace it.

Example 1 - Replace value (same as JavaScript string object replace method)

Events.on("FieldView", function(args) {
args.code = args.code.replace(<regular expression>, "<value>"); // Replace part of the code
});

<old_code> is part of the old code to be replaced, it can be a string or regular expression.

Example 2 - Concat values (same as JavaScript string object concat method)

Events.on("<function>", function(args) {
args.code = args.code.concat("", "", ...);
});

Example 3 - Overwrite generated code

Events.on("<function>", function(args) {
    console.log(JSON.stringify(args)); // View the args
    console.log(args.code); // View the old code
    var newcode = <your code here>; // Modfiy the old code or write your own code
    args.code = newcode; // Overwrite generated code
});

Example 4 - Set a package

projectFile.setPackage("PackageName", "1.0.0");

Example 5 - Add a Reference under ItemGroup for custom DLL (path relative to project folder)

// Output:

// <ItemGroup>

// <Reference Include="MyAssembly">

// <HintPath>path\to\MyAssembly.dll</HintPath>

// <SpecificVersion>False</SpecificVersion>

// </Reference>

// </ItemGroup>

projectFile.addReference("MyAssembly", "path\to\MyAssembly.dll", "False");

2. BeginGenerate and EndGenerate Events

You can add your listeners for the BeginGenerate and EndGenerate events to do your things before and after generation, e.g.

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

3. User functions used in Extensions

The user functions used in Extensions must take the following form:

var <Ext> = {

  FieldEdit_Prefix: function(ctl, ctlid) {
    return "...";
  }

  FieldEdit_Suffix: function(ctl, ctlid) {
    return "...";
  }

}

It is a user object with name <Ext> which should be the same as the extension name. It contains two methods "FieldEdit_Prefix" and "FieldEdit_Suffix". The "FieldEdit_Prefix" method returns a prefix value which is appended to the start of the output from the "FieldEdit" system function. Similarly, the "FieldEdit_Suffix" method returns a suffix value which is appended to the end of the output from the "FieldEdit" system function. Both methods take on a parameter "ctl" which contains the name of the field control to be created. The parameter "ctlid" contains an ID which denotes the mode of the control, e.g. "add", "edit", etc.. (See *_function.js in the "JSCalendar" and "CKEditor" extensions as examples.)

Also See:

Customizing Template
Template Tags
Object Properties
System Functions