Building an Active Content EnterpriseOne Page

oracle.com/webfolder/technetwork/tutorials/jdedwards/OBE/Active Content/active_content_e1_page.html

Before You Begin

Purpose

This OBE shows you how to build an Active Content EnterpriseOne Page.

Time to Complete

Approximately 2 hours

Background

Active Content EnterpriseOne pages are classic EnterpriseOne pages that include enhanced functionality provided by the
Oracle JET (JavaScript Extension Toolkit) library. Active Content pages are a collection of HTML, CSS, and JavaScript files
that can contain any of the following elements:

Specific information from frequently used applications along with links to the programs
Charts and graphs that display the results of frequently used queries
One View Watchlist results
Interactive process flows
URL links
Displays from and links to web pages

Scenario

You create an Active Content EnterpriseOne Page for a Branch Manager that consists of the following elements:

A bar chart
A data table displaying open work orders
A panel containing watchlist results

What Do You Need?

A web browser (recommended web browsers include Google Chrome or Mozilla Firefox with the Firebug extension).
A text editor suitable for editing Javascript, HTML, and CSS files. For example, Notepad++.
The Active Content Pages Tutorial.zip file.

Getting Started
1. Download and extract the Active Content Pages Tutorial.zip file to your working directory. This file contains the
following items:

industry_content folder: This folder contains the source code for the Active Content Pages library, the JET
library, and sample Active Content EnterpriseOne Pages for industry-specific content.
e1pagehelper.js file: This file allows your pages to work even when you are not viewing them on a JAS server.
This file is on the JAS server.
milestones folder: This folder contains the finished product code for the milestones that you will complete. If you
face any problems while building the page, you can compare your work to the files in this folder.
Note: Each of the subsequent topics and sub-topics has a milestone<number> in the title to indicate the
milestone with which the topic or sub-topic is associated. For example, if you want to compare your work
described in the topic associated with milestone1, you can refer to the code in the milestone_1 sub-folder inside
the milestones folder.

2. Change the browser settings to bypass the security check when loading files saved on your hard drive. To achieve this,
pin the browser to your taskbar, navigate to the Properties window, and in the Target field, add the following after the
executable name:

--allow-file-access-from-files

3. Open the e1pagehelper.js file in your text editor and set valid values for the following variables at the beginning of the
file:
var AIS_BASE_URL = "http://den12345jems.us.oracle.com:9876";

1/20
 var AIS_USER = 'SALLY';
var AIS_PASS = 'GOLDFISH';
4. Set the JAS server configuration settings in the Upload Inclusion List section in Server Manager. These settings are
available under Security in the Advanced view mode in the Configuration section:
E1Page Content File-Extension List =
asp,bmp,css,cur,dat,dip,gif,htm,html,ico,img,jfif,jpe,jpeg,jpg,js,map,mf,pdf,png,scss,svg,tif,tiff,txt,woff,xml,zip
Setting for Strict Checking of File Upload and Download = false
Setting for Strict File Extension Check = false

Creating the Basic Structure of the Page (milestone1)

1. In a web browser, open the newPage.html file stored in the industry_content directory.

You see a 2x2 grid of four blank cards on this page. When you complete this topic, your page will look like this:

2. In the industry_content directory, rename the following files as follows:

newPage.html as branchManager.html
newPage.css as branchManager.css
newPage.js as branchManager.js
3. In your text editor, open the branchManager.html file and locate the line for loading the newPage.css file:

<!-- This loads any styling specific to this page -->

<link rel="stylesheet" type="text/css" href="newPage.css" />

Change this line to load the branchManager.css file instead of the newPage.css file:

<!-- This loads any styling specific to this page -->

<link rel="stylesheet" type="text/css" href="branchManager.css" />

4. Repeat the previous step to load the branchManager.js file instead of the newPage.js file:

2/20
 <!-- Javascript specific to this page. -->
<script type="text/javascript" src=" branchManager.js "></script>

