by PT 8.61
Randall Groncki
Summary
Insights dashboards are a great way to provide context and meaning into your user’s data. However, most insights dashboards are separate from the transaction data. A user must navigate away from their current work areas to the Insights dashboards.
Beginning with PeopleTools 8.61, we can embed Insights dashboards in to Related Content, Fluid pages and Fluid Work Centers. We can now meet the user where they are in their workflow and provide an Insights dashboard their pages besides their data.
This post will discuss embedding and Insights Dashboard into a Fluid Page.
Note: Oracle published a PeopleSoft Spotlight Series video on embedding in January 2025. This post provides more detail on this one subject.
PeopleBooks 8.61 Link for Creating Visualizations and Embedding in pages
Before adding an Insights Dashboard to a Fluid Page
Extracting your data into OpenSearch and creating an Insights Dashboard is beyond the scope of this tutorial. There are basics needed before we can add dashboards to fluid pages.
Creating your data
- Search Definitions
- Defined
- Security Set
- Search Objects Deployed
- Data extracted
Create your Dashboards
- Index Patterns Built
- Visualizations created
- Dashboards Created
- Tile Dashboard: 1 visualization
- Main Dashboard: 1 or more visualizations
Import your Dashboards into PeopleSoft
- Imported
- Deployed
- Roles assigned
Premise for this Tutorial
This Tutorial uses the PeopleSoft HCM PUM 50 demo training data.
We have created a new page showing an employee’s training where we want to embed Insights dashboards. The high-level key for the component is the Employee ID.
We have already created a custom training history page which displays all the courses an employee has taken
This is our page before we embed the Insights dashboard. We have the Employee’s basic data.
We are going to add two different Insights dashboards to this page to help the user better understand this employee’s training.
- One Dashboard to the right of the employee’s data
- One Dashboard below the employee’s data
We have already created our Insights Dashboards and imported them into PeopleSoft
Training Classes Barchard Dashboard
Training Classes Grid Dashboard
A full Dashboard with multiple visualizations for better detail
Our component and our search objects are both using Employee ID as a high-level key. We are going to use the Employee ID on the page to filter the results on the embedded dashboards to only that employee’s training
Dashboard Design for Embedding
As of PeopleTools 8.61, the best type of dashboard to import into a fluid page is a one visualization dashboard. Dashboards with more than one visualization to not display correctly or at all in a PeopleSoft fluid page.
All the Chart Types are available.
There are limitations
The user enters a fluid page and an Insights dashboard displays prefiltered to that page’s data.
However, this is not a fully functional Insights dashboard:
- On the page, we can only present Insights dashboards with one visualization.
- The dashboard data is not dynamic: the user can’t click on data slices to filter down into the data
- The dashboard data is coming from the OpenSearch. It can be linked to the page data through configuration, but none of the data in the chart comes from the component.
- We can refresh the data in the embedded dashboard if the data in the page changes, but we can only filter by database table fields in the component, not work records.
- Dashboards must be a minimum size on the page, or they won’t display correctly. This will vary depending on your embedded dashboard.
When a user clicks on the embedded visualization, a new browser tab opens into a full Insights dashboard, pre-filtered with the same data as the page.
The embedded dashboard works more like a homepage tile than a multi-chart Insights dashboard. We can control the size and placement. But it’s a static chart acting as a link to the larger dashboard in a new browser tab.
Embedding the first Dashboard
Our basic fluid page is already built. The top part of the page is divided into three columns, the chart will take two of those column spaces. The bottom chart will take up the width of the page.
Add a group box for the bar chart. I labeled this group box “Related Content Chart” in this example.
Assign it a record and field name from a work record
On the Fluid tab the Group Box Type MUST be “Related Content”
In the Style Classes box, we add in a style that will force the chart display it’s full height. We control the actual size on the page with another group box.
psc_height-100pct
Add another group box to the page around this new group box. This new group box is the one that will control the dashboard size on the page. I named this group box “Content Sizing” in this example.
Open this group box’s properties and set the Style Classes for the size of embedded dashboard on the page.
Add the style classes to set the size of the embedded dashboard.
psc_height-30em psc_width-70pctAdd the embedded Dashboard to the page
Navigate: PeopleTools > Search Framework > Administer > Configure Insights Dashboards
Click on the “Page Level” tab
| Page Name | Name of the page to embed the Insights Dashboard |
| Component Name | Name of the target component |
| Content Reference | CREF of target page in this CREF |
| Page Field Name | Fieldname from Target Group Box (Related Content Type) |
| Page View | Smaller, one visualization dashboard to embed into the page |
| Full View | Larger target dashboard which will display in a new tab if page dashboard is clicked |
| App Class | App Class for filtering results – Not used in this demo *Note, this App Class cannot reference any objects in the component when creating filters. This is used for filtering by external values |
| Select | Select filtering App Class button |
| Set Filters | Set the filters on the dashboard. This is how we link the keys of the component to the data in the Search Definition to the dashboard is filtered by the page fields |
| Test Content | Test your configuration |
This is how our configuration appears for our first embedded dashboard
The page fieldname comes directly from the containing Group Box properties. As a note, only Group Boxes defined as Related Content are available in the Page Field Name dropdown.
Clicking on the Set Filters button, we tie the keys of the component to the fields in the Search Definition. We are allowed up to three fields to link the filters. In our example, we are just setting the filters on the EMPLID fields
Only page fields from database tables and views are available for filters. We cannot link Work Record fields.
Save the page and navigate back to our custom page. The page now displays the embedded Training Classes Insights dashboard.
If a user clicks on the dashboard, a new tab opens with the full dashboard. The filters from the page are transferred to the full dashboard preserving the context of the data. This Insights dashboard is fully functional.
Adding a second embedded dashboard
Even though the dashboards we embed in a fluid page can only have one visualization, we can embed more than one dashboard in a fluid page. We are going to embed the Employee Grid Dashboard.
Add another Related Content Group Box to our Bottom Chart Section
Set the Record and field name just like the first chart’s group box. Remember to use different field names for the group box
Set the Fluid Properties the same as the first dashboards group box
Add the parent group box to control the dashboard’s size on the page.
Set the fluid Properties of this new group box properties size the dashboard to 30 EM high and 80% of the width of the page.
psc_height-30em psc_width-80pctGo back to the Configure Insights Dashboard component and add this new dashboard to that page the same as the previous. The difference is that we are using a different dashboard to display anchored to a different related content group box.
Return to the page and test the second embedded dashboard.
As in the first embedded dashboard, this second dashboard is a static image on the page. The transaction links do not work in this embedded dashboard. When the user clicks on anything in this dashboard, the larger dashboard again opens in a new tab where all the links and filters are live.
