E9.2 How to compose a JET Dashboard Page in E1

[JohnDanter2]

Hi all

Just thought I'd post up my steps I did to make a JET page to render E1 data into graphs.
At the end I have added my template for a Pie and Bar chart.

The trick is to fathom that all the dashbaords are just composite pages made up of 'tiles' that point to a new type of E1 APPL form. (You will find loads on your system ending in X - they contain no code just a pointer to an E1 page)
The form type is External App and javascript in the dropdown. And then point to your new E1 Page. The new E1 page (or graph) is then just zipped javascript to make the graph.
Got it? Cool
On we go

I downloaded Oracles E1JETDeveloper_EnvironmentAndExamples_V9 (UDO_9.2_10454) and based my pie chart on the attached zip (Ten Most Requested Items - P46270 from the warehouse manager dashboard) and based my bar chart on Backlog Number of Requests E1P_1607070006JDE, also in the same dashboard

Me and our local java geek have added some cool features not in the templates, such as displaying the query name and adding totals to the legends rather than a % of the pie. We also changed colour pallets to show suggestions in error as red and good in green etc

So here are my steps and I've added the 2 javascript files for the pie and bar chart together with all my comments for my and your sanity.
So you copy and existing folder and replace what you need in E1AISCalls.js only. Do not touch the other files!!!
Test it in JDeveloper (providing you updated the e1pagehelper.js to aim at your AIS server and open/start your own local server)
When you have made your javascript files, you zip the following 3 E1AIScalls.js home.html and main.js
and upload the zip into the E1Page, add it to a Composite Page as an application P55nnnnX and your form name and get CNC to refresh your AIS cache and bin your web browser cache.
Voila a graph

Also note that you need to develop the blank pages and the P55nnnX APPL and the main driver APPL and get them deployed to thin DV before you start

How to compose a JET page
	https://support.oracle.com/epmos/fa...&_afrWindowMode=0&_adf.ctrl-state=ytums9450_4
Setup JDeveloper
	https://docs.oracle.com/en/applicat...#ConfiguringandTestingtheOracleJETPageLocally
E1 External Form APPL P55nnnnX
	These APPLs are a new type of E1 form type and are setup to be External Forms. they contain no code, just a pointer to the E1PAGE and static test that can be used as axis and headers with the ability to usre language overrides
Create compoite Page
	Create CMP CUST page and add the graph tiles as a pointer to the P55nnnnX APPL and form. So when the CMP page runs the P55nnnX APPL the javascript wiill run to render the graphs. Javascript is completed and uploaded later
Create or use E1 APPL or BSVW to gather data
	When you create the graphs javascript it use AIS calls to either run a DATA_SERVICE or a FORM_SERVICE
	The difference is one runs over a BSVW only and bypasses an E1 form whilst the latter still uses the BSVW but also runs any logic you may have in the APPL form, such as PO filters etc
	This step is very important as iit determnes how easy it will be to render/group data in your graph
	Example, if your SQL is better than your java then you may want to create a dropped view over an E1 TBLE to SUM or COUNT your data vs doing this in java
Create queries over E1 APPL
	The graphs seem to need a query to generate data. It is worth noting that the graph will use your UDO preferences first (F98950) if none found it uses the first query for the form alphabetically
