Technical Articles relating to Oracle Development Tools and Frameworks

  • November 22, 2017

JET 4.1.0 - Notes for JET Custom Components Authors

Duncan Mills

The Oracle JET 4.1.0 release has just arrived and although it's only a patch-set release it does lead the way with some small changes that you, as a Composite Component developer, will need to pay attention to.

Managing Your Components CSS

If you've been creating composite components for a while you may need to look at your loader.js file.  Specifically, are you passing a CSS reference to the oj.Composite.register call - something like this:

      metadata: {inline: JSON.parse(metadata)},
      viewModel: {inline: ComponentModel},
      view: {inline: view},
      css: {inline: css}

In the configuration object that is passed to the register function you'll notice the CSS attribute being passed. This option is now deprecated and instead we expect the CSS required by a component to be loaded via the requireJS CSS plugin (css!) e.g.

define(['ojs/ojcore', 'text!./view.html', './viewModel', 'text!./component.json', 'css!./styles', 'ojs/ojcomposite'],

The CSS plugin for requireJS should already be defined in your project, but to check, look for the following line in your main.js require configuration:

'css': 'libs/require-css/css',

If you have created your composite component using the ojet command line interface then you will not have anything to do here as it is already configured to set the CSS reference up in the new way.

Marking Your Slots

In the 4.1.0 release JET has added some new binding components to allow developers to carry out tasks such as binding a text element to the model (oj-bind-text), looping (oj-bind-for-each) and simple boolean evaluations (oj-bind-if). For consistency we have also decided to rename the existing oj-slot tag (which fulfils a similar virtual function) to oj-bind-slot.  The old syntax will continue to work but you're recommended to move to the new syntax sooner rather than later.  There is no change in functionality.

Of course it's also an opportunity to upgrade any usages of Knockout data-bind syntax within your component views to use the new oj-bind-* component alternatives at the same time. See the new binding section in the JET Cookbook for examples.

Describing your Slots in component.json Metadata

One thing I'm very keen on is that components should be both well formed and well documented.  As such I always encourage the use of the description attributes on the properties, events, methods and slots of the component in the metadata. So nothing new there.  However, one question that comes up is how do I document the "default" slot as it does not really have an entry in the slots : { }  definition. The answer of course is that you should add the documentation and to do so you just refer to the default slot as an empty string ("") in the component.json.  So for example if you have a component with a slot called toolbar and also a default slot then you would have a slots definition like this:

"slots" : {
  "" : {
       "description" : "The default slot for holding the main content"
  "toolbar" : {
       "description" : "Place in the generated toolbar for your extra buttons"

That's it for this patch release, although these are minor changes which will not need attending to immediately, I'd recommend that you do make the changes sooner rather than later, just to keep current. 


CCA Series

If you've just arrived at JET composite components and would like to learn more, then you can access the whole series of articles on the topic from the Composite Component Architecture Learning Path

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.