Get caught up by reading Part 1 here first.

Upon connecting the page and the JD Edwards EnterpriseOne environment via AIS, an organization can determine various use cases for which the page layouts can be reformed. For example, a test use case was determined. A new section was added to the page layout for application links. These links allow Users to quickly access relevant applications directly from the Active Content Page; Work Orders and Address Book Revisions in this case.

Adapting to Change

Adding a New Layout Section

In order to add the links for those specific applications, the following steps were followed:

  1. Navigate to the desired application (Work Orders or Address Book Revisions in this case) and select the Tool option.
    active content

    Adding a Data Chart

    In order for the chart to be shown on the page, helper functions allow to recreate these visualizations for multiple pages. The sample helper functions can be found in the common/visualizationHelper.js file.

    The following code in the branchManager.js file makes it possible to see the bar chart  shown on the page below.

    function display_NoOfOpenWOsGraph(result)
    {
        hideLoadingAnimation('noOfOpenWOsGraph');
    
        // Declare some useful constants
        var viewModel = window.barChart1VM;
        var gridRows = result.data.gridData.Rowset;
        var groupingColumn = 'dtRequestDate_45';
        var valueLabel = "Number of WO's";
    
        // Set the graph bars to be horizontal instead of vertical.
        viewModel.orientationValue('horizontal');
    
        // Use our helper function to make the chart.
        renderBarChartRowCount(viewModel, gridRows, groupingColumn, valueLabel);
        
        // Now the graph has its date, so you can unhide it.
        $("#noOfOpenWOsGraphHolder").css({visibility:'visible'});
    }

    The renderBarChartRowCount helper function essentially allows the bar chart to be shown as it takes the variables declared above and fetches the corresponding values. More detail is given in the tutorial for your benefit.

    Before finalizing the page, Queries and Watchlists must be assigned in the home.html file. Adding a Query is shown in detail in the tutorial as well. The ability to add Watchlists is below.

    Adding Watchlists

    Finally, to add the appropriate Watchlists to the page, follow the steps below:

    menubar
    1. Log in to the JDE environment and click the watchlists icon on the top menu bar.
      active content
    2. Select the Watchlist that was created which in this case is the Overrdue Work Orders and Statuses of Work Orders.
      application-menu
    3. The Watchlist will navigate to the Work Orders application. Click the watchlist_icon icon on the top right to open the Watchlist Manager.
      active content
    4. Select the appropriate Watchlist in the Name field dropdown menu. Click the info_icon icon to get the necessary information needed to add to the pages .html file.
      active content
    5. Copy the ID shown. This will be inserted in the .html file now.

      <!– Inline javascript for task and watchlist definitions –>
      <script type=”text/javascript”>
      var generator_version=’5.0.4′;
      /* BEGIN_LIST_TASKIDS
      * END_LIST_TASKIDS */
      /* BEGIN_LIST_WATCHLISTIDS
      * watchlist=dab318ec661245178be61481914c534a
      * watchlist=e0725bfcb33a4c029764756646db3c75
      * END_LIST_WATCHLISTIDS */
      </script>

    6. The code shown above is inserted between the head tags. Since there are two Watchlists for us to show, the ID of the second was also copied here.

      <tr><!———————————- Inner table, first row –>
      <td>
      <div class=”card noMaximize”>
      <h1 class=”langstring” key=”WATCHLISTS”>WatchLists</h1>
      <!– #watchlistList div is populated by function buildWatchlists() –>
      <div class=”cardBody scrollable” id=”watchlistList”>
      </div>
      </div>
      </td>
      </tr>

    7. In the code shown above, the id watchlistList populates the Watchlists identified in the html header tags using the function buildWatchLists() found in the JET library.

    active content

    Finally, you will see the final result of the page as shown above. It includes the data chart, data table, Watchlists and the links to the applications. In order to activate this in the JDE environment, the appropriate documents need to be uploaded.

    The steps to do so can also be found in the detailed tutorial.

    Embracing the Light

    By following the tutorial, you too can gain an understanding of how Active Content Pages do what they do. Using HTML, CSS, Javascript and other files, E1 Pages can be transformed for creating better User Experiences. Essentially, you are able to build your own Dashboards. With this enhancement, Users will see the following benefits:

    • Easier use of JD Edwards Enterprise One
    • Ability to analyze data based on visuals and data retreived
    • Quick access to major tasks to attend to
    • Navigate to commonly or associated applications instantly