Adding a Composite Component to an Oracle JET Web Application

Before You Begin

This 10-minute tutorial shows you how to add a composite component to the navdrawer starter template of your Oracle JavaScript Extension Toolkit (Oracle JET) web application. You learn how to use Oracle JET tooling to create a composite component named demo-name-badge that you add to the Incidents tab of your web application.

Background

A composite component is a reusable piece of user interface that you can embed as a custom HTML element in your web application. Composite components can contain Oracle JET components, other composite components, HTML, JavaScript, or Cascading Style Sheets (CSS). Oracle JET tooling creates a folder in your web application where these elements of the composite component reside.

What Do You Need?

• A development environment set up to create Oracle JET applications, with JavaScript runtime, Node.js, and Oracle JET command-line interface installed
• Completion of the previous tutorials in this learning path so that you have created the JET_Web_Application folder

Create a Composite Component

1. Open a Command Prompt window if it isn't already open. Change to the /JET_Web_Application directory and create the demo-name-badge composite component.

   ojet create component demo-name-badge

Oracle JET tooling creates the demo-name-badge composite component in the /JET_Web_Application/src/js/jet-composites directory. The composite component name contains a hyphen and is lowercase, as required by the W3C naming conventions for custom components.

2. In your file system, navigate to the /JET_Web_Application/src/js/viewModels directory and open the incidents.js file in an editor.
3. In the incidents.js file, edit the define() block to include the composite loader library.

   define(['ojs/ojcore', 'knockout', 'jquery',
    'jet-composites/demo-name-badge/loader'],

4. Save the incidents.js file.
5. In your file system, navigate to the /JET_Web_Application/src/js/views directory and open the incidents.html file in an editor.
6. Copy the following code block for the demo-name-badge custom HTML element.

   <demo-name-badge></demo-name-badge>

7. In the incidents.html file, replace the content in the <div> tag of the Incidents Content Area with the copied code.

   <div class="oj-hybrid-padding">
     <h1>Incidents Content Area</h1>
     <div>
     <demo-name-badge></demo-name-badge>
     </div>
   </div>

8. Save the incidents.html file.
9. In the Command Prompt window, change to the /JET_Web_Application directory and run the application.

   ojet serve

The browser displays the navdrawer starter template with the components visible in the Dashboard tab of your web application.

10. In the browser that displays your JET_Web_Application, click the Incidents tab.

The browser displays the navdrawer starter template with the default message visible in the Incidents tab of your web application.



11. Leave the Command Prompt window and the browser that displays your web application open.

The ojet serve command lets you make changes to your application code that are immediately reflected in the browser.

Define Custom Composite Metadata

1. Navigate to the /JET_Web_Application/src/js/jet-composites/demo-name-badge directory and open the component.json file in an editor.
2. Copy the following code snippet and replace the contents of the component.json file with the copied code.

   {
     "name": "demo-name-badge",
     "displayName": "demo-name-badge",
     "description": "Component for displaying a badge with a name and an image",
     "version": "1.0.0",
     "jetVersion": "^5.0.0",
     "properties": {
         "badgeName" : {
         "type" : "string"
       },
         "badgeImage" : {
         "type" : "string"
       }
     }
   }

3. Save the file.

Define the Component view

1. Navigate to the /JET_Web_Application/src/js/jet-composites/demo-name-badge directory and open the demo-name-badge-view.html file in an editor.
2. Copy the following code snippet and replace the contents of the demo-name-badge-view.html file with the copied code.

   <div class="badge-face">
     <oj-avatar src="[[$properties.badgeImage]]" size="lg"></oj-avatar>
     <h3><oj-bind-text value="[[$properties.badgeName]]"></oj-bind-text></h3>
   </div>

3. Save the file.

Define the Component viewModel

1. Navigate to the /JET_Web_Application/src/js/jet-composites/demo-name-badge directory and open the demo-name-badge-viewModel.js file in an editor.
2. In the demo-name-badge-viewModel.js file, edit the define() block to include the 'ojs/ojavatar' library.

   define(
       ['ojs/ojcore', 'knockout', 'jquery',
    'ojL10n!./resources/nls/demo-name-badge-strings', 'ojs/ojavatar'],

3. Save the file.

Define the Component CSS

1. Navigate to the /JET_Web_Application/src/js/jet-composites/demo-name-badge directory and open the demo-name-badge-styles.css file in an editor.
2. Copy the following code snippet and replace the contents of the demo-name-badge-styles.css file with the copied code.

   demo-name-badge:not(.oj-complete){
     visibility: hidden;
   }
   demo-name-badge{
     display : block;
     width : 200px;
     height: 200px;
     margin : 10px;
   }
   demo-name-badge .badge-face {
     height : 100%;
     width : 100%;
     background-color : #80C3C8;
     border-radius: 5px;
     text-align: center;
     padding-top: 30px;
   }

3. Save the file.

Add Your Composite Component

1. Navigate to the /JET_Web_Application/src/js/views directory and open the incidents.html file in an editor.
2. In the incidents.html file, edit the <h1> tag to display Test Composite as the title for your demo-name-badge composite component.

   <h1>Test Composite</h1>

3. In the <div> tag of the Test Composite component, edit the demo-name-badge custom HTML element to include the badge-name and badge-image attributes.

   <div class="oj-hybrid-padding">
     <h1>Test Composite</h1>
     <div>
     <demo-name-badge badge-name="Duke Mascot"
      badge-image="https://upload.wikimedia.org/wikipedia/commons/b/b1/ThumbsUp.svg">
     </demo-name-badge>
     </div>
   </div>

4. Save the incidents.html file.
5. Open the browser to view the dynamic changes in your web application.

The browser now displays the navdrawer starter template with the composite component visible in the Incidents tab of your web application.



6. If you don't see the above format of the demo-name-badge composite component, in the Command Prompt window, press Ctrl+c, and then enter y to terminate the Oracle JET tooling batch job. Now, run the application again.

   ojet serve