Fragments

Fragments encapsulate a reusable piece of UI, model and code (HTML, JSON and JavaScript) that can be shared across pages in an application.

Fragments can be added and reused in pages and other fragments in applications, extensions and app UIs. A fragment can also be used multiple times in the same page, for example, providing different sets of input parameters to the same fragment, as shown here:

<oj-vb-fragment id="editProd1" name="edit-product">
    <oj-vb-fragment-param name="products"
             value="[[ $page.variables.productListDynamic ]]"></oj-vb-fragment-param>
</oj-vb-fragment>

<oj-vb-fragment id="editProd2" name="edit-product">
    <oj-vb-fragment-param name="products"
             value="[[ $page.variables.productListStatic ]]"></oj-vb-fragment-param>
</oj-vb-fragment>

A fragment can also be 'nested' in another fragment. However, when looking at the structure of applications and extensions, every fragment in a page, no matter how deeply it's 'nested', is an independent unit that encapsulates its state and 'logic, and is not 'aware' of its container.