5. Find the <body> tag, and enter a unique and meaningful value for the pageId attribute.
This pageId attribute is used as the key to persist user preferences for the page, so it is important that it is unique on
your system. It can consist of alphabets and the underscore, and can be 1 to 10 characters in length. For this page, we
will enter branch_mgr as the pageId attribute value.

<body onload="init();" pageId="branch_mgr">

6. Change the page title from Page Title to Branch Manager. In the <title> tag and the first <h1> tag, replace Page
Title with Branch Manager.
Next, we will change the table structure to get the tile structure for the page. This is how the code looks like currently:

<table class="carddeck">
<tr>
<td>
<div id="" class="card">
<h1>My Card #1</h1>
<div id="" class="cardBody">
</div>
</div>
</td>
<td>
<div id="" class="card">
<h1>My Card #2</h1>
<div id="" class="cardBody">
</div>
</div>
</td>
<td>
<div id="" class="card">
<h1>My Card #3</h1>
<div id="" class="cardBody">
</div>
</div>
</td>
<td>
<div id="" class="card">
<h1>My Card #4</h1>
<div id="" class="cardBody">
</div>
</div>
</td>
</tr>
</table>

This code gives you four cards in a regular 2x2 grid, constructed using a simple HTML table. This code works if you
want a regular m-by-n grid of equal size cards. However, you want to create a page with one narrow, fixed-width card on
the right, and two cards (one on the top and another at the bottom) of equal height on the left.

You do this by using two tables. The first table splits the screen left and right. The second table is nested inside the left
cell and splits the space vertically.

7. Change the code for the table structure as follows:

3/20
 <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>

Note that you added several CSS classes. Here a few key points about the CSS classes:

The irregular class on the outer table indicates that the cells will not all be the same size as one another.
The noPadding class on the cell containing the inner table prevents double padding around the cells of that nested
table, making things line up correctly.
The simpleList class makes the watchlist card have a fixed width (of ~200 pixels) instead of dynamically sizing.
The noMaximize class prevents the watchlists pane from being maximizable.
8. Open the branchManager.css file in your text editor, and change the background image to use the branchManager.jpg:

div#background
{
background-image: url("branchManager.jpg");
}

9. Open the branchManager.html file in your web browser.

This is how your page looks like now:

Adding Card Elements (milestone2)

4/20
You can add elements to your cards to make them behave in a certain way. For example, you can add Oracle JET (JavaScript
Extensions Toolkit) visualizations to your cards.
Change your table to look as follows (if you need to copy and paste some parts of this code, you can refer to the
branchManager.html file in the milestone_2 folder):

<table class="carddeck irregular">

<tr>
<td class="noPadding">
<table class="carddeck">
<tr><!-------------------------------Inner table, first row -->
<td>
<div class="card withLoadingAnimation" id="noOfOpenWOsGraph">
<h1>Number of Open WO's for the week</h1>
<div id="noOfOpenWOsGraphHolder" class=cardBody jetDvtHolder">
<div class="ojet_dvt" id="ojNoOfOpenWOsgraph" data-bind="ojModule: { name: setBarChart1}"></div>
</div>
</div>
</td>
</tr>
<tr><!-------------------------------Inner table, second row -->
<td>
<div class="card withLoadingAnimation" id="openWorkOrders">
<h1>Open Work Orders</h1>
<div id="openWorkOrdersHolder" class=cardBody scrollable withFooter"></div>
<div class="cardFooter">
<input type="button" value="Search for Work Orders" onclick="top.doFastPath('P48013');"/>
</div>
</div>
</td>
</tr>
</table>
<td>
<td class="simpleList"><!----------------- Watchlists Pane -->
<div class="card noMaximize">
<h1>Watchlists</h1>
<div class="cardBody scrollable" id="watchlistList">
</div>
</div>
</td>
</tr>
</table>

Here is an explanation of the modifications you made to the code above:

You added a class, withLoadingAnimation, to the cards on the left.

