You can configure or customize the code generation process by adding the next two special fields to the JSON business record sample:

  
"j2codeConfig": { ... }

"j2codeConfig_<fieldName>": { ... }

For example:

{
  "FirstName": "Jeremi",
  "MiddleName": "Paxer",
  "LastName": "Harrising",
  "Gender": "Female",
  "j2codeConfig_Gender": {
        "selectorConfig": {
            "selectorViewType": "SelectSingle",
            "selectorOptionSource": "ValueArray",
            "optionValueArrayName": "personGenderNames"
        }
    },

    "j2codeConfig": {
      "multiWordsName": "emergency, contact, person",
      "selectorOptionArraysContainer": {
          "valueArrays": {
              "personGenderNames": [
                  "Male",
                  "Female",
                  "Unknown"
              ]
          }
      }
    }

From the above, the generated root level component will be named as EmergencyContactPerson... defined in a file emergency-contact-person... And on the generated editor form, the field Gender's value will be selected from a predefined array personGenderNames.

The generated application includes editor forms and grid views for both the root-level object and its nested child objects. By default: Components for the root-level object are named SampleBusinessRecord...Components and saved in files like sample-business-record...ts. Components for child objects are named after their corresponding field names in the parent object. You can customize these names by adding a j2codeConfig block with a multiWordsName field to either the root or any child object. For example:

"j2codeConfig": {
  "multiWordsName": "temporary, employee, record"
}

In this example, the root-level object will generate components named TemporaryEmployeeRecord... and files like temporary-employee-record.... Similarly, if you add the j2codeConfig block to a child object, This will result in Angular components named using the concatenated form TemporaryEmployeeRecord... and file names like temporary-employee-record....

The generated source code files are organized into 2, 3, or 4 levels of folders. By default, the structure includes 4 folder levels. You can customize this by specifying the number of levels using the folderStructureLevels field within the root-level object’s j2codeConfig block. For example:

     
{
  "field1": "value1",
  "field2": "value2",
  ...
  "j2codeConfig": {
    "multiWordsName": "medical, officer, service",
    "folderStructureLevels": 2
  }
} 

In this example, the generated source code files will be organized into 2 levels of folders instead of the default 4. If you do not specify the folderStructureLevels field, the default structure with 4 levels will be used. The folderStructureLevels field accepts integer values of 2, 3, or 4. Any other value will default to 4 levels.

In this case, the generated folder structure will use 2 levels instead of the default 4.

The generated application provides editor forms for both the root-level object and its nested child objects. These forms may include selector controls such as drop-down lists, which require option arrays to populate their values. You can define custom selector option arrays using the selectorOptionArraysContainer within the j2codeConfig object. For example:

"j2codeConfig": {
  ...
  "selectorOptionArraysContainer": {
    "valueArrays": {
      "windowSizes": ["Extra Large", "Large", "Medium", "Small", "Tiny"]
    }
  }
}

There are thre e types of selector option arrays you can use: valueArrays – for simple arrays of strings:

"valueArrays": {
  "windowSizes": ["Extra Large", "Large", "Medium", "Small", "Tiny"]
}

objectArrays – for arrays of objects with properties:

"objectArrays": {
  "cars": [
    { "brand": "Tesla", "year": 2022, "color": "White", "vin": "ad2332ff" },
    ...
  ]
}

labelledValueArrays – for arrays of label-value pairs:

"labelledValueArrays": {
  "monthNumbers": [
    { "label": "January", "value": 1 },
    { "label": "February", "value": 2 },
    ...
  ]
}

These array types give you flexibility in how selector options are structured and rendered in the UI.

The following configuration block defines the Category field within the child object Contact:

"Contact": {
  "Phone": "12345678",
  "Category": ["Relative"],
  "j2codeConfig_Category": {
    "dataTypeCode": "ArrayString",
    "selectorConfig": {
      "selectorViewType": "CheckboxList",
      "selectorOptionSource": "ValueArray",
      "optionValueArrayName": "contactPersonCategoryNames"
    }
  }
}

You can configure an object field by embedding a j2codeConfig: { ... } block directly inside the object. For non-object child fields, include their configuration in the parent object using the format: j2codeConfig_<ChildFieldName>: { ... } In this example, the selectorConfig specifies that: The UI control should be a CheckboxList The list of options comes from a ValueArray named contactPersonCategoryNames The line "dataTypeCode": "ArrayString" indicates that the Category field accepts an array of strings. This makes the CheckboxList an appropriate control, as it allows multiple values to be selected.

In the editor form and grid view, the UI control used for a field is determined by its data type. By default, the data type is inferred from the field’s value and name in the input JSON string. You can override this default using the configuration block:

"j2codeConfig_<ChildFieldName>": { "dataTypeCode": "other_data_type_name" }

For example:

"j2codeConfig_Category": { "dataTypeCode": "ArrayString", ... }

This indicates that the Category field is assigned the J2Code data type ArrayString. Since most fields in the input JSON string are strings by default, they are initially treated as having the String data type. However, you can modify this type to LongString, Email, Date, Datetime, etc. Based on the updated data type, the corresponding UI control on the editor form will automatically adjust—either to a <textarea>, or to an <input type="..."> element with a matching type attribute.