Copy a PIE or BAR javascript
	Copy the 3 files, AISCall.js, main.js and home.html
	Start working your way down through the javascript taking care to change the variables and parameters you need to make your new graph from your datasource (E1 APPL and BSVW/TABLEs)
	function initPage(ko, self)
		This functions sets up the type of graph (bar pie etc), titles, colour pallets and the E1 APPL BSVW where to obtain data from.
	function jetTranslations(self, translatedArray)
		If you need languages etc then you woukd use this section to get E1 overrides from the P55nnnX APPL. My example does not use this, Oracles do
	function jetdrillTitle(self)
		This is needed to enable the user to drill into the E1 APPL that obtained the data from JDE
	function jetdrillData(self, ui)
	function getE1Data(self, callback)
		This code is a function to get E1 Data and the name listed must must the follwoing function to get the data. In that function will be the AIS call
	function getItemCount(self, callback
		In this function we create the AIS call to the form to suck back the payload of data. We specifiy which grid columns we want and also any data aggregations needed
		We specifiy the payload data variable ot hold the APPLs output. This will be used n the consume data function
	function compare(a, b)
	function consumeData(self, response, callBackToHideSpinner)
		consume actual data after getting Items
		This is the part that builds the axis data before the final graph push to display
	function customToolTip()

How to see the JET graph on your composite E1 Page. You add an APPL tile (P55nnnX) which is actually an external form pointing to the E1Page which contains the uploaded zipped java (3 files)


If you have any questions, please ask

Thanks and I hope this helsp the community make more of these cool graphs and dashboards

John

 

[DaveWagoner]

I need some time (and free time) to pour over this thanks much!!

 

[JohnDanter2]

Very welcome Dave.
It's a lot to take in

 

[paul1204]

Hi there, thanks for making this post!

Create or use E1 APPL or BSVW to gather data

Where do we place our SQL statements if we didn't want to use Data or a Forum Service?

I'm scratching my head around how it's actually retrieving the data.

Can we take the dataArray response.ds_Vxxxxx.output and load it in ko.observable variables for the HMTL?

Thanks!

 

[JohnDanter2]

Hi there, thanks for making this post!

Create or use E1 APPL or BSVW to gather data

Where do we place our SQL statements if we didn't want to use Data or a Forum Service?

I'm scratching my head around how it's actually retrieving the data.

Can we take the dataArray response.ds_Vxxxxx.output and load it in ko.observable variables for the HMTL?

Thanks!

Hi Paul,

What I did was create the SQL in the Oracle database by dropping the F55nnnn E1 table and replacing it with SQL as a create view as the same E1 Table Name.
E1 then knows no different as when it sends SQL requests off the to the DB for F55nnnn the database knows to use the SQL statement

 

[DaveWagoner]

Hi Paul,

What I did was create the SQL in the Oracle database by dropping the F55nnnn E1 table and replacing it with SQL as a create view as the same E1 Table Name.
E1 then knows no different as when it sends SQL requests off the to the DB for F55nnnn the database knows to use the SQL statement

This works on iSeries as well!

 

[paul1204]

Thanks for the response! I do not have access to drop tables in our DB. I'll have to use "response.ds_Vxxxxx.output" for the data.

What is the Data Type of the Response object? I am not exactly sure what I can or cannot do with it besides what is in the Code Examples they gave us.

My PM has some requirements to load data from E1 to a Gannt Chart representing a status of a Production Line versus a Pie/Chart display.

 

[JohnDanter2]

Hi
I would say its an array???
There are several examples in the download where it does read a view but you need to change the way its read back as its slightly different. You can't copy mine exactly there. You'd need to look at another example or the lines I // commented out

 

[paul1204]

Would you happen to know why Jdeveloper is stating oj-status-meter-gauge not expected? This Body HTML has been copied straight from the CookBook with the JS Script Path in the header being exactly the same as the Examples that Oracle Provided.

Strange thing is that the "Customer Credit Check" example that Oracle provides also has the same error for the oj-status-meter-guage and does not render in the browser.

Do you have any suggestions? Some OJ Tags do and don't throw an error and I'm not sure where to go from here.



I also say on the CookBook that there is a new version of the Status Meter but i've also tried copying and pasting the Body and still the same error, so not sure if Versioning is the issue

 

[JohnDanter2]

I wouldn't know for certain sorry. To me that means it's not declared. What file is that anyway?

What cookbook and what Customer Credit Check example is this? I can't see that one

 

[paul1204]

The Cookbook! https://www.oracle.com/webfolder/technetwork/jet/jetcookbook.html

The Customer Credit Check example: https://docs.oracle.com/en/applications/jd-edwards/tutorial-test-jet/
This examples shows how to use the E1AIS to make a call to the Orchestrator

I've been playing around with it and been trying to use the CookBook as a HTML template so it can go on JDE

Front End isn't my specialty, I enjoy more Back End and DevOps so HTML is fuzzy for me.
I've tried copying and pasting the <Body> tags from the CookBook and getting some bizarre results.

On my end, it is not rendering the full Gannt chart, rather it is showing up in a tiny section whereas the cookbook has a much larger view. See attachments to see what I mean.

I've tried manipulating the CSS file and the <div> tags and not seeing any visible changes. Do you have any suggestions?
There's no company data on the screenshots. All data are example data straight from the Cookbook.

Here's the link for this particular Gannt: https://www.oracle.com/webfolder/te...ookbook.html?component=gantt&demo=performance

Thanks!

 

[JohnDanter2]

Ok I get you now, thanks

What we've been finding is that cookbook and it's js code isn't really translating very well into the charts and actions we want to do.

Example, something as simple as removing decimal formats. If you try to follow the code in the cookbook by adding it's own format option or API, it isn't working.
We think we maybe missing an oj declaration somewhere (click APIs to see the list) but can't figure out how to do it and hook them into my code. Maybe in the home.html file or the e1pagehelper file? (It's something I am currently working on this week, so I may report back)

