Home Page > Tutorials > How to Use Fetch Api in Processmaker

How to Use Fetch Api in Processmaker

This tutorial is for ProcessMaker version 3

When trying to use the fetch api to make an ajax call in ProcessMaker, we need to consider if we are making the call to a trigger or not. We shall be looking at both instances where: 1. We make an ajax call to a trigger and 2. We call an api directly.

For this tutorial, we shall be using the JSONPlaceholder which is a fake online REST API for testing and prototyping. Let us begin.

API Call From Trigger

First we will create a Trigger and give it a title of Get All Posts then we will make a GET request to the /posts routes of our API, then save our trigger


$curl = curl_init();

curl_setopt_array($curl, array(
  CURLOPT_URL => "https://jsonplaceholder.typicode.com/posts",
  CURLOPT_RETURNTRANSFER => true,
  CURLOPT_ENCODING => "",
  CURLOPT_MAXREDIRS => 10,
  CURLOPT_TIMEOUT => 0,
  CURLOPT_FOLLOWLOCATION => true,
  CURLOPT_HTTP_VERSION => CURL_HTTP_VERSION_1_1,
  CURLOPT_CUSTOMREQUEST => "GET"
));

$response = curl_exec($curl);

curl_close($curl);
echo $response;

Next we create a Dynaform and give it a title of Fetch API then Save & Open it.
To begin designing the Dynaform, we will drag a panel onto it and give it an id of panelHeading, a border of zero, then style it like so:


<div style="background:#286090; 
            color:#fff; 
            text-align:center; 
            padding-top: 12px; 
            padding-bottom: 15px; 
            margin-top: 37px;" 
     
     class='container-fluid jumbotron'>

  <h4>Fetch API in ProcessMaker</h4>

</div>

Next, we will drag a button under the panelHeading and give it and id and name of btnGetRequest and a label of GET POSTS. We will attach a click event to it later to be used to fetch our posts from the API.
Under the button, drag another panel onto the Dynaform and give it an id of panelResult, a border of zero and style it like so:


<div class="panel panel-default" id="resultPanel" style="height: 100px">
	
</div>

Now, our Dynaform should look like the image below and we can now write our JavaScript in the Dynaform code editor which we will open by clicking the button highlighted in red:

In our editor, we will first of all declare all our constants:


const host 		= PMDynaform.getHostName(); // get the hostname
const ws 		= PMDynaform.getWorkspaceName(); // get the current workspace
const token 	= PMDynaform.getAccessToken(); // get the access Token
const app_uid 	= frames.app_uid ? frames.app_uid : ''; // get the case ID
let trig_uid; 	// set to the ID of the trigger

We will write a function that will format our json result from the ajax call into our panel with id panelResult


function showOutput(res) {

  document.getElementById('resultPanel').innerHTML = `
		<pre>${JSON.stringify(res, null, 2)}</pre>
  `;

}

Next, we write our function to make the ajax call to our Get All Posts trigger

For making ajax calls in ProcessMaker version 3, we use the PUT method


function getAllPosts(){
  
  trig_uid = "7602398855f3874765e8fa2087940747"; // Trigger ID of 'Get All Posts'
  const url = host + "/api/1.0/" + ws + "/cases/" + app_uid + "/execute-trigger/" + trig_uid;
  const testing =  fetch(url, {
    method: 'PUT',
    headers: {
      Authorization: 'Bearer ' + token
    }

  })
  .then(response => response.json())
  .then(json => showOutput(json))

 
}

Finally we attach a click event to our button to call our function


$(document).ready(function() {
  
    document.getElementById("btnGetRequest").addEventListener("click", getAllPosts);

  
});

When we run the process, this is how it will appear:

API Call Directly

In order to make our api call directly, the only thing we change is our url in the getAllPosts function and our method like so:


function getAllPosts(){
  
  trig_uid = "7602398855f3874765e8fa2087940747"; // Trigger ID of 'Get All Posts'
  const url = "https://jsonplaceholder.typicode.com/posts";
  const testing =  fetch(url, {
    method: 'GET',
    headers: {
      Authorization: 'Bearer ' + token
    }

  })
  .then(response => response.json())
  .then(json => showOutput(json))

 
}