Skip to content

Quick Start

Jump to bottom
Geoff Lanotte edited this page Sep 24, 2018 · 3 revisions

TeamSnap.js is a client framework that can be used in the browser.

Browser

Getting set up

In order to use TeamSnap's APIs you will need to register your app at https://auth.teamsnap.com/ to get a client ID and secret. You'll want to set your callback URL to a page on the domain and protocol (http/https) which your app will be running from, otherwise it will not be able to get the token returned.

First you will need to load teamsnap.js into your HTML page.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="js/teamsnap.js"></script>
</head>
<body>

</body>
</html>

Then you'll need to initialize the SDK with your client ID. Note: it is not safe to publish your secret. You should never put your secret into your HTML page or loaded code.

teamsnap.init(clientId);

Authorizing

Once you have initialized TeamSnap.js you can then authorize the app. If you've previously authorized and stored the token (e.g. in sessionStorage) you may auth immediately.

if (teamsnap.hasSession()) {
  teamsnap.auth();
  teamsnap.loadCollections(function(err) {
    if (err) {
      alert('Error loading TeamSnap SDK');
      return;
    }
    teamsnap.loadTeams(onTeamsLoad);
  });
}

Otherwise the user will need to go through the oauth browser flow.

var redirect = ''; // One of the redirect URLs entered when creating your application, must be same-domain
var scopes = ['read', 'write'];
teamsnap.startBrowserAuth(redirect, scopes, function(err) {
  if (err) {
    alert('Error loading TeamSnap SDK');
    return;
  }
  teamsnap.loadCollections(function(err) {
    teamsnap.loadTeams(onTeamsLoad);
  });
});

Loading team data

You can load all of the data for a team at once using the bulkLoad method.

teamsnap.bulkLoad(teamId, function(err, items) {
  console.log(items);
});

If you would like to use the Persistence feature, enable it before loading the team data.

teamsnap.enablePersistence();
teamsnap.bulkLoad(teamId, function(err, items) {
  var team = items.filter(function(item) { return item.type == 'team' }).pop();
  console.log(team);
  console.log(team.members);
  console.log(team.events);
  console.log(team.trackedItems);
});

For a better understanding of the features TeamSnap.js offers see the Overview.

Clone this wiki locally