What you are doing is a bit beyond me and my javascript knowledge, sorry.
I am the same as you, backend is where I am much much stronger. All I've done here is figure out how to crack these open in terms of basic nuts and bolts and enable us to develop our own. You are talking gear ratios now

But I have to add.......... Even Oracle told me on a recent support all about these graphs that they never expected us developers to start making our own

 

[JohnDanter2]

Check in here

https://www.oracle.com/webfolder/technetwork/jet-1210/jsdocs/oj.ojGantt.html

 

[paul1204]

Hey! Hope all is well!
Managed to make some REST calls via AIS Server and loaded some DV Data into a Gantt Chart! I am thinking about making another guide similar to yours but explaining how to use the REST call, and Transform the Data so you can "Plug and Play" with the template known as JET.

Would you be interested? Do you think this community would like to see something like this?

Also, when you uploaded your files to JDE, did you have to modify the relative path of the helper files such as e1pagehelper.js? If possible could you share what your relative paths look like in your HTML file for these helper files? The folks who manage the ERP system has provided me two different versions of these paths in the HTML and when loading into JDE, it throws a 404 for these helper files

Best!

 

[DaveWagoner]

Would you be interested? Do you think this community would like to see something like this?

um YES. And if you ever wanted to present at conference or for a future Tech SIG meeting we'd love to have you.

 

[paul1204]

Awesome! I will start creating a guide for this! A conference/meeting sounds wonderful! Would definitely have to develop a couple more JET apps and push to Production before presenting the steps I took for this as we are all on the same learning boat for JET on JDE

 

[JohnDanter2]

Managed to make some REST calls via AIS Server and loaded some DV Data into a Gantt Chart! I am thinking about making another guide similar to yours but explaining how to use the REST call, and Transform the Data so you can "Plug and Play" with the template known as JET.
Would you be interested? Do you think this community would like to see something like this?

Is the Pope's poo catholic? Yes please sir. It's things like this that help us all grow

Yes I did modify the help file. Hang on

At the end you have to add this, but these are just for yor local tests. Not the server runs. CNC will fill that in


var LocalDevConfig = new function ()
{
this.AIS_HOST = "scs-a-xxxx.eu.xx.xxx.com"; (redacted - get this from your CNC folk)
this.AIS_PORT = "1234"; redacted)
this.AIS_PROTOCOL = "https";

this.JAS_SERVER = null;
this.USER_NAME = "NN123456"; redacted)
this.PASSWORD = "xxxxxxxxxxx"; redacted)
this.ENVIRONMENT = "JDV920";
this.ROLE = "DEV";
this.DEVICE_NAME = "localJet"
this.NODE_JS_SERVER = null;
}

Also this
function getUserInfo()
{
//alert("Not Available in Local Development Environment");
var userPreference =
{
addressNumber : "1234", (your AN8 for the user ID you use)
country : " ",
dateFormat : "AOE",
dateSeperator : "/",
decimalFormat : ".",
dstRule : "",
env : "JDV920",
fullName : "Last, First",
lang : "en",
locale : "en",
role : "DEV",
servicePack : "9.2.7.3",
simpleDateFormat : "dd/MM/yyyy",
timeFormat : "24",
userId : "JDE",
userTimeZone : "26",
e1Lang: " "
};
return userPreference;
}

 

[alfredorz]

Hi all

Just thought I'd post up my steps I did to make a JET page to render E1 data into graphs.
At the end I have added my template for a Pie and Bar chart.

The trick is to fathom that all the dashbaords are just composite pages made up of 'tiles' that point to a new type of E1 APPL form. (You will find loads on your system ending in X - they contain no code just a pointer to an E1 page)
The form type is External App and javascript in the dropdown. And then point to your new E1 Page. The new E1 page (or graph) is then just zipped javascript to make the graph.
Got it? Cool
On we go

I downloaded Oracles E1JETDeveloper_EnvironmentAndExamples_V9 (UDO_9.2_10454) and based my pie chart on the attached zip (Ten Most Requested Items - P46270 from the warehouse manager dashboard) and based my bar chart on Backlog Number of Requests E1P_1607070006JDE, also in the same dashboard

