Created by Sean Fang last modified Alex Cotic-Ehn 2023-12-06
      <!DOCTYPE html>
<!-- README - one45 API JavaScript Example ---------------------------------------
 1. Save this api_js_snippet.html file on your computer
 2. Open your preferred javascript-enabled browswer and open this file
 3. Follow the prompts asking for your client key and secret
 4. Follow the prompt for your one45 site url
 5. If all goes well, the API will return a response that is used by the HTML page 
    to construct a list of forms present in your system.
--------------------------------------------------------------------------------->
<html>
<head>
	<title>API Testing snippet</title>
	<style>
		#client_key, #client_secret, #school_base_url {width: 300px; margin-bottom: 10px;}
		#result {display: none;}
		body.wait { cursor: wait; } 
	</style>
</head>
<body>
	<h1>Javascript API Example</h1>
	
	<form id="api_info" action="">
		<p>Please fill in the following form and click 'Make API call'.</p>
		
		<section>
			Enter your client key:
		</section>
		<section>
			<input id="client_key" type="password" />
		</section>
		<section>
			Enter your client secret
		</section>
		<section>
			<input id="client_secret" type="password" />
		</section>
		<section>
			Enter your one45 site url (without 'http' or 'https'; e.g., 'api_sandbox_school_name.one45uat.com'):
		</section>
		<section>
			<input id="school_base_url" type="text" />
		</section>

		<input id="call_api" type="button" value="Make API call" onclick="callAPIs()" />
	</form>
	
	<hr>
	
	<div id="result">
		<h1>These are your forms</h1>
		<!-- We will list all of the forms we get back from the system in this list -->
		<ul id="list_forms">
		</ul>
	</div>
	
	<script type="text/javascript">
		var access_token;
		var school_base_url;
		var client_key;
		var client_secret;
		var params;
		
		function callAPIs()
		{
			client_key = document.getElementById("client_key").value;
			client_secret = document.getElementById("client_secret").value;
			school_base_url = document.getElementById("school_base_url").value;
			
			params = "client_key=" + client_key + "&client_secret=" + client_secret;

			req.open("POST", "https://" + school_base_url + "/web/one45.php/public/api/v1/token/generate", true);

			//Send the proper header information along with the request
			req.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
			
			req.send(params);
			
			//disabling button until the API call complete
			document.getElementById("call_api").disabled = true;
			document.getElementsByTagName('body')[0].className = "wait";
		}
		
		//make initial request to fetch access_token
		var req = new XMLHttpRequest();
		
		req.onreadystatechange = function (e) {
			//request finished and response is ready
			if (req.readyState == 4) 
			{
				//successfully get an access_token
				if(req.status == 200)
				{
					response = JSON.parse(req.responseText);
					access_token = response.access_token;

					//demo on making a request to /api/v1/forms resource
					forms_req.open("GET", "https://" + school_base_url + "/web/one45.php/api/v1/forms?limit=2", true);
					forms_req.setRequestHeader('Authorization', 'Bearer ' + access_token);
					forms_req.send();
				}
				else if(req.status == 401) 
				{
					//invalid client credential given
					response = JSON.parse(req.responseText);
					alert(response.error_description);
					document.getElementById("call_api").disabled = false;
					document.getElementsByTagName('body')[0].className = "";
				}
				else 
				{
					alert("Something else went wrong.");
					document.getElementById("call_api").disabled = false;
					document.getElementsByTagName('body')[0].className = "";
				}
			}
		};

		var forms_req = new XMLHttpRequest();
		forms_req.onreadystatechange = function (e) {
			if (forms_req.readyState == 4) 
			{
				//successfully make the request to api/v1/forms resource
				if(forms_req.status == 200)
				{
					// this list element is where we are going to be appending items to represent each form returned by the API
					var form_list = document.getElementById('list_forms');
					
					response = JSON.parse(forms_req.responseText);
					
					// loop through each of the forms returned by the API
					for (i in response)
					{
						// create an element in the form list, and append the right information
						addFormToList(form_list, response[i]);
					}
					
					document.getElementById("result").style.display = "block";
				}
				else if(forms_req.status == 401) 
				{
					//invalid access_token given
					response = JSON.parse(forms_req.responseText);
					alert(response.error_description);
				}
				else 
				{
					alert("Something else went wrong.");
				}
				
				document.getElementById("call_api").disabled = false;
				document.getElementsByTagName('body')[0].className = "";
			}
		};
		
		/**
		 * This function takes the information about one of the forms that was returned from the rest API and adds it to an HTML list element on the page
		 */
		function addFormToList(list_element, form_data)
		{			
			var form_item = document.createElement("li");
			form_item.innerHTML += form_data.name;
						
			var num_questions = document.createElement("div");
			num_questions.innerHTML += "This form has " + form_data.questions.count + " questions";
					
			form_item.appendChild(num_questions)
			list_element.appendChild(form_item);
		}
	</script>
</body>
</html>

    
Comments (0)

HTTPS
SSH
You can clone a snippet to your computer for local editing. Learn more.
Snippets

one45 Software one45 API request snippet (Javascript)

Comments (0)
