Invoking REST API Calls using AJAX in AgileApps Pages

Knowledge base
, ,
1

Overview

When we create a Page in the platform, we create a JSP page. We can embed Java code in that page and use it to directly interact with the platform. Alternately, we can use AJAX and the REST APIs, whichever is easier to implement.

Here, we first check the login status using AJAX GET-method, then we add a new record entry to some object using AJAX POST/PUT-method.

Prerequisites

To perform the actions here:

  • You should have a basic understanding of JavaScript/jQuery.
  • Ensure that you have a minimum of one object; for example, customer object in your application and it has some fields; for example, customer name, company address.
  • You should have the permissions to Developer Resources to create JSP Pages.

Procedure

To create a JSP file:

  1. Go to Settings > Developer Resources.
  2. Click New Page.
  3. Provide a page name with a .jsp file extension.
  4. Check the “Include Header files” checkbox.
Note: This is an example for your reference where we are making an AJAX call to get to know whether user has a valid session or not. This example is trivial, since login status will always be "true". Otherwise, you would not see the page at all. However, even this simple example displays several interesting characteristics.

First, we check the log-in status by verifying the session using an AJAX GET call:

<html>

<head></head>

<body>

   <button type="button" onclick="checkSessionStatus()">Check Session</button>

   <script type=“text/javascript“>

      function checkSessionStatus() {

         var xmlhttp;

         if (window.XMLHttpRequest) {

            // code for modern browsers.

            xmlhttp = new XMLHttpRequest();

         } else {

            // code for IE6, IE5 browsers.

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP“);

         }

         xmlhttp.onreadystatechange=function() {                     

            if (xmlhttp.readyState==4 && xmlhttp.status==200) {

               var reply = JSON.parse(xmlhttp.responseText);

               result = reply.platform.user.is_session_valid;     

            }

         }

         var url = "/networking/rest/user/isSessionValid?alt=json";

         var async = true;

         xmlhttp.open("GET", url, async);   

         xmlhttp.send(); 

      }

   </script>

</body>

</html>

AJAX POST call to create a new record:

<html>

<head>

   <script type="text/javascript">

      function createNewCustomer() {

         var xmlhttp;

         if (window.XMLHttpRequest) {

            // code for modern browsers.

            xmlhttp = new XMLHttpRequest();

         } else {

            // code for IE6, IE5 browsers.

            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP“);

         }

         var async = true;

         var url = "/networking/rest/record/customer?alt=json";

         var data = "<platform><record><customer_name>Ian</customer_name><company_address>SoHo</company_address></record></platform>";

         xmlhttp.open("POST", url, async);

         xmlhttp.setRequestHeader("Content-type", "application/xml");  // or "application/json"

         xmlhttp.send(data);

         if (xmlhttp.readyState==4) {

            if (xmlhttp.status==201) {

               var reply = JSON.parse(xmlhttp.responseText);

               recordID = reply.platform.message.id;

               // Do necessary staff after record getting created.

            } else {

               // Customer add failed error handle.

            }     

         }

      }

   </script>

</head>

<body>

<button type="button" onclick="createNewCustomer()">Create New Customer</button>

</body>

</html>

Considerations

We assume that the customer object (with customer_name and company_address fields) is available in your application. Otherwise, change the data variable accordingly in the AJAX call.