Me and our local java geek have added some cool features not in the templates, such as displaying the query name and adding totals to the legends rather than a % of the pie. We also changed colour pallets to show suggestions in error as red and good in green etc

So here are my steps and I've added the 2 javascript files for the pie and bar chart together with all my comments for my and your sanity.
So you copy and existing folder and replace what you need in E1AISCalls.js only. Do not touch the other files!!!
Test it in JDeveloper (providing you updated the e1pagehelper.js to aim at your AIS server and open/start your own local server)
When you have made your javascript files, you zip the following 3 E1AIScalls.js home.html and main.js
and upload the zip into the E1Page, add it to a Composite Page as an application P55nnnnX and your form name and get CNC to refresh your AIS cache and bin your web browser cache.
Voila a graph

Also note that you need to develop the blank pages and the P55nnnX APPL and the main driver APPL and get them deployed to thin DV before you start

How to compose a JET page
	https://support.oracle.com/epmos/fa...&_afrWindowMode=0&_adf.ctrl-state=ytums9450_4
Setup JDeveloper
	https://docs.oracle.com/en/applicat...#ConfiguringandTestingtheOracleJETPageLocally
E1 External Form APPL P55nnnnX
	These APPLs are a new type of E1 form type and are setup to be External Forms. they contain no code, just a pointer to the E1PAGE and static test that can be used as axis and headers with the ability to usre language overrides
Create compoite Page
	Create CMP CUST page and add the graph tiles as a pointer to the P55nnnnX APPL and form. So when the CMP page runs the P55nnnX APPL the javascript wiill run to render the graphs. Javascript is completed and uploaded later
Create or use E1 APPL or BSVW to gather data
	When you create the graphs javascript it use AIS calls to either run a DATA_SERVICE or a FORM_SERVICE
	The difference is one runs over a BSVW only and bypasses an E1 form whilst the latter still uses the BSVW but also runs any logic you may have in the APPL form, such as PO filters etc
	This step is very important as iit determnes how easy it will be to render/group data in your graph
	Example, if your SQL is better than your java then you may want to create a dropped view over an E1 TBLE to SUM or COUNT your data vs doing this in java
Create queries over E1 APPL
	The graphs seem to need a query to generate data. It is worth noting that the graph will use your UDO preferences first (F98950) if none found it uses the first query for the form alphabetically
Copy a PIE or BAR javascript
	Copy the 3 files, AISCall.js, main.js and home.html
	Start working your way down through the javascript taking care to change the variables and parameters you need to make your new graph from your datasource (E1 APPL and BSVW/TABLEs)
	function initPage(ko, self)
		This functions sets up the type of graph (bar pie etc), titles, colour pallets and the E1 APPL BSVW where to obtain data from.
	function jetTranslations(self, translatedArray)
		If you need languages etc then you woukd use this section to get E1 overrides from the P55nnnX APPL. My example does not use this, Oracles do
	function jetdrillTitle(self)
		This is needed to enable the user to drill into the E1 APPL that obtained the data from JDE
	function jetdrillData(self, ui)
	function getE1Data(self, callback)
		This code is a function to get E1 Data and the name listed must must the follwoing function to get the data. In that function will be the AIS call
	function getItemCount(self, callback
		In this function we create the AIS call to the form to suck back the payload of data. We specifiy which grid columns we want and also any data aggregations needed
		We specifiy the payload data variable ot hold the APPLs output. This will be used n the consume data function
	function compare(a, b)
	function consumeData(self, response, callBackToHideSpinner)
		consume actual data after getting Items
		This is the part that builds the axis data before the final graph push to display
	function customToolTip()

View attachment 19734

How to see the JET graph on your composite E1 Page. You add an APPL tile (P55nnnX) which is actually an external form pointing to the E1Page which contains the uploaded zipped java (3 files)
View attachment 19735

If you have any questions, please ask

Thanks and I hope this helsp the community make more of these cool graphs and dashboards

John

Thanks John! I'm going to save your post and when I'll have a little free time I'll try read, understand and practice.
Best regards! Great Job!

 

[JohnDanter2]

Hi folks

Just following up on this. It's been up a while now. Is it ok? Has it helped anyone? Does anyone think it's not clear enough etc? Could I add or explain things a bit more?
Sadly I can't edit the original post anymore

 

[DaveWagoner]

It's bookmarked for me to try when I get a chance to come up for breath from my workload!