Tuesday Jul 12, 2016

Enrich Your Fluid Applications with Third-Party Integrations

Content provided by Balaji Pattabhiraman

PeopleSoft applications teams are delivering lots of great content in their images for the Fluid User experience. In addition, though, there are many things customers can do to enhance their applications to meet unique requirements. This post is the next in a series of capabilities that PeopleTools provides.

In this post we'll cover how to invoke javascript APIs to integrate third party elements within PeopleSoft Fluid pages. In this example, we're calling a google maps API for Resource location. PeopleTools 8.54 (and higher) provides the ability to create responsive Fluid components. In addition to making the layout responsive, PeopleTools provides developers with mechanisms to run any javascript API (your own or third party) within your PeopleSoft application.

We'll cover the following in this example:

  • Build a sample fluid application with two panel layout. The left panel loads a set of projects along with details such as the number of resources. The right panel loads the map.
  • Set a default so the user sees the map centered to the user's current location using HTML5 Geolocation. Resources nearby their current location are plotted on the map.
  • Selecting a Project on the left panel updates the map and indicates where resources are located.
  • Searching for a location (using the google places lookup API) centers the map to the selected location and shows the resources near the location in the map.

Note that this blog does not get into the details of the Google Maps or Places JavaScript API. Neither does Oracle PeopleSoft certify usage of Google maps. This is a technology demonstration on how to integrate PeopleSoft with third party JavaScript APIs. Please read the following on Custom JavaScript Guidelines.

First let’s look at the completed application and how it behaves for users, then we’ll show how you build a page to work like this.

Below is a PeopleSoft page.  When the page loads, the HTML5 geo location pops up asking for permission to use the user’s current location.  (If this is not granted, the map will center on the resource of the first project.)

Select Allow so that the map is centered based on the user's current location and the resources nearest that location.

Click on the caret tab to expand the left panel.  This shows us a list of projects.

In this scenario, we’ve selected the Implementation Project.  Notice that this project has 21 resources. The map now shows the resources by locations (using markers).

Clicking a marker (flag) shows the resource details.  In this case, we click on the Flag located on San Jose, CA, which shows us the 13 resources located at that location.

You can also search for resources at a different location using the Location box. This will use the Place Finder to suggest locations as you type. Here we’ve entered Tokyo, Japan. This loads the map centered on that location and the resources available nearest to the location.

In this example, the resource isn’t exactly geographically close!

So how did we achieve this?  The following are the high-level steps used to build this.

In App Designer, create a two panel layout using the delivered layout page PSL_TWOPANEL.  (Note that we provide many Fluid page templates in App Designer.)

This creates a default two panel layout page, where you can place your page fields.  Remember, in Fluid, designing a page no longer uses a WYSIWYG page design.  Instead, you have a series of group boxes into which you place your page elements.  The style sheets will take care of placement on the displayed screen.

Next we place the required fields on the page.  There are three main sections to consider:   1) A group box that will be the map field (named Map Canvas in the screen below)  2) A list grid that will hold the Project list, which is inside the subpage PC_MAP_PRJ_SBF, and 3) The section on top of the map (named PC_MAP_PNLHDR_SBF) that contains fields like the location.  We include them on the page illustrated below.  This example is available in a delivered Financials application (although it uses Oracle maps instead of Google maps).

Next we add the PeopleCode to load the list of project/resources and update the left panel with those details (list grid rows). The APIs to populate the grid rowset is as same as in Classic PeopleSoft, so we will skip those details in this blog.  In addition we can specify style classes to the page fields using the Fluid tab (Default Style Name) section on the form fields. These style classes can be delivered out of the box, or you can create your style sheet and include them for your page using the AddStyleSheet API in component post build. 

Now we get to the interesting part of populating the map.  First we define the JavaScript in an HTML file that will load the map initially or upon user action. You can write any JavaScript function routines.  You can look at example on google map JavaScript API doc here. These methods are defined in the HTML object PC_MAP_JS.  Here the method pc_loadMap is responsible for doing geo location, populating the map, enabling the places API and also calling the routine to set the markers.

The following lines enable the page's Location edit box (with page field name PACINPUT) as control for google places API input:

var input = document.getElementById('PACINPUT');
var searchBox = new google.maps.places.SearchBox(input);

The following lines associate the page's map canvas as the section for map. Initially, the map is centered by current location:

navigator.geolocation.getCurrentPosition(function(position) { posGeo = { lat: position.coords.latitude, lng: position.coords.longitude };
var map = new google.maps.Map(document.getElementById('%formnamedivPC_MAP_NUI_WRK2_MAP_CANVAS'), {
center: posGeo,
zoom: 10,
mapTypeId: google.maps.MapTypeId.ROADMAP

The following lines of code add the markers by looping through the resource details for a given project. The details are read from the database and stored in a page field in the component PeopleCode. It is read here in JavaScript to populate the markers:

for (var i = 0; i < gdata_PC_MAP_DATA_DVW$0.length; i++) {
var data = window.gdata_PC_MAP_DATA_DVW$0[i];
var marker = new google.maps.Marker({ position: {lat: parseFloat(resource[1]), lng: parseFloat(resource[2])}, map: map, icon: image, shape: shape, title: resource[5] });

The lines below associate the  event when you do a click a marker on the map to open the PeopleSoft modal page to display data. The openResourceInfoWindow will do a form submit (submitAction_%formname) to invoke the PeopleCode back from JavaScript to open the modal:

marker.addListener('click', function() {
     openResourceInfoWindow(marker, data[3],data[4], "M");
//Update the map and set the zoom level after adding the markers

Now include the Style Sheet (if you have custom style classes applied on the page fields) and the JavaScript (we just defined) to be used for the component.

Now call the JavaScript function using AddOnLoadScript when the user selects a project on the left panel as part of the field change PeopleCode. (You can call JavaScript from PeopleCode events in fluid!).  This will reload the map.

You off and running!


This blog provides information to the PeopleSoft community, about PeopleSoft Technology, otherwise known as PeopleTools.

For the PeopleSoft Applications blog see the PeopleSoft Strategy Blog.

For the Oracle Campus blog see Oracle Campus Blog.

For information about PeopleSoft see the PeopleSoft Information Portal.

For information about PeopleSoft and PeopleTools releases and updates see PeopleSoft Planned Features and Enhancements (login required).


« January 2017