You defined an ID for all the three cards.
Note: For the first two cards, it does not matter which ID you choose as long as they are unique and you maintain
consistency. However, for the watchlist card, it is important that you use the same ID as defined in the above code.

You defined a unique ID for each of the two card bodies for the first two cards.
You added the JET visualization to the first tile.
Note: You cannot see the JET visualization yet because it is hidden until the data is retrieved from the server.

Notice the value of the data-bind attribute: data-bind="ojModule: { name: setBarChart1}". Here, the system
uses setBarChart1 to know what files to load dynamically to define the visualization.
The details of how the visualizations are defined are beyond the scope of this OBE, but if you need to add
additional visualizations, here are the directories and files you should look at:
templates/ - This is the directory where the HTML file for the visualization objects is stored. Note the
naming conventions.
js/modules/ - This is the directory where the JavaScript file for the visualization objects is stored. Note the
naming conventions.
js/main.js - This file contains the code that defines the function for adding visualizations.
You added the classes, scrollable and withFooter, to the Open Work Orders card body. You also added the
scrollable class to the Watchlists card.
scrollable makes the card scrollable if there is excess data that does not fit into the space.
The top card on the left does not need to be scrollable because it contains a bar chart and the chart will
automatically resize if required.

withFooter sets aside a strip at the bottom of the card which you can use to add some element. In this
example, it is a button.

5/20
 You added <div class="cardFooter"> to the Open Work Orders card. Inside it, there is a button with the text
Search for Work Orders, and clicking this button will launch the P48013 application once the files are uploaded to
a JAS server.

If you open the branchManager.html file in a web browser, your page should look like this:

Adding AIS Calls (milestone3)

You can add AIS calls to your tiles to retrieve data from forms in the EnterpriseOne web client.

1. Open the branchManager.js file.

This file contains two empty methods.

2. Define the second method, setupCards, as follows:

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;
}

The $('#noOfOpenWOsGraph')[0] is a jQuery notation. It is essentially equivalent to

document.getElementById('noOfOpenWOsGraph'). What you have done in this step is to locate your tiles and attach
these two components:

formRequest - an object that describes the AIS call you want this card to make. In this example, you want to
perform a Find action on the grid for the P48013 application, form W48013J.
responseHandler - the name of a function you will write that takes the data response and renders it nicely.
The active content page library will read the formRequest object, automatically execute the AIS call on your behalf,
and then pass the result to the responseHandler function.

Note: You may notice that both of the formRequests are currently identical. This is because, later in the course of
this tutorial, you will add query support to these two cards. At that point, you will be executing the data lookup
twice because you will be executing a different lookup using a different query. However, in the case where you

6/20
 have multiple tiles that both make the same AIS call, what you need to do is choose one card to be the master
card, and attach the formRequest and responseHandler to the master card only, and have the responseHandler
take care of performing the rendering on the master card as well as all of the subordinate cards.

3. Write the rendering functions. For this, add the following lines of code after the setupCards function:

function display_OpenWorkOrders(result)
{
hideLoadingAnimation('openWorkOrders');

console.log("Open Work Orders Returned");

console.log(result);
}

function display_NoOfOpenWOsGraph(result)
{
hideLoadingAnimation('noOfOpenWOsGraph');
}

The above functions hide the loading animations. The first function also loads the response from the server.

4. Open the branchManager.html file in your web browser. Notice how the loading animation disappears after a few
seconds.
5. Right-click anywhere on the page and select Inspect Element.
The developer tools is displayed.

6. Click the Console tab.

Review the message log.

7. Expand the response object to see what the data looks like. This is the data that you will see performing a Find action
on form W48013J.

7/20
Building the Table and Bar Chart

Building the EnterpriseOne Grid (milestone4)

You want the following grid columns on the Open Work Orders tile:

Order No.
Type
2nd Item Number
Item Description
Item UOM
Order Date

1. Locate the names of the grid columns by drilling into the row objects in the browser console. The parameter name is a
combination of the type code (for example, mn for math numeric), the name, and a numeric ID. Here is an example of
how the parameter name for OrderNo is displayed in the browser console:

