AJAX call to Web API then use JSON data source

Here is an example on how to make AJAX call to Web API.

To explain this scenario I will give an example of how to make weather API call, before we dive into how to code, let's see the end product:

You can use PeopleSoft input field as well to make AJAX call but for demo I used HTML area on a PeopleSoft page.

Here is step by step process on how to do this:

1. Create a fluid page and add tile on to your homepage.

2. Create work record and add HTMLAREA field to the work record, create new HTML definition, then insert HTML area on your fluid page and assign this work record.field name to page's HTML area.

3. In page activate add following peoplecode, this populates your HTML area with your HTML code, you will be writing HTML code in next step

AJAX_WTHR_WRK.HTML_AREA_01.Value = GetHTMLText(HTML.AJAX_WEATHER_CALL);

4. Now add following code to your newly created HTML definition from step 2

5. Test your code from your fluid tile, you will have working weather app


Here is how this code is working:

In your HTML area, you have two div elements, one takes input and other gives you the output.

In the input text area, we are using oninput DOM Event to call loadAJAX function from JavaScript, the movement browser detects user input loadAJAX function is called.

<input type="text" id="CityOrZipCode" oninput="loadAJAX()" Value="">


In loadAJAX function, we are making an XMLHttpRequest AJAX call to our weather API url, this silently makes the call behind the scenes of the browser and updates your page elements without refreshing the whole page, thereby reducing traffic between server and client.

If you right-click and inspect your browser on Network tab you will notice how we are sending requests to browser and getting the response. Status 404 says bad request and 200 is a success.

When we typed D or Da in the input text area weather API call failed, but the moment it found a city with Dal, Dall or Dallas it returned status 200.

This code checks if AJAX call is a success:

if ((request.readyState === 4) && (request.status === 200)) 

Since our AJAX call is successful, now we are getting JSON  response then parse it, then get the values you need from JSON and do required calculations and store your values in variables.

Using DOM's innerHTML property we will update the output div elements with the variables we created.

var modify = document.getElementById('Update');

 if (!CityOrZipCode) {
                            modify.innerHTML = "Enter City or Zip Code";
                        } else {
                            modify.innerHTML = "Bad Request, City or Zip Code not found";
                        }

var WindSpeedmodify = document.getElementById('WindSpeedUpdate'); WindSpeedmodify.innerHTML = "";

This example should give you a good starting point to add AJAX to your pages.