Adding an Oracle JET Component to Your Page

Use the Oracle JET Cookbook recipes and API documentation to locate examples that illustrate the specific component and functionality you want to add to your page.

To add an Oracle JET component to your page:

If needed, create the application that will house your main HTML5 page and supporting JavaScript. For additional information, see Getting Started with Oracle JET Application Development.

  1. Using the Oracle JET Cookbook, select the Oracle JET component that you want to add.

    Each component will usually contain several examples illustrating common use cases. Look for an example that comes closest to your use case.

  2. Follow the example’s recipe and add the markup, modifying as needed, to your HTML page.

    All Oracle JET recipes include the basic format for initializing the component using Knockout.js data-bind syntax. The code below shows the markup for the ojInputDateTime example shown in the Date and Time Pickers demos.

    <div id="div1">
      <label for="dateTime">Default</label>
      <input id="dateTime"
             data-bind="ojComponent: {component: 'ojInputDateTime', value: value}"/>
      <br/><br/>
      <span class="oj-label">Current component value is:</span>
      <span data-bind="text: value"></span>
    </div>
    

    In this example, the ojInputDateTime component is defined with the value option using the ojComponent binding, which is a Knockout binding that initializes the Oracle JET component. Each Oracle JET component includes additional options that are defined in the component's API documentation.

    You can also use standard jQuery syntax to initialize the component, and the API documentation provides examples for doing so. However, the Oracle JET team recommends that you use the Knockout binding to simplify working with your view model.

    For more information about Knockout.js data-bind syntax, see http://knockoutjs.com/documentation/binding-syntax.html.

    Note:

    If you use the foreach Knockout binding with an Oracle JET component, you cannot place it on the same node as the ojComponent binding. Instead, create a nested virtual element and place it before the ojComponent binding.

    <!-- ko foreach: drinkRadios -->
    <label data-bind="attr: {for: id}"></label>                              
    <input type="radio" name="beverage"
           data-bind="value: id, attr: {id: id},
             ojComponent: {component: 'ojButton', label: label}"/>
    <!-- /ko -->
    
  3. Use the Oracle JET Cookbook for example scripts and the syntax to use for adding the component to your RequireJS bootstrap file or module.

    For example, the basic demo for the ojInputDateTime component includes the following script that you can use in your application.

    require(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojdatetimepicker'], 
    function (oj, ko, $)
    {
    
      function SimpleModel()
      {
        this.value = ko.observable(oj.IntlConverterUtils.dateToLocalIso(new Date(2013, 0, 1)));
      }
       
      $(document).ready(function ()
      {
        ko.applyBindings(new SimpleModel(), document.getElementById('div1'));
      });
       
    });
    

    Important:

    If you’re working with a Starter Template or define modules for different sections of your page, you can’t simply copy and paste the cookbook example. The Cookbook uses a require() call to load and use the needed libraries in a single bootstrap file. The starter file that you are pasting into is a RequireJS module which uses define() instead to create a module that can be used by other parts of your application. For additional details, see Modifying the Web Nav Drawer Starter Template Content.

    If you already have a RequireJS bootstrap file or module, compare your file with the Cookbook sample and merge in the differences. If you're not using RequireJS, you can use the HTML script element to add the $(document).ready(function()) to your page. However, RequireJS is required for internationalization and Oracle JET data visualization component support and is also recommended by the Oracle JET team. For details about working with RequireJS, see Using RequireJS for Modular Development.