2. Open the branchManager.js file and modify the display_OpenWorkOrders function to look like this:

function display_OpenWorkOrders(result)
{
hideLoadingAnimation('openWorkOrders');

var gridRows = result.data.gridData.rowset;

var parent = $('#openWorkOrdersHolder');

var fieldNames = [
'mnOrderNo_13',
'sType_12',
's2ndItemNumber_75',
'sItemDescription_92',
'sItemUOM_163',
'dtOrderDate_44'
];

var columnLabels = [
'Order No.',
'Type',
'2nd Item Number',
'Item Description',
'Item UOM',
'Order Date'
];

parent.append(buildHTMLGrid(gridRows, fieldNames, columnLabels));

console.log("Open Work Orders Returned");

console.log(result);
}

Here is an explanation of what you did in this step:

You identified the gridRows array.

You located the parent element in the HTML DOM where you want to add the table.

8/20
 You made an array of the internal names of the fields you want displayed on the tile.
You made an array of the names you want displayed.
You called the function to build the grid, and appended the returned <table> to the HTML DOM.
You may recall that there were numerous entries in the AIS response for each object in the browser console. In the
next step, you will reduce the data in the response for the objects.

3. In the setupCards function, locate the lines where you defined the formRequest and add the returnControlIDs
property as follows:

$('#openWorkOrders')[0].formRequest = {
"formName": "P48013_W48013J",
"returnControlIDs": "1[13,12,75,92,163,44]",
"findOnEntry": "TRUE",
"version": "ZJDE0001",
"bypassFormServiceEREvent": true
};

Here, the value 1 is the grid, and the numbers in the square bracketed array are the numeric IDs of the fields on the
grid.

4. Open the branchManager.html file in your web browser.

Review the data table on the bottom tile of your page.

5. Navigate to the browser console and notice that the AIS response for each object now contains only the data that you
require.

9/20
Building the Bar Chart (milestone5)

In this topic, you will build a bar chart that counts the number of work orders that have a specific requested date.

1. Narrow down the returned data for the bar chart to retrieve only the requested date data. In the setupCards function,
locate the lines where you defined the formRequest for the bar chart and add the returnControlIDs property as
follows:

$('#noOfOpenWOsGraph')[0].formRequest = {
"formName": "P48013_W48013J",
"findOnEntry": "TRUE",
"returnControlIDs": "1[45]",
"version": "ZJDE0001",
"bypassFormServiceEREvent": true
};

Next, you will translate this data into a bar chart.

2. Review the js/modules/barChart1.js file. This is the file that defines the JET bar chart visualization.

