Oracle by Example brandingPublishing Widgets to a Widget Pane on an EnterpriseOne Page

section 0Before You Begin

This 45-minute Oracle by Example (OBE) shows how you can publish widgets to EnterpriseOne users by adding them to a Widget Pane on an EnterpriseOne composed page.

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.

You can easily publish widgets to EnterpriseOne end users by adding them to EnterpriseOne composed pages, specifically a designer pane, and beginning with Tools 9.2.9.4, a Widget Pane. Additionally, badge type widgets behave similarly to One View Watchlists; they appear automatically on the Watchlist (flag) drop-down list on the EnterpriseOne web client, and in the Watchlist Panes.

Scenario

In this OBE, as a composed page designer, you will publish the widgets you created in the previous OBEs to a new Widget Pane on an EnterpriseOne page. Also, as a user, you will enter inputs for the widgets and view the output.

For this scenario you will:

  • Create a new EnterpriseOne composed page.
  • Create a new Widget Pane for each of the widgets you created in the previous OBE exercises. Some widgets you will add to the page more than once.
  • Add widget default inputs as the page designer.
  • Change widget inputs as the user.
  • View a widget in the full screen mode.

When you complete the steps in this OBE, your EnterpriseOne page with Widget Panes will look similar to this screenshot:

Screenshot
Widget Pane

What Do You Need?

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

  • Access to a JD Edwards EnterpriseOne environment with Release 25, June 2025 (Tools Release 9.2.9.4) or later
  • Feature security, UDO action security, and Content security for Widgets (WIDGET)
  • Feature security and UDO action security for composite pages (COMPOSITE)
  • These seven widgets you completed in the previous OBE exercises: Past Due Orders, Most Ordered Item Quantity, Most Ordered Item Name, POs by Business Unit, Spend Analysis by Business Unit, Temperature Meter, and Detailed Forecast Text Box.

For more information, see these OBEs:


section 1Creating a New EnterpriseOne Composed Page and Adding the First Widget Pane

In the this exercise, you will create a new EnterpriseOne page with a single Widget Pane.

  1. Sign in to the EnterpriseOne web client.
  2. From the user menu drop-down list, select Manage Content and click Composed Pages.
  3. From the Name drop-down list, select (Create) to create a new page.
  4. Click the Create New Content icon at the top left of the window.
  5. Click Widget to add a Widget Pane to the page.
  6. On the Create Link to Widget window, in the Name field, enter Past Due Orders.
    Note: Since each Widget Pane can only contain one widget, it is most common to name the Widget Pane after the widget.
  7. Click OK. The Widget menu enables you to select the widget for this pane.
  8.  From the Widget drop-down list, select #Past Due Orders (Past Due Orders P43261) – Badge – Numeric.
    Screenshot
    Widget List
    Note: You can type in the drop-down field to filter the widget names.
  9. Click Save at the top right of the window to save the page.
  10. On the Enter New Name window, enter Widget Panes.
  11. Click Close to close the page designer.
    The new EnterpriseOne page appears with the single Widget Pane. Because the Past Due Orders widget is a badge, it appears in the center of the pane, and the pane occupies the entire page area as shown in the following screenshot:
    Screenshot
    Widget Pane - Past Due Orders
    Because EnterpriseOne composed pages can contain many types of content, such as designer panes, One View reports, EnterpriseOne applications, and so on, you could continue to design a more complex page with other components. In the following exercises you will continue to add panes for your other widgets.

section 2Adding Widget Panes to the EnterpriseOne Page

