Publishing
Widgets to a Widget Pane on an EnterpriseOne Page
Before 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 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:
Access to a JD Edwards EnterpriseOne environment with
Release 26, (Tools Release 9.2.26.0) 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.
Creating
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.
Sign in to the EnterpriseOne web client.
From the user menu drop-down list, select Manage
Content and click Composed Pages.
From the Name drop-down list, select (Create)
to create a new page.
Click the Create New Content icon at the
top left of the window.
Click Widget to add a Widget Pane to the
page.
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.
Click OK. The Widget menu enables you to
select the widget for this pane.
From the Widget drop-down list, select #Past
Due Orders (Past Due Orders P43261) – Badge – Numeric. Widget List Note: You can type in the drop-down field to
filter the widget names.
Click Save at the top right of the window
to save the page.
On the Enter New Name window, enter Widget Panes.
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: 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.
Adding
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.
Make sure that you are viewing your new Widget Panes page.
From the user menu drop-down list, select Manage
Content and click Composed Pages.
The EnterpriseOne composed page opens in design mode.
Click the Create New Content icon at the
top of the page.
Click the Widget and drag it to the right
of the existing Widget Pane, then drop it.
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. Widget PanesNote: 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.
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.
Access the design mode for your EnterpriseOne page (user
menu -> Manage Content -> Composed Pages).
Click the Create New Content icon at the
top left of the page.
Click the Widget and drag it to the
bottom center of the page, then drop.
On the Create Link to Widget window, in the Name field,
enter Spend Analysis by Business Unit for Company 00200.
Click OK.
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.
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.”
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.
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.
Click Save.
Click Save at the top of the window to
save the page.
Click Close to close the page designer.
Your EnterpriseOne page with Widget Panes now looks similar to
this:
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.
From the user menu, select Manage Content,
and then select Composed Pages to access
the design mode for your EnterpriseOne page.
Click the Create New Content icon at the
top of the page.
Click the Widget and drag it to the
bottom left of the page, then drop it.
On the Create Link to Widget window, in the Name field,
enter Temperature.
Click OK.
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.
In the Value field, enter BOU/63,61. This is
the gridpoint for Denver, Colorado.
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.
Click Save.
In the next steps, you will add another instance of the
Temperature Meter widget and enable the Allow Input option.
Click the Create New Content icon at
the top left of the page.
Click the Widget and drag it to the
bottom center of the page, then drop.
On the Create Link to Widget window, in the Name field,
enter City Temperature.
Click OK.
From the Widget drop-down list, select #Temperature
Meter (Temperature Meter) - Meter.
On Widget Configuration window, enable the Allow
Input and Inline options.
When the Allow Input option is enabled, the system allows
the user viewing the widget at runtime to change or override
the input value by using the Configuration window that is
displayed when clicking the Widget Configuration
icon .
When the Inline option is enabled, the system renders the
input field at runtime above the widget visualization,
allowing the user to both see and change what value is being
supplied to the widget on the fly.
Note: You can move the Number of rows of
inline inputs slider to set a row value. This value
determines how the available space for the widget is shared
between inline inputs and the widget visualization. A larger
number displays more inline inputs without a scroll bar, but
it decreases the size of the data visualization. For this
OBE, let us leave the default value.
Enable the Override Title option and
change the Title to Your City Temperature.
Leave the Input Value field for gridpoints (String) as
blank.
In the previous exercise, as the page designer, you added
Widget Panes titled “Your City Temperature” and “Your City
Forecast”. You enabled Allow Input and Inline options for
"Your City Temperature" and enabled the Allow Input option for
the "You City Forecast" widgets. In this exercise, acting as
an user, you will configure these two widgets with input for
your location and change the titles accordingly.
Make sure that you are viewing your new Widget Panes page.
Notice the gridpoints (String) input field above the widget
visualization on Your City Temperature Widget Pane. This
input field appears above the widget visualization because
you have enabled the Inline option for
this Widget Pane. As a user, you can view and modify the
value that is being supplied to the widget in real time.
In the gridpoints Input field, enter a value from the
following table to configure gridpoints for a different city
and press Enter.
To change the title, click the Widget
Configuration icon .
In the Widget Configuration window, enable the Override
Title option and change the value in the Title
field to match the city.
Note: The Inline Input field and the Input
field in the Widget Configuration window are the same. If
you change the input value in the Input field of the Widget
Configuration window, the system automatically updates the
same value in the Inline Input field. Conversely, if you
change the input value in the Inline Input field, the system
updates the value in the Input field of the Widget
Configuration window. Widget Pane
- Input in Widget Configuration Window and Inline
Input
Click Save.
The EnterpriseOne page refreshes the widget with the new
title as shown in the following screenshot:
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.
Make sure that you are viewing your new Widget Panes page.
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:
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.
Publishing
Widgets to a Widget Pane on an EnterpriseOne Page
Before You Begin
Creating
a New EnterpriseOne Composed Page and Adding the First Widget
Pane
Adding
Widget Panes to the EnterpriseOne Page
Adding
Widgets with Default Inputs
Adding Widgets with User Inputs
.
Providing User Input to Widgets
Viewing Widget Panes in Full Screen Mode
Conclusion