Geertjan's Blog

Minimal Oracle JET Composite Component

Geertjan Wielenga
Product Manager

Let's say you have a suite of Cloud applications and you want them to display customers in a standardized way:

If that's your business scenario, then Oracle JET composite components are a perfect fit. Here's what an absolutely minimal Oracle JET composite component looks like: 

The above is really trivial. Here's the content of "customer.html":

<h2 data-bind="text: $props.name"></h2>
<h4 data-bind="text: $props.city"></<h4

Here's "customer.json":

"properties": {
"name": {
"description": "Customer name.",
"type": "string"
"city": {
"description": "Customer location.",
"type": "string"

About the properties above, see the below:


And here's "loader.js", which connects the above two together and provides "customer" as a new HTML element:

function(oj, view, metadata) {
oj.Composite.register('customer', {
view: {inline: view},
metadata: {inline: JSON.parse(metadata)}

In a more complex scenario, you're also able to include CSS stylesheets and business logic defined in JavaScript, as outlined in an earlier blog entry on this topic

OK, now ZIP up that folder, send it to whoever is working on other Cloud applications that need to make use of the "customer" element, which they can use as follows (in e.g., "library.js") after unzipping that ZIP into the relevant folder in their application:

define(['ojs/ojcore', 'knockout', 'ojs/ojcomposite',
function (oj, ko) {
function libraryContentViewModel() {
var self = this;
self.customers = [
{name: 'Billy Bob Thornton', city: 'New York'},
{name: 'Brad Pitt', city: 'Hollywood'},
{name: 'Val Kilmer', city: 'Seattle'}
return new libraryContentViewModel();

All that the above does is load the "loader.js", include "ojs/ojcomposite" so that Oracle JET composite components are supported, and define a "customer" array.

Here's the view (e.g., "library.html") of the above viewModel, using the "customer" HTML element provided by the composite component:

<!-- ko foreach: customers -->
<customer name="{{name}}" city="{{city}}"></customer>
<!-- /ko -->

That's pretty neat and, guess what, Oracle JET components conform to the Web Components specification, except for the Shadow DOM, which is not supported.

Be the first to comment

Comments ( 0 )
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.