Creating
and Displaying EnterpriseOne Widgets with External Data
Before You Begin
This 30-minute Oracle by Example (OBE) shows how JD Edwards
EnterpriseOne Widgets can gather data from an external
(non-EnterpriseOne) data source and enable you to visualize that
data.
Background
JD Edwards EnterpriseOne widgets are an easy, no-code way to
gather data and visualize it in graphical formats such as
badges, meters, and charts. Because widgets get their input from
orchestrations, the data can come from any source that an
orchestration can access, including REST APIs from systems that
are external to EnterpriseOne. This opens the door for many
interesting opportunities to visualize data from EnterpriseOne
and non-EnterpriseOne sources side-by-side.
Scenario
In this Oracle by Example, let’s consider a scenario in which
you want to see weather and temperature forecast for a
particular location in the United States. Perhaps you are
concerned about the weather for transportation routes or how
weather might affect progress at a construction site.
For this scenario, you will:
Create an Orchestrator connection to the US National Weather
Service API.
Create an orchestration with a connector to call the API and
retrieve the temperature and weather forecast for a specific
location.
Create two Widgets: one as a meter to show the temperature
and another as a text box to show the detailed weather
forecast.
Publish those Widgets on an EnterpriseOne page.
When you complete the steps in this OBE, your Widgets will look
similar to this:
Access to a JD Edwards EnterpriseOne environment with
Release 25, April 2025 (Tools Release 9.2.9.3) or later. JD
Edwards EnterpriseOne Trial Edition running on Oracle Cloud
Infrastructure is suitable, but you can use any environment
with the proper Tools release.
Access to Orchestrator Studio
Feature security and UDO action security for Widgets
(WIDGET)
Feature security and UDO action security for composite pages
(COMPOSITE)
Creating
a Connection to the Weather Service API
The first step is to create an Orchestrator connection to the
US National Weather Service API. This API requires no
registration and no fee. You can learn more about it at https://www.weather.gov/documentation/services-web-api.
Sign in to the Orchestrator Studio.
From the Orchestrator Studio home page, click Connections.
On the Connections page, click New,
and click then click REST.
Complete the following fields:
Name: National Weather Service
Description:National Weather
Service
User/Role:*PUBLIC
Environment:JPS920 (Enter
the EnterpriseOne environment you are using.)
Service Information > Endpoint:https://api.weather.gov
This API does not require any additional configuration.
6. Click Close to return to the Orchestrator
Studio Home page.
Creating
an Orchestration to Get the Temperature and Weather Forecast
In this exercise you will use the connection created in the
previous step to create an orchestration with a connector step
that invokes the weather forecast API, returning the temperature
and forecast for a location.
From the Orchestrator Studio Home page,
click Connectors.
Click New and then click REST.
Complete the following fields:
Name: Weather Forecast for Widgets
Description: Get the weather
forecast from the US National Weather Service
From the REST drop-down list, select the National
Weather Service connection.
Verify that the value in the HTTP Method field is displayed
as GET.
Under the Request heading, expand the Pathing
section.
In the Value field, enter: gridpoints/${gridpoints}/forecast
This is the path to the specific endpoint for the
Forecast API. ${gridpoints} represents an orchestration
variable that you will provide to designate a specific
location for which you want the forecast.
This is the input format required by the Forecast API.
This value represents a National Weather Service office (in
this case, Boulder, CO, and specific X and Y coordinates on
a grid for that area. 63, 61 point to Denver, CO).
Click Execute.
The connector calls the API, which returns the following
response:
You can scroll through the Response
window to see the full response, which includes forecasts
for several periods in the future. This response contains
additional data than we need for our Widgets. We only need
temperature and detailed forecast for the first period. The
orchestration connector enables you to pick only those data
elements you would like to return.
Click the X icon to close the Response
window.
On the Connectors page, expand the Response
section.
Expand the Output section.
Verify that the JSON Output option is
selected.
Under the JSON heading, in the Output
column, enter the following two data elements from the API
response:
properties.periods[0].temperature
properties.periods[0].detailedForecast
The response from the API is in the form of a multilevel
array. “properties” is the top level, and “periods”
represents the array of forecast periods.
[0] represents which array row to get. “0”
is the first row.
.temperature and .detailedForecast represent
the data elements in the array to return.
In the Value field of the Execute window, enter BOU/63,61.
Click Execute.
The API returns the same large data set in the response.
Click the Show Output option at the top of
the window.
This window shows the trimmed response with just the two
data elements you requested. This is what the connector step
will return in the orchestration, and this is all the data
you need to create the Widgets.
Next you will create an orchestration to run this
connector step.
From the Manage drop-down list, select Create
Orchestration.
The Orchestrations page appears with an orchestration
automatically created.
Click the End step and click Output
and Assertions.
Enable the Select option for the two
outputs from the connector step. To simplify the names of the
outputs, click the default names in the Output column and
change them to Temperature and Detailed
Forecast, respectively.
On the Run Orchestrations page, in the
Value field for the gridpoints input, enter BOU/63,61.
Click Run.
Verify that the orchestration returns the temperature and
detailed forecast from the API. Now you can use this
orchestration output to create widgets to visualize the
temperature and the forecast information.
Click Home to return to the Orchestrator
Studio Home page.
Creating
Widgets from the Orchestration Output
In the previous exercise you created an orchestration that
calls the US National Weather Service forecast API and returns
the temperature and weather forecast. In this exercise you will
create Widgets to visualize that data.
Creating a Temperature Meter Widget
From the Orchestrator Studio Home page, click Widgets.
If you don’t already have any Widgets created, the Widget
page opens. If you already have some Widgets created, click
New.
Complete the following fields:
Name:Temperature Meter
Description:Visualize the
temperature for a given location as a meter.
On the Definition tab, in the Widget Type section, select Meter.
In the Title field, enter Temperature.
For this OBE, you can leave all other options with their
default settings, but feel free to experiment with them.
Click the Data Source tab.
Click Select Orchestration and select the
Weather Forecast for Widgets orchestration you created in the
previous exercise.
Under the Inputs heading, enable the Widget Input option for
the gridpoints input, which was automatically
imported from the orchestration.
Enabling the Widget Input option allows you to specify a
gridpoint input value when you add this widget to
an EnterpriseOne page. You will do this in the next
exercise.
In the Default Value field, enter BOU/63,61.
In the Outputs section, in the Value row, click the Orchestration
Output drop-down list.
Select Temperature from the drop-down
list. The outputs of the orchestration are listed. This is how
you map the Temperature output from the orchestration to the
input to the meter.
The meter Widget also takes Minimum and
Maximum values as inputs. You can leave
these as the literal defaults of 0 and 100. However, if you
wanted to assign these values dynamically, you can build
your orchestration to generate them as outputs and map them
into the Widget here.
The Thresholds and Colors section enables you to control
the appearance of the meter.
Click the Threshold Values and Colors text
field and enter 32. This will be the lower threshold on the
meter, if you want the meter to indicate temperatures below
32° F (freezing).
Press Tab. The second threshold box
appears. Enter 80. This will be the upper threshold on the
meter.
Your Data Source tab configuration should look like this:
Description: Visualize the
detailed weather forecast for a given location in a text
box.
On the Definition tab, in the Widget Type section, select Text
Box.
In the Title field, enter Detailed Forecast.
Click the Data Source tab.
Click Select Orchestration and choose the
Weather Forecast for Widgets orchestration you created in the
previous exercise.
Note that this is the same orchestration you used as input
to the Temperature meter. It is perfectly acceptable, even
recommended in many cases, to design one orchestration with
outputs to provide data to many Widgets.
In the Inputs section, enable the Widget Input
option for the gridpoints input, which was automatically
imported from the orchestration.
Enabling the Widget Input option allows you to specify a
gridpoint input value when you add this Widget to an
EnterpriseOne page. You’ll do this in the next exercise.
In the Default Value field, enter BOU/63,61.
In the Outputs section, in the Value row,
click the Orchestration Output drop-down
list.
Select Detailed Forecast. This is how you
map the Detailed Forecast output from the orchestration to the
input to the text box.
Your Data Source tab configuration should look like this:
Try running the Widget with some other gridpoints to get
forecasts from other locations:
Denver, CO
BOU/63,61
New York, NY
OKX/33,35
Chicago, IL
LOT/75,73
Las Vegas, NV
VEF/123,98
Now that you have created a meter Widget for temperature and a
text box Widget for a detailed weather forecast, proceed to the
next exercise to add these Widgets to an EnterpriseOne page.
Adding
the Meter and Text Box Widgets to an EnterpriseOne Page
In the previous exercise, you created an orchestration to call
a weather forecast API and retrieve a temperature and a detailed
forecast for a given location. Then you created a meter Widget
and a text box Widget to visualize that data. In this exercise,
you will add those widgets to an EnterpriseOne page so that they
can be seen at a glance in the context of other EnterpriseOne
applications and business processes. You can add these Widgets
to a designer pane on an EnterpriseOne composed page.
Sign in to the EnterpriseOne web client. If you are still in
Orchestrator Studio, from the Tools menu,
click JD Edwards EnterpriseOne.
Navigate to the EnterpriseOne page to which you want to add
the Widgets. For example, if you have already finished
previous Widget exercises, you might already have created a Widgets
page. Or you can create a new composed page.
From the menu under your username (top right) select Manage
Content, then select Composed Pages.
The EnterpriseOne composed page opens in design mode. If you
have already finished previous Widget exercises, you might
already have a designer pane on your composed page.
Or you can create a new designer pane (click the Create
New Content icon and select Designer
Pane). If you create a new designer pane, click
the Configure Page (gear) icon, and select
Large Icons from the Style drop-down list.
Click the Edit (Pencil) icon next to the
Default Page Title and delete it.
Click on the Add a Tile (+) icon in an
empty tile. If there are no empty tiles you can add rows and
columns by clicking the three down arrow icons.
Composed Page -
Icons to add Rows and Columns
On the Configure Tile window, complete the following fields
and options:
Tile Type: Widget
Widget: #Temperature Meter
A window appears prompting you to enter the gridpoints
input to the Widget. Enter BOU/63,61, and click OK.
Associate Watchlists: Disabled
Style: No Box
Title: Denver Temperature
Description: Enter a short description
or leave blank for a cleaner tile
Hover Line URL: Leave blank.
Click OK.
Next you will add the Detailed Forecast text box to a
tile.
Click the Add a Tile (+) icon on the tile
below the tile you just configured. If there is no empty row
you can add a row by clicking the three down arrow icons.
Add
Icon
On the Configure Tile window, complete the following fields
and options:
Tile Type: Widget
Widget: #Detailed Forecast Text Box
A window appears prompting you to enter the gridpoints
input to the Widget. Enter BOU/63,61.
Associate Watchlists: Disable
Scroll Text: Enable
Style: Light Box
Color: blue
Title: Denver Forecast
Description: Enter a short description or
leave blank for a cleaner tile
To learn more, you can repeat this exercise adding more
widgets but with different gridpoints values, for example:
Widgets With
Different Gridpoints Value
You can add the same widget to a page multiple times using
different input values. For example, you can repeat the steps
in this exercise to add tiles for the temperature and forecast
for different locations.
Denver, CO
BOU/63,61
New York, NY
OKX/33,35
Chicago, IL
LOT/75,73
Las Vegas, NV
VEF/123,98
Conclusion
In this Oracle by Example (OBE), you learned how to:
Create a connection to an external REST API, specifically,
to the US National Weather Service
Create an orchestration to call that API to get a
temperature and a weather forecast
Use the output of that orchestration to create a meter
Widget for the temperature and a text box Widget for the
forecast
Publish those Widgets on an EnterpriseOne page
This Oracle by Example used the REST API from the US National
Weather Service to get temperature and forecast data, but it’s
not difficult to imagine using this same technique to get data
from other external systems and Cloud services. Using the power
of Orchestrator you can call external services, supply inputs or
prompts, and receive back data in the form of numbers, dates, or
text strings. And using the power of Widgets and EnterpriseOne
pages, you can easily present that data to users right within
the context of the EnterpriseOne user interface.