Data bind a component in an Oracle JET web app

Introduction

This tutorial shows you how to use a local JSON document in your Oracle JavaScript Extension Toolkit (Oracle JET) web app.

Oracle JET is a development toolkit that provides a number of data providers classes to manage data from various sources. In the viewModel, you’ll populate an instance of MutableArrayDataProvider with the data you read from a JSON file, then bind the MutableArrayDataProvider instance to Oracle JET custom HTML elements in the view.

Objectives

In this tutorial, you will learn how to read data from a JSON document into a data provider, add an Oracle JET List View component, and data bind the component to the JSON data objects.

Prerequisites

Task 1: Download the JSON Document and Examine the Data

  1. Download the store_data.json file to the JET_Web_Application/src/ts/ directory.
  2. Open the store_data.json file in your web browser and view the data structure. The store_data.json file contains a list of activity objects and their properties. Each activity includes an array of items with their own properties.

Task 2: Populate a Data Provider in the ViewModel

You push data from the JSON file into an Oracle JET MutableArrayDataProvider object.

  1. Navigate to the JET_Web_Application/src/ts/viewModels directory and open the dashboard.ts file in an editor.

  2. Import the data from the store_data.json file so that it is available in the ViewModel.

    import * as storeData from "text!../store_data.json";

  3. Before the DashboardViewModel class, define a type alias, Activity, that includes the id field of type number.

    ...
type Activity = {
  id: number;
}
   
class DashboardViewModel {

  4. In the DashboardViewModel class, add a type for the activityDataProvider that you will create in the next step.

    class DashboardViewModel {
   
   
   . . .
   chartDataProvider: MutableArrayDataProvider<string, {}>;
   chartData: Array<Object>;
   activityDataProvider: MutableArrayDataProvider<Activity["id"], Activity>;
   . . .

  5. In the constructror() method of the DashboardViewModel class, create an instance of MutableArrayDataProvider (activityDataProvider) and use the JSON.parse() method to read in the JSON data.

    constructor() {
   this.val = ko.observable("pie");
   ...
   
   this.activityDataProvider = new MutableArrayDataProvider<
      Activity["id"],
      Activity
      >(JSON.parse(storeData), {
         keyAttributes: "id",
      });
 . . .

  6. Import the Oracle JET List View component module.

       
import "ojs/ojlistview";

    The ojlistview module supports the view in the next section of this tutorial.

  7. Save the dashboard.ts file. Your dashboard.ts file should look similar to final-data-bind-dashboard-ts.txt.

Task 3: Data Bind the List View Component in the View

The oj-list-view element is an Oracle JET custom HTML element with interactive features that is an enhanced version of an HTML list. You provide the data to the list by binding the activityDataProvider variable populated in the viewModel to the data attribute of the List View.

  1. Navigate to the JET_Web_Application/src/ts/views directory and open the dashboard.html file in an editor.

  2. In the dashboard.html file, add a div element with an id attribute value of activitiesContainer above the itemDetailsContainer div element that contains the Oracle JET Select Single and Chart components.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <div id="activitiesContainer">
   </div>
  <div id="itemDetailsContainer">
    <oj-label for="basicSelect">Select Chart:</oj-label>
    ...
  </div>
</div>

  3. Within the activitiesContainer div element, add an oj-list-view element with a data attribute that uses a one-way binding to get the list data.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <div id="activitiesContainer">
     <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]"
       gridlines.item="visible">
     </oj-list-view>
  </div>
  <div id="itemDetailsContainer">
. . .

    We specify the visible value for the gridlines attribute so that a grid line appears between items in the list, and we include the aria-labelledby attribute as an accessibility best practice.

  4. Within the oj-list-view element you created, add an HTML template element with a slot attribute to render each item in the list.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <div id="activitiesContainer">
   <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]"
        gridlines.item="visible">
     <template slot="itemTemplate"> </template>
     </oj-list-view>
  </div>
</div>

  5. Within the template element, add another div element that contains an oj-bind-text custom HTML element with a value attribute that uses a one-way binding to get the list data from the current data object.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <div id="activitiesContainer">
    <oj-list-view id="activitiesList" aria-labelledby="activitiesHeader" data="[[activityDataProvider]]"
      gridlines.item="visible">
      <template slot="itemTemplate">
        <div>
          <strong>
            <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
          </strong>
        </div>
      </template>
    </oj-list-view>
  </div>
  <div . . .

  6. Add an HTML h3 element to supply a header for the list of activities.

    <div class="oj-hybrid-padding">
  <h1>Product Information</h1>
  <div id="activitiesContainer">
    <h3 id="activitiesHeader">Activities</h3>
    <oj-list-view id="activitiesList" . . .

  7. In the itemDetailsContainer div, add an h3 element and an oj-label element to supply a header for the chart.

    . . .
<div id="itemDetailsContainer">
  <h3>Item Details</h3>
  <oj-label for="basicSelect">Select Chart:</oj-label>
  . . .
</div>

  8. Save the dashboard.html file. Your dashboard.html file should look similar to final-data-bind-dashboard-html.txt.

Task 4: Run the Web App

  1. In the terminal window, change to the JET_Web_Application directory and run the app.

    npx ojet serve

    Your browser displays the list of activities visible in the Dashboard tab of your web app.

    The Product Information area.

    Description of the illustration output.png

  2. Close the browser window or tab that displays your running web app.

  3. In the terminal window, press Ctrl+C, and if prompted, enter y to exit the Oracle JET tooling batch job.

  4. Leave the terminal window open for your next tutorial.

Next Step

To proceed to the next tutorial in this learning path, click here.

More Learning Resources

Explore other labs on docs.oracle.com/learn or access more free learning content on the Oracle Learning YouTube channel. Additionally, visit education.oracle.com/learning-explorer to become an Oracle Learning Explorer.

For product documentation, visit Oracle Help Center.