Oracle by Example brandingCreating and Displaying a Bar Chart Widget

section 0Before You Begin

In this 20-minute OBE, you will understand how to use the JD Edwards EnterpriseOne Orchestrator Studio to create a Widget that displays a bar chart with multiple series values, enabling users to compare the cost and spending for each business unit in a specified company in EnterpriseOne.

Background

Chart type Widgets can greatly enhance the display of information in EnterpriseOne. With Widgets you can display charts in the tiles of a composed page

What Do You Need?

  • Access to a JD Edwards EnterpriseOne Release 25 environment with Tools Release 9.2.9.3 or later and the associated Tools roll-up ESU applied. 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 1 Creating an Orchestration to Get the Spending by Business Unit

In this exercise, you will use the Orchestrator Studio to create an orchestration with a data request to fetch a count of purchase orders for each business unit.

  1. Access the Orchestrator Studio.
  2. Click the Data Requests icon and then click the New button.
  3. On the Data Request design page, complete these fields:
    • Name = Spend Analysis by Business Unit
  4. Click the Product Code drop-down list and select a customer product code between 55 – 59.
  5. In the Table/View Name field, enter V43261A.
  6. Click Load.
  7. Enable the Aggregation option.
  8. In the Filter field, enter Or Ty.
  9. In the row for Or Ty [F4311] (DCTO), click the Filter icon Filter Icon to add it to the Filter Criteria section on the right.
  10. Set these values:
    • Operator = is equal to
    • Value = OP
  11. On the left side change the value in the Filter field to Co.
  12. In the row for Order Co [F4311] (KCOO), click the Filter icon Filter Icon to add it to the Filter Criteria section on the right.
  13. On the left side, change the value in the Filter field to Extended.
  14. In the Extended Price [F4311] (AEXP) row, click the Aggregation icon Agggregation Icon and select Sum.
  15. In the Extended Cost [F4311] (ECST) row, click the Aggregation iconAgggregation Icon and select Sum.
  16. On the left side, change the value in the Filter field to Business Unit.
  17. In the row for Business Unit [F4311] (MCU), click the Group By icon Group By Icon to add it to the Group By section on the right.
  18. In the Group By section, enable the Associated Description option.
  19. Save the Data Request.
  20. Screenshot
    Data Request
  21. From the Manage menu, click Create Orchestration. Keep the default values for the Name and Description fields.
  22. Click the End node and click Outputs and Assertions.
  23. Verify that all the return fields are enabled. If they are not, enable the Select All option.
  24. Screenshot
    Outputs and Assertions
  25. Save the orchestration.
  26. Double-click the Start node to launch the Run Orchestrations page.
  27. Enter 00200 in the Value field for Order Co1 and click Run.
    The result displays an array with the name “Spend Analysis by Business Unit” with each record containing a price sum, a cost sum, and a Business Unit description.
  28. Screenshot
    Run Orchestrations

section 2Creating a Widget to Display a Bar Chart of Spending by Business Unit

In this exercise, you will create a Widget to display a bar chart of spending by business unit.

  1. Close the Run Orchestration page to return to the orchestration.
  2. Click the Manage menu and select Create Widget.
  3. On the Widget page, keep the default Name and Description and complete these fields:
    • Widget Type = Chart
    • Title= Spend Analysis by Business Unit
    • Chart Type = Bar
    • Show Legend = Enable
    • Enable Zoom and Scroll = Disable
  4. Click the Data Source tab.
  5. In the Inputs section, enable the Widget Input option for the Order Co 1 field.
  6. In the Inputs section, change the value in the Name field to Company.
  7. Enter the Default Value as 00200.
  8. Screenshot
    Inputs
  9. In the Chart Data section, verify that From Array is enabled and the first array is selected automatically.
  10. In the Chart Data section, enable the Value option for both Extended Price [F4311]-Sum and Extended Cost [F4311]-Sum.
  11. Enable the Literal option in the Series Name column for both Extended Price [F4311]-Sum and Extended Cost [F4311]-Sum.
  12. Enter the value as Price and Cost respectively for Extended Price [F4311]-Sum and Extended Cost [F4311]-Sum.
  13. Enable the Group option for Business Unit [F4311].
  14. Screenshot
    Chart Data
  15. Click Save.
  16. Click the Preview tab.
  17. The Widget processes automatically and the preview displays the bar chart. 
  18. Screenshot
    Widgets Preview
  19. To learn more, enter the value as 00001 for Company and click the Refresh button to see that company’s chart.

section 3Displaying the Widget in EnterpriseOne

In this exercise, you will configure a composed page to display the Spend Analysis by Business Unit Widget.

  1. From the Tools drop-down list (top right), select JD Edwards EnterpriseOne.
  2. In the menu under your user name, click Manage Content, and then click Composed Pages.
  3. Use the same page you created in the previous OBE or select the (Create) option from the Name field.
  4. To create a new composed page:
    1. Click the Create New Content button (page with a plus) at the top left of the screen.
    2. Select Designer Pane.
      Screenshot
      Designer Pane
    3. Enter a name for the pane (for example, Widgets).
    4. Move the Initial Total Columns and Initial Total Rows sliders to a 3 x 2 grid.
    5. Click OK.
    6. Screenshot
      Create Link to Designer Pane
    7. Click Edit (Pencil) icon next to Default Page Title and delete the title.
    8. Click the Configure Page (gear) icon next to the pencil icon. Complete these values:
      • Show Description = Hover Only
      • Style = Large Icons
    9. Click OK.
  5. Hover over the first empty cell in the designer pane, click the Plus icon.
  6. Enter these values to create a Widget tile.
    • Tile Type = Widget
    • Widget = #Spend Analysis by Business Unit (Spend Analysis by Business Unit) – Chart 
  7. In the Widget Inputs window, in the Company(String) field, enter 00200, and click OK.
  8. From the Style drop-down list, select No Box and change the Title to Manufacturing/Distribution Co. Spend Analysis.
  9. In the Description field, enter a short description or leave blank for a cleaner tile.
  10. Click OK to close the Configure Tile window.
  11. Click the Save button at the top of the composed page designer.
    Enter a name for the composed page (for example, Widgets) if it is new. If you already have one called Widgets, use Widgets2.
  12. Screenshot
    Enter New Name Window
  13. Click OK.
  14. Click the X icon at the top right to close the designer page. The new composed page is displayed with the bar chart Widget.
  15. Screenshot
    Spend Analysis Bar Chart Widget
    Now you know how to build a Widget to display a bar chart and include it in a composed page.

more informationWant to Learn More?



T