In the previous exercise, you created a new EnterpriseOne page with a single Widget Pane. In this exercise you will add panes for your other widgets.

  1. Make sure that you are viewing your new Widget Panes page.
  2. From the user menu drop-down list, select Manage Content and click Composed Pages.
    The EnterpriseOne composed page opens in design mode.
  3. Click the Create New Content icon at the top of the page.
  4. Click the Widget and drag it to the right of the existing Widget Pane, then drop it.
  5. Screenshot
    Widget Pane
  6. On the Create Link to Widget window, in the Name field, enter Most Ordered Item Quantity.
  7. Click OK.
  8. The Widget menu enables you to select the widget for this pane. Select #Most Ordered Quantity (Most Ordered Item Quantity) – Badge – Numeric.
  9. Click Save at the top right of the window to save the page.
  10. Click Close to close the page designer.
    Now your page has two Widget Panes as shown in the following screenshot:
  11. Screenshot
    Widget Pane - Past Due Orders and Most Ordered Quantity
  12. Repeat steps 2 through 8 to add the Most Ordered Item Name and POs by Business Unit widgets to the page. The Widgets should look as shown in the following screenshot. You can adjust the alignment of the Widget Panes as necessary.
    Screenshot
    Widget Panes
    Note: When you are in design mode for the page, you can drag the horizontal and vertical bars around the panes to align and resize them.
  13. Screenshot
    Widget Pane - Horizontal and Vertical Bars

section 3Adding Widgets with Default Inputs

In the previous exercises, you added Widget Panes for widgets that did not require any inputs. In this exercise, you will add widgets that require inputs and the widgets enable you to provide default values for those inputs.

  1. Access the design mode for your EnterpriseOne page (user menu -> Manage Content -> Composed Pages).
  2. Click the Create New Content icon at the top left of the page.
  3. Click the Widget and drag it to the bottom center of the page, then drop.
  4. On the Create Link to Widget window, in the Name field, enter Spend Analysis by Business Unit for Company 00200.
  5. Click OK.
  6. On the Widget menu, select #Spend Analysis by Business Unit (Spend Analysis by Business Unit) - Chart.
    This widget accepts an input value for the Company. As the page designer, the Widget Configuration window enables you to provide a default value for that input for the users who will see the widget on the page.
  7. In the Value field, enter 00200.
    You can add the same widget on a Widget Pane multiple times and set different inputs. For example, you could build a page with widgets for “Spend Analysis for Company 00200” and “Spend Analysis for Company 00300.”
  8. The Widget Configuration window provides an option for you to override the title. Enable the Override Title option and change the value in the Title field to Spend Analysis by Business Unit - Company 00200. The Widget Configuration window also provides an option to Allow Input, enabling the users to provide a different input for the widget. For this, step leave this option disabled. You will enable the Allow Input option in a subsequent step.
  9. Repeat steps 2 through 8 to add a second Widget Pane for the Spend Analysis by Business Unit widget.
    This time, in the Input field, enter 00001 and in the Title field, enter, Spend Analysis by Business Unit – Company 00001.
    Note: The data in your system may be different. You can use any Company with valid data.
  10. Click Save.
  11. Click Save at the top of the window to save the page.
  12. Click Close to close the page designer. Your EnterpriseOne page with Widget Panes now looks similar to this:
  13. Screenshot
    Widget Pane

section 4Adding Widgets with User Inputs

