I decided to implement sample app for JET composite component. This is powerful thing, it allows to build pretty much any UIs with HTML - package as components and reuse in the apps. Not only UI - JET composite component gets data as any other standard JET component. This allows to build your own components for forms, tables, various widgets. It allows to simplify code complexity, you could hide frequently used code into JET components and use component with parameters only on the page.
My sample is based on example from Geertjan Wielenga blog - Minimal Oracle JET Composite Component and I show how to supply data from ADF BC REST to be displayed in JET composite component. Read more about JET composite components in JET Cookbook - Composite Components. Sample is implemented with latest JET distribution 2.2.0 (it didn't work for me with 2.1.0 - JET app was blocked, after composite component was displayed) - JETSimpleCompositeApp.zip.
Composite component from sample app renders a list of customers including last and first names:
To attach composite component to JET project, you need to copy (or just implement inside existing project) package into the project. Composite component resides in simple folder structure and is based on HTML implementation, metadata JSON file and JavaScript loader file:
HTML implementation for this sample is simple, renders two text entries (binded to properties, so we could provide dynamic values in the consumer later) with different heading. You can implement here pretty much anything supported by HTML:
Metadata JSON file contains description for properties referenced in HTML UI implementation:
JavaScript loader is a central registry where HTML implementation is mapped with metadata:
Composite component is consumed in customer module. To consume it, make sure to add required references into module define block - highlighted:
On HTML side of customer module, composite component is rendered in the loop - for each entry from the array fetched from ADF BC REST service. We provide array elements as values for composite component attributes:
Data is fetched from ADF BC REST service by executing fetch operation on top of JET collection and then processing results into observable array (each entry is displayed by composite component on the UI):
My sample is based on example from Geertjan Wielenga blog - Minimal Oracle JET Composite Component and I show how to supply data from ADF BC REST to be displayed in JET composite component. Read more about JET composite components in JET Cookbook - Composite Components. Sample is implemented with latest JET distribution 2.2.0 (it didn't work for me with 2.1.0 - JET app was blocked, after composite component was displayed) - JETSimpleCompositeApp.zip.
Composite component from sample app renders a list of customers including last and first names:
To attach composite component to JET project, you need to copy (or just implement inside existing project) package into the project. Composite component resides in simple folder structure and is based on HTML implementation, metadata JSON file and JavaScript loader file:
HTML implementation for this sample is simple, renders two text entries (binded to properties, so we could provide dynamic values in the consumer later) with different heading. You can implement here pretty much anything supported by HTML:
Metadata JSON file contains description for properties referenced in HTML UI implementation:
JavaScript loader is a central registry where HTML implementation is mapped with metadata:
Composite component is consumed in customer module. To consume it, make sure to add required references into module define block - highlighted:
On HTML side of customer module, composite component is rendered in the loop - for each entry from the array fetched from ADF BC REST service. We provide array elements as values for composite component attributes:
Data is fetched from ADF BC REST service by executing fetch operation on top of JET collection and then processing results into observable array (each entry is displayed by composite component on the UI):
No comments:
Post a Comment