Extending a Fragment

When extending a fragment, an extension can override the fragment's metadata (JSON) and JavaScript. For example, to extend the fragment my-example-fragment, the fragment artifacts in the extension would be myexample-fragment-x.json and my-example-fragment-x.js.

When you extend a fragment, the fragment overrides are picked up automatically.

For example, an extension extA might define a fragment dynamic-form-employee using the following HTML and model (omitting the JavaScript for this example):

dynamic-form-employee-fragment.html

<oj-dynamic-form :id="[[ $fragment.info.id + 'oj-dynamic-form-1' ]]"
  metadata="[[ $fragment.metadata.employeeByIdMetadata.provider ]]"
  layout="{{ $constants.layoutName }}"
  value="{{ $fragment.variables.getEmployeeById }}"
  value-loading="[[ $variables.getEmployeeByIdDetailFormLoadingStatus ]]"
  rendered-fields="{{ $variables.getEmployeeByIdDetailFormRenderedFields }}"
</oj-dynamic-form>

dynamic-form-employee-fragment.json

{
  "fragmentModelVersion": "22.01.0",
  "description": "Fragment that loads a dynamic form",
  "title": "Fragment Dynamic Form Employee",
  "referenceable": "extension",
  "types": {
    "getEmployeeByIdResponse": "object"
  },
  "interface": {
    "constants": {
      "layoutName": {
        "type": "string",
        "mode": "readWrite",
        "defaultValue": ""
      }
    }
  },
  "metadata": {
    "employeeByIdMetadata": {
      "type": "vb/DynamicLayoutMetadataProviderDescriptor",
      "defaultValue": {
        "endpoint": "employees/getEmployeeById"
      }
    }
  },
  "variables": {
    "getEmployeeById": {
      "type": "fragment:getEmployeeByIdResponse"
    },
    "getEmployeeByIdDetailFormLoadingStatus": {
      "type": "string",
      "defaultValue": "pending"
    },
    "getEmployeeByIdDetailFormRenderedFields": {
      "type": "any[]"
    }
  }
...
}

A downstream extension (extB) could extend the fragment in extA above, for example, by overriding the constant layoutName in order to load a different layout template from the extension layout. The fragment artifacts in extB might look like the following (in this example, the JavaScript code is not included because there are no meaningful changes). The layoutName constant in the extension redefines the layout to be one defined in its extended layout (extB/formlayout_extended).

dynamic-form-employee-fragment-x.json

{
  "fragmentModelVersion": "22.01.0",
  "title": "Dynamic form employee fragment extension",
  "description": "A fragment extension for dynamic-form-employee-fragment",
  "extensions": {
    "constants": {
      "layoutName": {
        "description": "layout name override; layout provider loaded in base fragment",
        "defaultValue": "extB/formlayout_extended"
      }
    }
  },
  "variables": {},
  "chains": {},
  "eventListeners": {},
  "imports": {}
}