Snippets
Created by
Sean Fang
last modified
Alex Cotic-Ehn
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 | <!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)
You can clone a snippet to your computer for local editing. Learn more.