10/20
define(['ojs/ojcore' ,'knockout'],
function(oj, ko) {
/**
* The view model for the main content view template
*/
function myViewModel() {
var self = this;

/* toggle button variables */

self.stackValue = ko.observable('off');
self.orientationValue = ko.observable('vertical');
self.typeValue = ko.observable('bar');

/* chart data */
self.barSeries = [{name: "Series 1", items: [42, 34]},
{name: "Series 2", items: [55, 30]},
{name: "Series 3", items: [36, 50]},
{name: "Series 4", items: [22, 46]},
{name: "Series 5", items: [5, 26]}];
self.barGroups = ["Group A", "Group B"];

this.barSeriesValue = ko.observableArray([]);
this.barGroupsValue = ko.observableArray([]);

//this.barSeriesValue = ko.observableArray(self.barSeries);
//this.barGroupsValue = ko.observableArray(self.barGroups);

window.barChart1VM = self;

/* toggle buttons*/
self.stackOptions = [
{id: 'unstacked', label: 'unstacked', value: 'off', icon: 'oj-icon demo-bar-unstack'},
{id: 'stacked', label: 'stacked', value: 'on', icon: 'oj-icon demo-bar-stack'}
];
self.orientationOptions = [
{id: 'vertical', label: 'vertical', value: 'vertical', icon: 'oj-icon demo-bar-vert'},
{id: 'horizontal', label: 'horizontal', value: 'horizontal', icon: 'oj-icon demo-bar-
horiz'}
];
}

return myViewModel;
});

Following are the key lines in this file:

window.barChart1VM = self;
this.barSeriesValue = ko.observableArray([]);
this.barGroupsValue = ko.observableArray([]);
The first line saves a global variable (window.barChart1VM) that enables you to access the view model for this bar
chart so that you can set its data and define the settings to render the chart (for example, horizontally or vertically).

The second and third lines show you the functions that you use to pass in the new data.

The file contains the following sample values for the data, though the lines applying this sample data are
commented out:

self.barSeries = [{name: "Series 1", items: [42, 34]},

{name: "Series 2", items: [55, 30]},
{name: "Series 3", items: [36, 50]},
{name: "Series 4", items: [22, 46]},
{name: "Series 5", items: [5, 26]}];
self.barGroups = ["Group A", "Group B"];

If you passed in the above data, you get a chart that looks like this:

11/20
 In this example, barGroups is the array that defines the names of the groups. barSeries is the array that has the
data for each data series. The barSeries array has a name and a list of values. Look at the second entry in this
array. The name is Series 2, and the two values – one for Group A, another for Group B - are 55 and 30. If you
look at the graph, you see that Series 2 is green, and Group A has a value of 55 while Group B has a value of 30.

To build your bar chart, build a series array and a groups array.The groups array will have one entry per date. The
series array will have one entry with the name, Number of WO's, and a list of values. The values in the series array
will be a count for each date, in the same order as the groups array.

3. Open the branchManager.js file in your text editor and locate the function for displaying the bar chart. The code for the
function should look like this:
Note: You can copy-paste the code. However, it will be a good practice to read and understand the code because this is
the model you will use if you have to build more charts and graphs in the future.

12/20
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');

// Make empty data structures for the groups. Each group will be a requested date.
var groupsHash = {};
var groupsArray = [];

// Iterate through the data rows and populate the group objects.
for (var i = 0; i < gridRows.length; i++)
{
var reqDate = gridRows[i][groupingColumn].value;
/* In JavaScript, an object is equivalent to a named hash array. In other words,
* the following expressions are exactly equivalent:
* gridRows[i].dtRequestDate_45.value
* gridRows[i]["dtRequestDate_45"].value
* or even
* gridRows[i].dtRequestDate_45["value"]
*/

// Look to see if you have seen this date before

var dateObject = groupsHash[reqDate];
if (!dateObject)
{
// You have not encountered this before: create a new record for it.
dateObject = {
date: reqDate,
count: 1
};

// Now save a pointer to this in the named hash, and in the array.
groupsHash[reqDate] = dateObject;
groupsArray.push(dateObject);
}
else
{
// You have seen this date before. Increment the count on the existing record.
dateObject.count++;
}
}

// You have now added up the number of times you have seen each date, and you need to
// build your series and groups arrays.

var groups = [];

var series = [
{
items: [],
name: valueLabel
}
];

// Iterate through your groupsArray, and add entry to:

// groups - the list of labels
// series[0].items - the list of values for your data series.

for (var i = 0; i < groupsArray.length; i++)

{
groups.push(groupsArray[i].date);
series[0].items.push(groupsArray[i].count);
}

// groups and series are complete; apply them to your view model
viewModel.barGroupsValue(groups);
viewModel.barSeriesValue(series)

// Now the graph has its date, so you can unhide it.
$("#noOfOpenWOsGraphHolder").css({visibility:'visible'});

13/20
 }

4. Open the branchManager.html file in your web browser. Your page will look like this:
Note: The data may look different because you may have different data on your server.

Note: Note that there is not enough space to display all of the dates on the y-axis. Also, since you did not sort the data,
there are not as many dates as the bars.

Building the Bar Chart the Simpler Way (milestone6)

