Oracle by Example brandingCreating and Displaying EnterpriseOne Widgets with External Data

section 0Before 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:

Description of sample-image-1.png follows
Widgets

What Do You Need?

To perform the steps in this OBE, you will need:

  • 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)

section 1Creating 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.

  1. Sign in to the Orchestrator Studio.
  2. From the Orchestrator Studio home page, click Connections.
  3. On the Connections page, click New, and click then click REST.
  4. 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.

Your connection should look like this:

Description of sample-image-1.png follows
Connections Page

5.Click Save.

6. Click Close to return to the Orchestrator Studio Home page.


section 2Creating 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.

  1. From the Orchestrator Studio Home page, click Connectors.
  2. Click New and then click REST.
  3. Complete the following fields:
    • Name: Weather Forecast for Widgets
    • Description: Get the weather forecast from the US National Weather Service
  4. From the REST drop-down list, select the National Weather Service connection.
  5. Verify that the value in the HTTP Method field is displayed as GET.
  6. Under the Request heading, expand the Pathing section.
  7. 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.

  8. Click Save.
  9. Click Test.
  10. In the Value field of the Execute window, enter BOU/63,61.
    Description of sample-image-1.png follows
    Value field of the Execute window

    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).

  11. Click Execute.

    The connector calls the API, which returns the following response:

    Description of sample-image-1.png follows
    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.

  12. Click the X icon to close the Response window.
  13. On the Connectors page, expand the Response section.
  14. Expand the Output section.
  15. Verify that the JSON Output option is selected.
  16. 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.

    Description of sample-image-1.png follows
    JSON Output
  17. Click Save.
  18. Click Test.
  19. In the Value field of the Execute window, enter BOU/63,61.
  20. Click Execute.

    The API returns the same large data set in the response.

  21. 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.

  22. Description of sample-image-1.png follows
    Show Output Window
  23. Click the X icon to close the window.

    Next you will create an orchestration to run this connector step.

  24. From the Manage drop-down list, select Create Orchestration.

    The Orchestrations page appears with an orchestration automatically created.

  25. Click the End step and click Output and Assertions.
  26. 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.
  27. Description of sample-image-1.png follows
    Outputs and Assertions Page
  28. Click Save.
  29. Click Start, then click Run Orchestration.
  30. On the Run Orchestrations page, in the Value field for the gridpoints input, enter BOU/63,61.
  31. 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.

  32. Description of sample-image-1.png follows
    Orchestration Output
  33. Click Close to close the Run Orchestrations page.
  34. Click Home to return to the Orchestrator Studio Home page.

section 3Creating 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

  1. From the Orchestrator Studio Home page, click Widgets.
  2. If you don’t already have any Widgets created, the Widget page opens. If you already have some Widgets created, click New.
  3. Complete the following fields:
    • Name: Temperature Meter
    • Description: Visualize the temperature for a given location as a meter.
  4. On the Definition tab, in the Widget Type section, select Meter.
  5. 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.

  6. Click the Data Source tab.
  7. Click Select Orchestration and select the Weather Forecast for Widgets orchestration you created in the previous exercise.
  8. 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.

  9. In the Default Value field, enter BOU/63,61.
  10. In the Outputs section, in the Value row, click the Orchestration Output drop-down list.
  11. 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.

  12. 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).
  13. 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:

  14. Description of sample-image-1.png follows
    Data Source Tab
  15. Click Save.

    You have now configured everything you need for a meter Widget.

  16. Click the Preview tab.

    The Widget runs the orchestration with the default input value for gridpoints, retrieves the output, and renders the data as a meter.

    Description of sample-image-1.png follows
    Preview tab: Meter Rendering

    Try running the Widget with some other gridpoints to get temperatures 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

Creating a Detailed Forecast Text Box Widget

Next, let’s create a text box Widget to display the Detailed Forecast output from the orchestration.

  1. From the Widgets panel, click the Show List icon in the upper left corner.
  2. Description of sample-image-1.png follows
    Show List
  3. Click New.
  4. Complete the following fields:
    • Name: Detailed Forecast Text Box
    • Description: Visualize the detailed weather forecast for a given location in a text box.
  5. On the Definition tab, in the Widget Type section, select Text Box.
  6. In the Title field, enter Detailed Forecast.
  7. Click the Data Source tab.
  8. 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.

  9. 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.

  10. In the Default Value field, enter BOU/63,61.
  11. In the Outputs section, in the Value row, click the Orchestration Output drop-down list.
  12. 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:

  13. Description of sample-image-1.png follows
    Mapping Forecast Output to Text Box
  14. Click Save.

    You have now configured everything you need for a text box widget.

  15. Click the Preview tab.

    The Widget runs the orchestration with the default input value for gridpoints, retrieves the output, and renders the data in a text box.

    Description of sample-image-1.png follows
    Preview Tab: Rendered Widget

    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.

section 4Adding 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.

  1. Sign in to the EnterpriseOne web client. If you are still in Orchestrator Studio, from the Tools menu, click JD Edwards EnterpriseOne.
  2. 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.
  3. From the menu under your username (top right) select Manage Content, then select Composed Pages.
  4. 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.

  5. 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.
    Description of sample-image-1.png follows
    Composed Page - Icons to add Rows and Columns
  6. 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.
  7. Click OK.

    Next you will add the Detailed Forecast text box to a tile.

  8. 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.
    Description of sample-image-1.png follows
    Add Icon
  9. 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
    • Hover Line URL: Leave blank
  10. Click OK.
  11. Click Save in the UDO management bar in the top-right of the page.
    Description of sample-image-1.png follows
    Save in UDO Management Bar
  12. Click Close (X) on the UDO management bar.

    The EnterpriseOne page renders in view mode with the newly added Widgets.

    Description of sample-image-1.png follows
    EnterpriseOne Page in View Mode

    To learn more, you can repeat this exercise adding more widgets but with different gridpoints values, for example:

    Description of sample-image-1.png follows
    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

section 0Conclusion

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.


more informationWant to Learn More?