In the previous exercise, you added a widget that allowed inputs, and you, as the page designer, provided a default input. In this exercise you will add widgets that enable the user to provide inputs. In this way, you can publish a single widget on a page, and users can customize that widget for themselves, for example, by providing a relevant business unit, or work center, or a date range for filtering. Each user will see the same widget, but with different data.

  1. From the user menu, select Manage Content, and then select Composed Pages to access the design mode for your EnterpriseOne page.
  2. Click the Create New Content icon at the top of the page.
  3. Click the Widget and drag it to the bottom left of the page, then drop it.
  4. On the Create Link to Widget window, in the Name field, enter Temperature.
  5. Click OK.
  6. From the Widget drop-down list, select #Temperature Meter (Temperature Meter) - Meter.
    This widget accepts an input value for gridpoints. This input is a code used by the US National Weather Service to designate a geographic location.
  7. In the Value field, enter BOU/63,61. This is the gridpoint for Denver, Colorado.
  8. Enable the Override Title option and edit the Title to Denver Temperature. For this instance of the Temperature Meter, leave the Allow Input option disabled.
  9. Screenshot
    Widget Configuration - Override Title
  10. Click Save.
    In the next steps, you will add another instance of the Temperature Meter widget and enable the Allow Input option.
  11. Click the Create New Content icon at the top left of the page.
  12. Click the Widget and drag it to the bottom center of the page, then drop.
  13. On the Create Link to Widget window, in the Name field, enter City Temperature.
  14. Click OK.
  15. From the Widget drop-down list, select #Temperature Meter (Temperature Meter) - Meter.
  16. On Widget Configuration window, enable the Allow Input option.
  17. Enable the Override Title option and change the Title to Your City Temperature.
  18. Leave the Value field for gridpoints(String) as blank.
  19. Screenshot
    Widget Configuration - Override Title and Allow Input 
  20. Click Save.
    As the last Widget Pane on the page, next you will add the Detailed Forecast Text Box widget with user input.
  21. Click the Create New Content icon at the top left of the page.
  22. Click and hold Widget and drag it onto the bottom right part of the page. Then release the mouse button.
  23. On the Create Link to Widget window, in the Name field, enter City Forecast.
  24. Click OK.
  25. On the Widget menu, select #Detailed Forecast Text Box (Detailed Forecast Text Box) – Text Box.
  26. On the Widget Configuration window, enable the Allow Input option.
  27. Enable the Override Title option and in the Title field, change the title to Your City Forecast.
  28. Leave the Value field for grid points as blank.
  29. Screenshot
    Widget Configuration - Your City Forecast 
  30. Click Save.
  31. Drag the horizontal and vertical blue bars around the panes to align and size the panes evenly:
  32. Screenshot
    Widget Pane - Alignment
  33. Click Save at the top right of the window to save the page.
  34. Click Close to close the page designer.
    Your EnterpriseOne page with Widget Panes now looks similar to this:
  35. Screenshot
    Widget Pane

section 5Providing User Input to Widgets

In the previous exercise, as the page designer, you added Widget Panes titled “Your City Temperature” and “Your City Forecast” and allowed user input for these widgets. In this exercise, acting as an user, you will configure these two widgets with input for your location and change the titles accordingly.

  1. Make sure that you are viewing your new Widget Panes page.
  2. On the Widget Pane titled Your City Temperature, click the Widget Configuration icon .
  3. Screenshot
    Widget Pane - Your City Temperature
  4. On the Widget Configuration window, enter a value from the following table to configure gridpoints for a different city.
    City
    Grid Points
    Denver, CO BOU/63,61
    New York, NY OKX/33,35
    Chicago, IL LOT/75,73
    Las Vegas, NV VEF/123,98
  5. Enable the Override Title option and edit the value in the Title field to match the city.
  6. Screenshot
    Widget Configuration - New York Temperature
  7. Click Save.
    The EnterpriseOne page refreshes the widget with the new input and new title as shown in the following screenshot:
  8. Screenshot
    Widget Pane - New York Temperature
  9. Repeat steps 2 through 5 to configure the “Your City Forecast” widget with the same gridpoints input and appropriate title.
  10. Screenshot
    Widget Panes - Temperature and Forecast

section 7Viewing Widget Panes in Full Screen Mode

When viewing Widget Panes on an EnterpriseOne page, as with other pane types, users can open the pane in the full screen mode. This mode can provide clearer view of the details, especially with complicated charts.

  1. Make sure that you are viewing your new Widget Panes page.
  2. On the Widget Pane titled Spend Analysis by Business Unit - Company 00200, click the Popup Content icon.
    The EnterpriseOne page is replaced by a full-screen view of the widget:
  3. Screenshot
    Widget Pane - Popup Content Icon
  4. To restore the widget to its original size, click the Restore Content icon at the top right corner of the pane.
  5. Screenshot
    Widget Pane - Restore Content Icon

more informationConclusion

In this OBE, you learned how to:

  • Create a new EnterpriseOne composed page and add Widget Panes to it
  • For widgets that have inputs, configure them with default inputs
  • For widgets that have inputs, enable users to provide inputs
  • Add multiple instances of the same widget on a page with different inputs
  • View a widget in the full screen mode

    In this OBE, you built an EnterpriseOne page exclusively with Widget Panes, but like any EnterpriseOne composed page, it is possible to combine different content types to provide users with a rich, informative, and dynamic user experience.

more informationWant to Learn More?