If you have to build multiple Active Content Pages and several bar charts, you may have to recreate the same types of
visualization over and over again. To make things easier for you, some of this functionality has been abstracted out into some
helper functions that take a set of gridRows and update the visualization viewModel for you.
The sample helper functions are available in common/visualizationHelper.js. Currently, the following functions are
available:

function renderBarChartSimple(viewModel, gridRows, xLabelColumn, valueColumns, valueColumnLabels)

function renderBarChartSummed(viewModel, gridRows, groupingColumn, valueColumn, valueLabel)
function renderBarChartRowCount(viewModel, gridRows, groupingColumn, valueLabel)
function renderBarChartSummedSubgrouping(viewModel, gridRows, primaryGroupingColumn,
secondaryGroupingColumn, valueColumn, specialStringForBlankSecondaryGrouping)

Note: The visualizationHelper.js file contains comments that provide information about what each of the above functions
is used for and descriptions of each of the parameters mentioned above.

Note the third function - renderBarChartRowCount. In the previous topic, for building your bar chart, you had a set of
gridRows, a viewModel, a groupingColumn (requested date), and a label/name (Number of WO's) to define the count of rows
for each date.

In this topic, you will use the renderBarChartRowCount function to display the same bar chart that you had created in the
previous topic.

1. Open the branchManager.js file, and rewrite the code for the display_NoOfOpenWOsGraph function as follows:

14/20
 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'});
}

2. Open the branchManager.html file in your web browser.

You will notice that this bar chart looks exactly like the one you had created in the previous topic.

Note: Though you can create the bar chart by using the sample helper function, it will be a good practice to understand how
to build the visualizations using the steps in the previous topic so that you can build your own visualizations later.

Filtering the Data by Using Queries (milestone7)

At this point, you will notice that your bar chart and table show all the work orders that are displayed in the P48013
application. Also, you will notice that the chart and the table display only the first 100 records, truncating the remaining
records.

You can filter the data so that the chart and the table display only the data that you require.

1. Log in to JD Edwards EnterpriseOne and launch the P48013 application.

2. Click the Manage Queries icon, create two queries with the following names in the Query Manager side panel, and
then define the criteria:
Work Order Status
Open Status By Date
Here is an example of the criteria used for the Work Order Status query:

15/20
 Here is an example of the criteria used for the Open Status By Date query:

Note: The Request Date (QBE) field contains sample data. In a production environment, your criteria may differ
and may look like this:

3. Click the About Query icon in the Query Manager side panel, and note the Object Name for the queries:

4. Open the branchManager.html file in your text editor, locate the line defining the classes for the two cards that have
AIS calls associated with them, and change them as follows:

<div class="card supportsQuery withLoadingAnimation" id="noOfOpenWOsGraph" qobnm="QRY48013J_1601200003CUST"

maxRecords="500">
<div class="card supportsQuery withLoadingAnimation" id="openWorkOrders" qobnm="QRY48013J_1601200001CUST"
maxRecords="500">

Here is an explanation of the class and attributes you added to each of the lines:

supportsQuery class - This informs your supporting library that this tile has a query attached to it.
qobnm attribute and its value - This informs the library about the default query to be used.

16/20
 Note: You must replace the value with the object name of your query and not use the one in this example.
Also, it is important to note that while this can be the object name for either a personal query or a shared query, it
must be a query that the end-user of the page has access to. Therefore, unless this is a page for only one user,
you should make the queries that you created as shared queries, assign the shared query objects to the same set
of users, and use the object name of the shared instance.

maxRecords attribute and its value - This informs the library about the default maximum number of records to be
retrieved. This prevents your tile from spinning for a long time. However, you should use a query to limit the
number of records to be retrieved. Also, note that the server configuration will also apply a maximum number of
records that may be more restrictive than the value you define.
5. Save the branchManager.html file and open it in your web browser:

Review the page. You will notice that the bar chart and the table now display less data.
You can change the default queries and maximum number of records by clicking the filter icon in the upper right corner
of your page. You see a Data Selection pulldown that looks like this:

