Create the master view in an Oracle JET web app

Introduction

This tutorial discusses how to read master-detail hierarchical data from a local JavaScript Object Notation (JSON) document and display the data in a master view in an Oracle JavaScript Extension Toolkit (Oracle JET) web app.

In the viewModel for the Oracle JET web app, you can use the Oracle JET API to create a data provider object. The object represents a data array that you populate from the parent objects of a JSON document data store. In the view for the Oracle JET web app, the data attribute of Oracle JET custom HTML elements binds to the data through an instance of a MutableArrayDataProvider object that is declared and populated in the app’s viewModel source code.

Objectives

In this tutorial, you will data bind multiple items of the parent data objects in a local JSON document and populate the rows of an Oracle JET List View component with that data.

Prerequisites

Task 1: Download the Starter App

Skip this task if you’re continuing to work in an app that you created in the previous learning path.

  1. Rename jet_web_application_temp.zip as JET_Web_Application.zip. Extract the contents to the JET_Web_Application folder.

  2. Navigate to the JET_Web_Application folder, and restore the Oracle JET web app.

    npm install

    Your app is ready to use.

Task 2: Download the Product Images

Skip this task if you downloaded the starter app in jet_web_application_temp.zip.

  1. If the Oracle JET tooling server batch job is running in the terminal window, press Ctrl+C, and if prompted, enter y to exit the server batch job.

    The server batch job only recognizes revisions that you make to existing app files. After you create new files, you must run the web app again.

  2. Download the product_images.zip file to the JET_Web_Application/src/css/images directory.

  3. Extract the content of the zip file into a new product_images folder in the images folder.

    The path to the new folder is JET_Web_Application/src/css/images/product_images, and the folder contains the images that your app uses.

Task 3: Enhance the Activities List in the View

Modify the Oracle JET List View component to display multiple data items of the Activities array data source for each list row. To instantiate the contents of the list row data items at runtime, the Activities List View component uses an HTML template element with a slot attribute as a placeholder.

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

  2. Find the div element with id="activityItemsContainer", and delete the oj-sm-only-text-align-end helper class to prevent realignment of the Activities list contents.

    <div
  id="activitiesContainer"
  class="oj-flex-item oj-bg-info-30 oj-md-4 oj-sm-12"
></div>

  3. Find the oj-list-view custom HTML element where id="activitiesList", and add a class attribute with the value item-display.

    <oj-list-view
  id="activitiesList"
  class="item-display"
  aria-labelledby="activitiesHeader"
  data="[[activityDataProvider]]"
  gridlines.item="visible"
></oj-list-view>

    To supply the List View data source, the data attribute binds the activityDataProvider observable as a one-way data binding.

  4. In the oj-list-view element where id="activitiesList", find the template element where slot="itemTemplate", and delete the div element and the contained oj-bind-text element.

    <template slot="itemTemplate"> </template>

  5. In the empty template element, add three div elements with code to populate the List View component rows with a background image, name, and short description.

    <template slot="itemTemplate">
  <div class="oj-flex no-wrap">
    <span
      class="demo-thumbnail oj-flex-item"
      :style.background-image="[[' url('+$current.data.image+')']]"
    ></span>
    <div class="demo-content oj-flex-item">
      <div>
        <strong>
          <oj-bind-text value="[[$current.data.name]]"></oj-bind-text>
        </strong>
      </div>
      <span class="demo-metadata">
        <oj-bind-text value="[[$current.data.short_desc]]"></oj-bind-text>
      </span>
    </div>
  </div>
</template>

  6. Save the dashboard.html file.

    Your file should look similar to final-master-list-dashboard-html.txt.

  7. Navigate to the JET_Web_Application/src/css directory and open the app.css file. Here you can add app-specific CSS styles. Create an .item-display style definition with width, height, and overflow-x properties to support the display of multiple data items in the list rows.

    .item-display {
  width: 100%;
  height: 500px;
  overflow-x: hidden;
}

Task 4: Review the Activities Data Provider in the ViewModel

To populate the Activities List View component, the viewModel creates an instance of the Activities data array by using an Oracle JET MutableArrayDataProvider class. The JSON.parse method parses the local JSON data store as an argument that returns the data.

  1. Open the Oracle JET Cookbook and navigate to the Cookbook Home page. Click Framework, then Data Provider, and then Mutable Array Data Provider. In the Cookbook toolbar, click API Doc.

  2. In the API documentation, read about the MutableArrayDataProvider class. Note how you can use the optional argument keyAttributes to create an instance of an MutableArrayDataProvider class based on the key attribute of the passed-in data object.

  3. Navigate to the JET_Web_Application/src/ts/viewModels directory and open the dashboard.ts file in an editor. Find the declaration of this.activityDataProvider in the constructor method.

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

    This creates the activityDataProvider object, an instance of the MutableArrayDataProvider class. The keyAttributes property of MutableArrayDataProvider populates the Activities array based on the id attribute of the parent object. The id attribute is the key attribute for parent and child data objects in the JSON document.

  4. Close the dashboard.ts file without making any changes.

    Your file should look similar to final-master-list-dashboard-ts.txt.

Task 5: Run the Web App and Debug the App’s Cascading Style Sheet

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

    npx ojet serve

    Oracle JET tooling runs your web app in a local web browser, where you can view the databound master list. The images displayed to the left of the Activities list activity names are only partially displayed because they’re too large.

    If you resize your browser and still don’t see a page similar to this sample screenshot, confirm that you extracted the app images into the product_images folder.

    The thumbnail images are only partially displayed

  2. In your Google Chrome browser, right-click the partial image for the Soccer activity and select Inspect. The browser displays developer tools for inspecting the HTML page source.

  3. In the Elements panel, select the span class="demo-thumbnail" element. In the Styles panel, locate the highlighted element.style background-image style. Right-click the URL for the jrsoccerball.jpg image, and select Reveal in Sources panel.

    Inspect the image source in the Reveal Sources panel

  4. The Chrome DevTools Sources panel shows that the image is 300 x 300 pixels, and the size is too large to be displayed in the Oracle JET List View component. To render a thumbnail-sized image from a full-sized image, you can define a Cascading Style Sheets (CSS) style class.

    View the image properties in the Sources panel

  5. Close the developer tools window and return to the app in the browser.

Task 6: Fix the CSS and View the Master List

  1. Navigate to the JET_Web_Application/src/css directory and open the app.css file in an editor.

  2. Define the properties for the .demo-thumbnail class selector. In the list of properties, set a background-repeat property to no-repeat to show the image only once. Also define a no-wrap class selector with the property flex-wrap set to nowrap.

    .demo-thumbnail {
  border-radius: 5px;
  background-size: 40px 40px;
  background-repeat: no-repeat;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  margin-right: 10px;
}

.no-wrap {
  flex-wrap: nowrap;
}

    In the dashboard.html file, the span element references the class selector to format the Activities list image as a thumbnail by setting the demo-thumbnail CSS style on the class attribute. In the span element, the background-image CSS property sets the image based on the URL in the image property of the current Activity parent object.

    <span
  class="demo-thumbnail oj-flex-item"
  :style.background-image="[[' url('+$current.data.image+')']]"
></span>

  3. Save and close the app.css file.

    Your file should look similar to app-css-final.txt.

  4. In the web browser, reload the page.

    The browser displays the databound master list with thumbnail-sized images.

    "The thumbnail images for Activities are displayed correctly

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

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

Next Step

Proceed to the next tutorial in this module.

This tutorial is part of the module Master Detail Views in Oracle JET.

You can return to the learning path’s main page to access all the modules on building web apps.

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.