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 RootLevelObject...Components and saved in files like root-level-object...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 multiWordName field to either the root or any child object. For example:

"j2codeConfig": {
  "multiWordName": "temporary, employee, record"
}
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 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 three 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.