Adding Composite Components to Your Page

To use a composite component, require its registration file and include the composite element in the application’s HTML. You can add any supporting CSS or files as needed.

1. In the composite components’s root folder, open component.json and verify that your version of Oracle JET is compatible with the version specified in jetVersion.

   For example, the demo-card example specifies the following jetVersion:

   "jetVersion": ">=3.0.0 <5.2.0"

   According to semantic version syntax, this indicates that the composite is compatible with JET versions greater than or equal to 3.0.0 and less than 5.2.0.

   If your version of Oracle JET is lower than the jetVersion, you must update your version of Oracle JET before using the composite. If your version of Oracle JET is greater than the jetVersion, contact the developer to get an updated version of the composite.

2. In your application’s index.html or main application HTML, add the composite component and any associated property declarations.

   For example, to use the demo-card composite component, add it to your index.html file and add declarations for name, avatar, work-title, work-number, email, and background-image.

   <div id="composite-container" class="oj-flex oj-sm-flex-items-initial">
     <!-- ko foreach: employees -->
       <demo-card class="oj-flex-item" name="[[name]]" avatar="[[avatar]]" work-title="[[title]]" 
         work-number="[[work]]" email="[[email]]">
       </demo-card>
     <!-- /ko -->
   </div>

   Note:

   The framework maps the attribute names in the markup to the composite component’s properties.

   • Attribute names are converted to lowercase. For example, a workTitle attribute will map to a worktitle property.

   • Attribute names with dashes are converted to camelCase by capitalizing the first character after a dash and then removing the dashes. For example, the work-title attribute will map to a workTitle property.

   You can access the mapped properties programmatically as shown in the following markup:

   <h5 data-bind="text: $properties.workTitle"></h5>

3. In your application’s ViewModel, set values for the properties you declared in the previous step and add the composite component’s loader file to the list of application dependencies.

   For example, the following code adds the ViewModel to the application’s RequireJS bootstrap file. The code also defines the jet-composites/demo-card/loader dependency.

   require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'jet-composites/demo-card/loader'],
   function(oj, ko, $) {
     function model() {      
       var self = this;
       self.employees = [
         {
           name: 'Deb Raphaely',
           avatar: 'images/composites/debraphaely.png',
           title: 'Purchasing Director',
           work: 5171278899,
           email: '[e-mail]'
         },
         {
           name: 'Adam Fripp',
           avatar: null,
           title: 'IT Manager',
           work: 6501232234,
           email: '[e-mail]'
         }
       ];
     }
   
     $(function() {
         ko.applyBindings(new model(), document.getElementById('composite-container'));
     });
   
   });
   

4. Add any supporting CSS, folders, and files as needed.

   For example, the demo card example defines a background image for the contact card in the application’s demo.css:

   #composite-container demo-card .demo-card-front-side {
       background-image: url('images/composites/card-background_1.png');
   }