This is built automatically, by using the labels and values from the <div class="card supportsQuery"> objects that
you had created. Your end-user can change the values in the Card Query Object Name and Max Records fields based
on their requirements.

Note: You cannot change these values at the moment because these are currently stored in files on your hard drive and
you are not viewing this page on a real EnterpriseOne server.

17/20
Handling Translations (milestone8)
There is an embedded translation solution for static text on the page that has been provided for your use. The Active Content
Pages library will perform the following steps on your behalf:

1. Look up the user's language preference setting.

2. Dynamically load a properties file for the appropriate language that contains translated strings.
3. Find any HTML element with the class langstring and a key defined.
4. Automatically replace the English text inside the element (mentioned in the previous step) with the appropriate
translated text.

To use the translation solution, you need to make a few modifications:

Add the page title: Use the following code to add the title for the page:
<h1 class="langstring" key="BRANCH_MGR_TITLE">Branch Manager</h1>

Add the titles for the cards: Use the following codes to add the titles for the cards:

<h1 class="langstring" key="BRANCH_MGR_OPEN_WOS_FOR_WEEK">Number of Open WOs for the Week</h1>

<h1 class="langstring" key="BRANCH_MGR_OPEN_WOS">Open Work Orders</h1>

Define translated text for the keys mentioned above in the appropriate language properties files.

The Active Content Pages Tutorial.zip file contains the code for all of the five Active Content Pages available with the JD
Edwards EnterpriseOne Applications, Release 9.2. Therefore, you can refer to the code for any one of the five Active Content
Pages for an example of how the translations are accomplished.

While this method of translation allows you to upload a single zip file for all of the languages, you can also use the traditional
method of handling translations. The EnterpriseOne pages runtime allows you to upload a separate zip file for each language
and you can use a translated instance of the page for each of the languages that you require. You can use either of the two
methods for the translations.

Adding the Watchlist (milestone9)

1. Open the branchManager.html file in your text editor, and locate the following lines of code:

<!-- 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
* END_LIST_WATCHLISTIDS */
</script>

You will change the code in this example to look like this:

<!-- 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=ce4f15e4b7124cb3b0c2c26a6f03fbe2
* watchlist=a3df5663415a4a448fa1ca73aaa0f19f
* END_LIST_WATCHLISTIDS */
</script>

Note: The hexadecimal characters in the above example represent the Watchlist IDs of your watchlists. If you have not
created your watchlists, you must create them and assign them to your end-user.

2. Log in to JD Edwards EnterpriseOne and click the Watchlists menu.

3. Click the watchlist that you want to add.
The application, for which you defined the watchlist, is displayed.

4. Click the Manage One View Watchlists icon on the upper right corner of the page.
The Watchlist Manager side panel is displayed.

18/20
 5. From the Name drop-down list, select the watchlist that you want to add, and click the About Watchlist icon. Note the
value in the ID field, and add this watchlist ID to your code as shown in Step 1. Repeat this step for all the watchlists
that you want to add.

Uploading the Page to the EnterpriseOne Server (milestone10)

1. Navigate to the industry_content directory. Make a copy of the branchManager.html file and name it home.html.
2. Select the following directories and files:
All subdirectories
home.html
branchManager.js
branchManager.css
branchManager.jpg

3. Zip these directories and files, and name the file branchManager.zip.
4. Log in to JD Edwards EnterpriseOne, and click the drop-down (triangle) icon next to your user name in the upper right
corner of the page.
5. In the Personalization drop-down menu, expand the Manage Content menu, and select Classic Pages.
6. In the E1 Page Manager side panel, select the Upload HTML Content option.
7. Click Browse....
8. Navigate to the branchManager.zip file, select that file, and then click Open.
9. Click the Upload button in the E1 Page Manager side panel.
After a few seconds, a message is displayed, saying that the page has been uploaded successfully.

10. Click OK to dismiss the message.

11. Click View Content to preview your page.
The page displays in preview mode.

19/20
20/20