Oracle JET Composite Components - Manual for JET Coder

JET Composite Components - are useful not only to build UI widgets, but also to group and simplify JET code. In this post, I will show how to wrap JET table into composite component and use all essential features, such as properties, methods, events and slots.

Sample app code is available on GitHub. JET table is wrapped into composite component, it comes with slot for toolbar buttons:

What is the benefit to wrap such components as JET table into your own composite? To name a few:

1. Code encapsulation. Complex functionality, which requires multiple lines of HTML and JS code resides in the composite component
2. Maintenance and migration. It is easier to fix JET specific changes in single place
3. Faster development. There is less steps to repeat and less code to write for developer, when using shorter definition of the wrapper composite component

Sample application implements table-redsam component, for the table UI you can see above. Here is component usage example, very short and clean:

All the properties specific to given table are initialised in the module. Developer should provide REST endpoint, key values, pagination size and column structure. The rest is happening in the composite component and is hidden from the developer, who wants to implement a table:

Properties

We should take a look into array type property. Such property allows to pass array into component. This can be useful either to pass array of data to be displayed or array of metadata to help with component rendering. In our case we pass array of metadata, which helps to render table columns. Array type property is based on two attributes - Header Text and Field. Properties are defined in composite component JSON file:

Properties are retrieved from variable inside component and are assigned to local variables:

This is table implementation inside component, columns are initialised from component property:

Slots

Slot defines a placeholder, where developer who is using composite component can add additional elements. Slot is defined in component JSON definition file:

To define slot, JET slot component should be defined inside composite. You can control layout and location where slot will be rendered:

In our case, we use slot for table toolbar buttons. These buttons are added later, when developer is using composite. To place button into slot, put button inside composite component tag and assign defined slot name for the button. This will allow to render button in the slot:

Methods

Method defined in composite component, can be called from outside. In example below, I call JS function from toolbar slot button:

Function gets composite by ID and calls exposed method:

Method should be defined in composite JSON definition:

Method is implemented inside composite JS module:

Events

Events allows to implement external listeners. Basically this allows to override composite logic in external functions. Event is declared in composite JSON definition:

Composite tag contains event property mapped with external JS function, which will be called when event happens inside composite:

Function code in the module, it prints current row selection key:

Table is defined with listener property inside composite:

Listener inside composite initiates event, which will be distributed outside and handled by method defined in composite tag on-handle-selection property:

Let's see how it works. Call Method button invokes method inside composite:

Table row selection first triggers listener inside composite, then it initiates event and external listener is invoked too:

I think this lists pretty much all of the essential functionality given by JET composite components. I hope you will find it useful in your development.

JET 4.1.0 Composite - List Item Action and Defferred Loading

I was reviewing JET 4.1.0 features and decided to build simple composite component. Would like to share some of the items I learned.

Composite component comes with collapsible UI and action link, it implements list item, which can be rendered in any kind of parent UI container:

When item is expanded, more info is displayed:

Once user clicks on Open link, JS call is made and key from current item is printed in the background:

Let's take a look into component metadata. I'm using several properties and one event. Through event we can call JS method outside of composite component, this can be very useful:

How this event is used? Take a look into composite HTML implementation, click is handled by JS method, inside that function event will be initialized:

One more interesting thing - I'm using JET Defer functionality, to render HTML expandable content, when item is expanded. This allows to minimize client side load by lazy loading, renders content when it is displayed:

JS method, which handles click - creates event. This will allow to execute event implementation method outside composite component. Syntax looks pretty similar to ADF Server listener call:

Naming of the event is important. If event name is openDetails, then make sure to use on-open-details as property name for the event handler in composite component interface. Here I define external method to be invoked when event is fired:

Here is the code for event listener JS method in main view module:

Let's see how JET Defer works on runtime. This is source from JET running app, when list item is rendered initially, there is no content for expanded block - it only contains JET Defer block:

After we expand it:

Content is rendered in source. This is called lazy loading and this concept allows to improve performance, especially for large lists (or tabs, etc.), when a lot of content is rendered:

Now few hints how to create JET Composite with OJET tooling. Run similar command (if you run this command outside JET app context, it will create new shell JET app with this component. if you run command in context of JET app, it will create component inside the app):

ojet create component list-itemrs

This will create JET Composite with given name. To be able to run JET Composite from index page, add applyBindings to main.js require block:

Don't forget to add JET composite module and actual composite loader:

Finally add your own JET Composite tag to index.html:

Sample code can be accessed in GitHub repository (run ojet restore) - list-itemrs.