Add Web Components to Your Page

To use an Oracle JET Web Component, you must register the Web Component’s loader file in your application and you must also include the Web Component element in the application’s HTML. You can add any supporting CSS or files as needed.

1. In the Web 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 <12.1.0"

   This indicates that the component is compatible with JET versions greater than or equal to 3.0.0 and less than 12.1.0.

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

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

   For example, to use the demo-card standalone Web 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">
      <oj-bind-for-each data="[[employees]]">
        <template>
          <demo-card class="oj-flex-item" 
                     name="[[$current.data.name]]" 
                     avatar="[[$current.data.avatar]]" 
                     work-title="[[$current.data.title]]" 
                     work-number="[[$current.data.work]]" 
                     email="[[$current.data.email]]">
          </demo-card>  
        </template>
      </oj-bind-for-each>
   </div>

   In the case of components within a JET Pack, the HTML tag name is the component full name. The full name of a pack's member component is always a concatenation of the pack name and the component name, as specified by the dependencies attribute of the pack-level component.json file (located in the pack root folder under jet-composites). For example, a component widget-1 that is a member of the JET Pack my-pack, has the following full name that you can reference as the HTML tag name.

   my-pack-widget-1

   Note that the framework maps the attribute names in the markup to the 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><oj-bind-text value="[[properties.workTitle]]"></oj-bind-text></h5>

3. In your application’s ViewModel, set values for the properties you declared in the previous step and add the 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/ojbootstrap', 'knockout', 'ojs/ojknockout', 'demo-card/loader'],
   function(Bootstrap, 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]'
         }
       ];
     }
   
     Bootstrap.whenDocumentReady().then(function()
       {
         ko.applyBindings(new model(), document.getElementById('composite-container'));
       }
     );
   });
   

   In the case of a JET Pack, you add the loader file for the JET Pack by specifying the path based on the pack root and folder name of the component contained within the pack.

   'my-pack/widget-1/loader'

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');
   }