Data bind a component in an Oracle JET virtual DOM app

Introduction

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

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

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 Oracle JET List View 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-Virtual-DOM-app/src/components 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 Your Virtual DOM App

Push data from the JSON file into an instance of an Oracle JET MutableArrayDataProvider class.

  1. Navigate to the JET-Virtual-DOM-app/src/components/content directory and open the index.tsx file in an editor.

  2. Import the data from the store_data.json file so that it is available in your virtual DOM app.

    import { h, ComponentProps } from "preact";
import { useState, useCallback } from "preact/hooks";
import "ojs/ojlabel";
import "ojs/ojselectsingle";
import { ojSelectSingle } from "ojs/ojselectsingle";
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojchart";
import { ojChart } from "ojs/ojchart";
import * as storeData from "text!../store_data.json";

    The MutableArrayDataProvider module that you use to hold the JSON data was imported in the previous tutorial.

  3. Before the Content () function, define the Activity type alias, which includes the id field of type number and the name field of type string.

    ...
type Activity = {
   id: number;
   name: string;
}

export function Content() {
. . .

  4. Also before the Content () function, create an instance of MutableArrayDataProvider (activityDataProvider) and use the JSON.parse method to read in the JSON data.

    ...
type Activity = {
   id: number;
   name: string;
}

const parsedData = typeof storeData === "string" ? JSON.parse(storeData) : storeData;
const activityDataProvider = new MutableArrayDataProvider<Activity["id"], Activity>(
    parsedData,
   {
   keyAttributes: "id"
   }
 );

export function Content() {
. . .

  5. Import the type definition and the module for the Oracle JET List View component as well as the module for the List Item Layout component.

    . . .
import MutableArrayDataProvider = require("ojs/ojmutablearraydataprovider");
import "ojs/ojchart";
import { ojChart } from "ojs/ojchart";
import * as storeData from "text!../store_data.json";
import "ojs/ojlistview";
import { ojListView } from "ojs/ojlistview";
import "ojs/ojlistitemlayout";

  6. Save the index.tsx file.

    Your index.tsx file should look similar to final-data-bind-index-tsx.txt.

Task 3: Bind Data to the List View Component

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 instance to the data attribute of the List View component.

  1. In the open index.tsx 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-web-applayout-max-width oj-web-applayout-content">
   <h1>Product Information</h1>
   <div id="activitiesContainer">
      </div>
   <div id="itemDetailsContainer">
      <oj-label for="basicSelect">Select Chart:</oj-label>
         <oj-select-single
. . .

  2. Within the activitiesContainer div element, add an oj-list-view element with a data attribute that references the instance of MutableArrayDataProvider we created previously (activityDataProvider).

    <div class="oj-web-applayout-max-width oj-web-applayout-content">
<h1>Product Information</h1>
<div id="activitiesContainer">
        <oj-list-view id="activitiesList"
               aria-labelledby="activitiesHeader"
               data= {activityDataProvider}
               gridlines={gridlinesItemVisible}>
            </oj-list-view>
   </div>
<div id="itemDetailsContainer">
   <oj-label for="basicSelect">Select Chart:</oj-label>
   <oj-select-single
. . .

    We specify the aria-labelledby attribute as an accessibility best practice, and we also specify the gridlinesItemVisible value for the gridlines attribute to display a grid line between items in the list. We’ll perform an additional step to access the gridlines attribute of the List View component.

  3. Within the oj-list-view element you created, add an HTML template element with slot and render attributes to render each item in the list.

    return (
 <div class="oj-web-applayout-max-width oj-web-applayout-content">
    <h1>Product Information</h1>
     <div id="activitiesContainer">
       <oj-list-view id="activitiesList"
                aria-labelledby="activitiesHeader"
                data= {activityDataProvider}
                gridlines={gridlinesItemVisible}>
                      <template slot="itemTemplate" render={renderListItem}></template>
             </oj-list-view>
    </div>

  4. Within the activitiesContainer div inside the return statement, add an HTML h3 element to supply a header for the list of activities.

    <div id="activitiesContainer">
  <h3 id="activitiesHeader">Activities</h3>
  <oj-list-view
    id="activitiesList"
    aria-labelledby="activitiesHeader"
    data={activityDataProvider}
    gridlines={gridlinesItemVisible}
  >
    <template slot="itemTemplate" render={renderListItem}></template>
  </oj-list-view>
</div>

  5. In the itemDetailsContainer div, add an h3 element to supply a header for the chart.

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

  6. Before the return statement in the Content() function, add a renderListItem function that returns a list of activity names to render in the List View component.

    . . .
export function Content() {

. . .
const renderListItem =
   (item: ojListView.ItemTemplateContext<Activity["id"], Activity>
   ) => {
   return (
      <li>
         <oj-list-item-layout>
         <div class="oj-typography-body-md">
            {item.data.name}
         </div>
         </oj-list-item-layout>
      </li>
   );
   } ;

return (
   . . .
      <oj-list-view . . .

  7. Before the Content() function, declare a ListViewProps type and use it to create a variable (gridlinesVisible) with a value of visible.

    . . .
type ListViewProps = ComponentProps<"oj-list-view">;
const gridlinesItemVisible: ListViewProps["gridlines"] = { item: "visible" };

export function Content() {

  const renderListItem = . . .

  8. Save the index.tsx file.

    Your index.tsx file should look similar to index.tsx.txt.

Task 4: Run the Virtual DOM App

  1. In the terminal window, change to the JET-Virtual-DOM-app directory and run the app.

    npx ojet serve

    Your browser displays the list of activities visible in your virtual DOM app.

    The Product Information area

  2. Close the browser window or tab that displays your running virtual DOM 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.