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": {}
}