X

An Oracle blog about PeopleSoft Technology

Enrich Your Fluid Applications with Third-Party Integrations

Matthew Haavisto
Product Management Director

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
map.setCenter(lasPos);
map.setZoom(5);


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!

Join the discussion

Comments ( 2 )
  • guest Friday, January 13, 2017

    When setting up an Oracle DB with multiple tables for PeopleSoft HR data is it standard to use " views " and do not use Primary Keys for the table data.


  • Marie Wednesday, February 6, 2019
    Hi Matthew,

    This is great information. Would you be able to use Fluid to track Scorm E-Learning completions as well? What kind of settings/data would need to be in place for that to work?

    Thanks for your insight.
    Marie
Please enter your name.Please provide a valid email address.Please enter a comment.CAPTCHA challenge response provided was incorrect. Please try again.