active content enterpriseone pages

Across the industry, we are seeing an increased need and emphasis on the user experience. Users are instantly attracted to design that allows them to navigate websites and applications with ease. For JD Edwards Users, this hasn’t always been the case. With the latest 9.1 Tools releases, Oracle shows that they are listening to us. Tools such as the innovative Page Composer, CAFE One and One View Reporting have shifted how Users can experience JD Edwards Enterprise One.

Additionally, Oracle has also developed Active Content Pages that allow Users to take the known E1 Pages (now Classic Pages) and add enhanced content using the Oracle Javascript Extension Toolkit (JET). Essentially, content is enhanced by accessing JET; a pre-defined Javascript library by Oracle.

Preparing for the Journey

Before beginning this journey to an enhanced user experience, you”ll need to define your Use Case. For this post, I’ve created an Active Content Page for Branch Managers. Any User with the given role of a Branch Manager will be able to view a page that consists of the following:

  • Data retreived from the JD Edwards EnterpriseOne environement using AIS
  • Visualized chart displaying data for the open work orders
  • Watchlists for users to take important actions
  • Links to easily navigate into applications such as Work Orders or Address Book Revisions

Following this tutorial given by Oracle, you will be able to create your own Active Content Pages.

Stepping Through

Here is a brief overview of what was needed to create the Active Content Page based on the tutorial linked above.

Inital Layout

active content enterpriseone pages

The initial look of the page where only the header for the page and sections are given in the .html file.

active content enterpriseone pages

As you move forward, you will be able to create the panels on the .html page by referencing the .css files given.

<table class="carddeck irregular">
  <tr>
    <td class="noPadding">
      <table class="carddeck">
        <tr><!-------------------------- Inner table, first row -->
          <td>
            <div id="" class="card">
              <h1>Number of Open WO's for the Week</>
              <div id="" class="cardBody">
            </div>
          </td>
        </tr>
  <tr>
    <td class="noPadding">
      <table class="carddeck">
        <tr><!--------------------------- Inner table, second row -->
          <td>
            <div id="" class="card">
              <h1>Open Work Orders</>
              <div id="" class="cardBody">
            </div>
          </td>
        </tr>
      </table>
    </td>
    <td class="simpleList"><!------------- Watchlists pane -->
      <div class="card noMaximize">
        <h1>Watchlists</h1>
        <div class="cardBody" id="watchlistList">
        </div>
      </div>
    </td>
  </tr>
</table>
active content enterpriseone pages

You can now see the the framework of the page give the look of a Dashboard with the given sections, background image and data table.

Executing the AIS Calls

  1. To do so, AIS calls have to be setup in the .js file. Here, you will need the Application information which in this case would be for Work Orders.                                            
    work-orders
  2. In the Enterprise One environment, you can find the information needed by going to the relevant application using either fast path or the menus.
  3. Click on the about-icon icon and select the about button to retreive the information.
    active content enterpriseone pages

    Both the application, form and version information is replaced in the Javascript code. In this case, the branchManager.js file will look like this:

    function setupCards()
    {
        $('#noOfOpenWOsGraph')[0].formRequest = {
            "formName": "P48013_W48013J",
            "findOnEntry": "TRUE",
            "version": "ZJDE0001",
            "bypassFormServiceEREvent": true
        };
    
        $('#openWorkOrders')[0].formRequest = {
            "formName": "P48013_W48013J",
            "findOnEntry": "TRUE",
            "version": "ZJDE0001",
            "bypassFormServiceEREvent": true
        };
    
        $('#noOfOpenWOsGraph')[0].responseHandler = display_NoOfOpenWOsGraph;
        $('#openWorkOrders')[0].responseHandler = display_OpenWorkOrders;
    }

    Here, the formRequest object is read as part of the JET which then  executes the AIS call to render the data – via the responseHandler function – on to the page correctly. In the case below, the Work Orders in an open status are retreived.

    Once the initial setup is completed, look forward to Part 2 to enhance an E1 Page into an Active Content Page.