| <!-- | |
| Licensed to the Apache Software Foundation (ASF) under one or more | |
| contributor license agreements. See the NOTICE file distributed with | |
| this work for additional information regarding copyright ownership. | |
| The ASF licenses this file to You under the Apache License, Version 2.0 | |
| (the "License"); you may not use this file except in compliance with | |
| the License. You may obtain a copy of the License at | |
| http://www.apache.org/licenses/LICENSE-2.0 | |
| Unless required by applicable law or agreed to in writing, software | |
| distributed under the License is distributed on an "AS IS" BASIS, | |
| WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | |
| See the License for the specific language governing permissions and | |
| limitations under the License. | |
| --> | |
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>All Calls Apigee App Services (Usergrid) Example</title> | |
| <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> | |
| <link rel="stylesheet" href="../resources/css/bootstrap-combined.min.css" /> | |
| <link rel="stylesheet" href="../resources/css/styles.css" /> | |
| <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> | |
| <script src="../../usergrid.js" type="text/javascript"></script> | |
| <script src="app.js" type="text/javascript"></script> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <img src="../resources/images/apigee.png"> App Services (Usergrid) Javascript SDK Example | |
| </div> | |
| <div class="breadcrumb"> | |
| <a href="../../index.html"><< examples</a> | |
| </div> | |
| <div class="info"> | |
| This sample application is a quick example to show how to make App Services (Usergrid) calls - GET, POST, PUT, DELETE - with our Javascript SDK. | |
| Also included is a login example. For more information on App Services, see our <a href="http://apigee.com/docs/app_services">docs</a>. | |
| </div> | |
| <div id="main" class="main"> | |
| <h3>Select method to test:</h3> | |
| <ul class="nav nav-tabs"> | |
| <li id="get-nav" class="active" ><a id="show-get" href="javascript:void(0);">GET</a></li> | |
| <li id="post-nav"><a id="show-post" href="javascript:void(0);">POST</a></li> | |
| <li id="put-nav"><a id="show-put" href="javascript:void(0);">PUT</a></li> | |
| <li id="delete-nav"><a id="show-delete" href="javascript:void(0);">DELETE</a></li> | |
| <li id="login-nav"><a id="show-login" href="javascript:void(0);">LOG IN</a></li> | |
| </ul> | |
| <div id="get-page" class="form-block"> | |
| <div class="section-header">Method: <b>GET</b></div> | |
| <div class="well"> | |
| <div id="name-control" class="control-group"> | |
| <div class="controls"> | |
| <label class="control-label" for="get-path">Path</label> | |
| <input type="text" name="get-path" id="get-path" class="span4" style="float: left;" value="users/fred"/> | |
| <span class="span4 left" style="width: 10px; float: left;"> </span> | |
| <button class="btn btn-primary" id="run-get" style="width: 90px;">Run Query</button> | |
| <span style="clear: both;"> </span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="note"> | |
| To run a <b>GET</b> query against the API, enter the path you want to query, then push the "Run Query" button. By default, the value is "users/fred", which will translate to a call | |
| to: https://api.usergrid.com/your-org/your-app/users/fred, and will retrieve the record for fred. | |
| <br/><br/> | |
| <b>Note:</b> If you get an error here, it probably means "fred" doesn't exist. Choose "POST" to create a new "fred". | |
| </p> | |
| <div class="section-header"><b>GET</b> API Response</div> | |
| </div> | |
| <div id="post-page" class="form-block"> | |
| <div class="section-header">Method: <b>POST</b></div> | |
| <div class="well"> | |
| <div id="post-name-control" class="control-group"> | |
| <div class="controls"> | |
| <label class="control-label" for="post-path">Path</label> | |
| <input type="text" name="post-path" id="post-path" class="span4" value="users" /> | |
| <label class="control-label" for="post-data" style="padding-top: 10px;">Json Request Body</label> | |
| <input type="text" name="post-data" id="post-data" class="span4" style="float: left" value='{"username":"fred", "password":"barney"}' /> | |
| <span style="width: 10px; float: left;"> </span> | |
| <button class="btn btn-primary" id="run-post" style="width: 90px;">Run Query</button> | |
| <span style="clear: both;"> </span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="note"> | |
| To run a <b>POST</b> query against the API, enter the path you want to call and the JSON you want to send to the server, then push the "Run Query" button. By default, the path | |
| of users, and the JSON request body of, "{"username":"fred"}" will create a new user called "fred". | |
| <br/><br/> | |
| <b>Note:</b> If you get an error here, it probably means "fred" already exists. Choose "DELETE", run the DELETE query to delete the "fred" entity, then try the POST query again | |
| </p> | |
| <div class="section-header"><b>POST</b> API Response</div> | |
| </div> | |
| <div id="put-page" class="form-block"> | |
| <div class="section-header">Method: <b>PUT</b></div> | |
| <div class="well"> | |
| <div id="put-name-control" class="control-group"> | |
| <div class="controls"> | |
| <label class="control-label" for="put-path">Path</label> | |
| <input type="text" name="put-path" id="put-path" class="span4" value="users/fred" /> | |
| <label class="control-label" for="put-data" style="padding-top: 10px;">Json Request Body</label> | |
| <input type="text" name="put-data" id="put-data" class="span4" style="float: left" value='{"othervalue":"12345"}' /> | |
| <span style="width: 10px; float: left;"> </span> | |
| <button class="btn btn-primary" id="run-put" style="width: 90px;">Run Query</button> | |
| <span style="clear: both;"> </span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="note"> | |
| To run a <b>PUT</b> query against the API, enter the path you want to update and the JSON you want to send to the server, then push the "Run Query" button. By default, the | |
| path of users/fred, and the JSON Request Body of "{"othervalue":"12345"}" will update the "fred" entity with the JSON Request Body. | |
| <br/><br/> | |
| <b>Note:</b> If you get an error here, it probably means "fred" doesn't exist. Choose "POST" to create a new "fred". | |
| </p> | |
| <div class="section-header"><b>PUT</b> API Response</div> | |
| </div> | |
| <div id="delete-page" class="form-block"> | |
| <div class="section-header">Method: <b>DELETE</b></div> | |
| <div class="well"> | |
| <div id="delete-name-control" class="control-group"> | |
| <div class="controls"> | |
| <label class="control-label" for="delete-path">Path</label> | |
| <input type="text" name="delete-path" id="delete-path" class="span4" style="float: left;" value="users/fred"/> | |
| <span class="span4 left" style="width: 10px; float: left;"> </span> | |
| <button class="btn btn-primary" id="run-delete" style="width: 90px;">Run Query</button> | |
| <span style="clear: both;"> </span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="note"> | |
| To run a <b>DELETE</b> query against the API, enter the path you want to update and the JSON you want to send to the server, then push the "Run Query" button. By default, the | |
| path of users/fred, and the JSON Request Body of "{"othervalue":"12345"}" will update the "fred" entity with the JSON Request Body. | |
| <br/><br/> | |
| <b>Note:</b> If you get an error here, it probably means "fred" doesn't exist. Choose "POST" to create a new "fred". | |
| </p> | |
| <div class="section-header"><b>DELETE</b> API Response</div> | |
| </div> | |
| <div id="login-page" class="form-block"> | |
| <div class="section-header">Method: <b>Log In</b></div> | |
| <div class="well"> | |
| <div id="login-name-control" class="control-group"> | |
| <div class="controls"> | |
| <label class="control-label" for="username">Username</label> | |
| <input type="text" name="username" id="username" class="span4" value="fred"/> | |
| <label class="control-label" for="password" style="padding-top: 10px;">Password</label> | |
| <!-- note: normally the password field would be of type password so the input is hidden. For this demo | |
| we have left it in the clear so that it is easier to use. Please use type password for production apps! --> | |
| <input type="text" name="password" id="password" class="span4" style="float: left" value="barney"/> | |
| <span style="width: 10px; float: left;"> </span> | |
| <button class="btn btn-primary" id="run-login" style="width: 90px;">Run Query</button> | |
| <span style="clear: both;"> </span> | |
| </div> | |
| </div> | |
| </div> | |
| <p class="note"> | |
| To test a <b>login</b> against the API, enter the username and password, then push the "Run Query" button. By default, the username is set to "fred" and the password is set to | |
| "barney", as created in the default "POST" method. | |
| <br/><br/> | |
| <b>Note:</b> If you get an error here, it probably means either the user doesn't exist, or hasn't had the password set properly. Choose "POST" to create a new "fred". | |
| </p> | |
| <div class="section-header"><b>Log In</b> API Response</div> | |
| </div> | |
| <div class="well" id="response"> | |
| // Press 'Run Query' to send the API call. | |
| </div> | |
| </div> | |
| </body> | |
| </html> |