What are we going to build?

In this tutorial, you’ll learn how to use the Box.com API plugin. Box.com is an online file sharing and cloud content management service for businesses. This plugin will make it easier for you to use the Box API, and comes with a ready-to-run sample application.

Before you begin

Tutorial level: intermediate.

Create a new project

1. Click “Create new app,” enter BoxFilesApp for an app name, and click “Create”.

Once the editor loads, you’ll see something like:

2. On the left-hand side, click Pages > startScreen – an editor with an empty startScreen will open:

Importing the plug-in

1. To import the plug-in, click CREATE NEW > From Plug-in:

2. Find the Utilities section, select “Box API” and click “Import selected plug-ins”.

3. After importing the plug-in, set the default start page to Box_startScreen and, in App settings, set the default theme to Box_Theme, and check “Render all pages in one HTML file”:

4. To use the Box API, you must have a Box Enterprise account (free). Go to Box Developers site and create an application to get your client_id and client_secret keys. You’ll also have to specify the Box_startScreen page URL as redirect_uri.

To get this URL follow the steps:

1. Click the small arrow to the right of the “Test” button and click  “Launch” for “Show without frame”:

2.  Once the app is loaded, copy the entire URL:

It should look like the following:

If you’re using libraries version below 3.0, the URL will look as following:

1	https://appery.io/app/view/{ENTER HERE YOUR APPERY.IO APP ID}/Box_startScreen.html

3. Paste the URL to redirect_uri on the Box site and save:

Add the “s” letter to “http” if URL doesn’t contain it.

4. Switch back to Appery.io to set your client_id and client_secret keys in Services > Box_Settings:

Application

When the application starts for the first time, click the “Authorize” button:

You’ll be redirected to the Box login page, where you should enter your Box credentials (they can be your developer account’s credentials or any others):

Then, click “Grant access to Box,” and you’ll see the list of your files and folders:

You can click any folder to view its contents. You can also click any file to get information about it. If the file is a simple text document, you’ll see its contents in the text area. If the file is an image, you’ll see its thumbnail. You can also share or unshare the file, view its comments and add new comments:

You can also tap and hold an item to call the manipulation menu. There you can rename, copy, move or delete any item:

You can also search for files and folders from the Search page:

On the Trash page, you’ll see all your deleted files and folders. You can restore these items or permanently delete them:

REST services

Let’s have a look at some of the services which are used in the Box application.

Box_OAuth

Apps connect to Box using OAuth 2, the standard used by most APIs for authenticating and authorizing users.

The Box_OAuth service is used to exchange the authorization code for an access token from Box. This service is called from the Javascript code and all the input parameters are also added from code.

To learn more about Box OAuth 2 authentication, please visit http://developers.box.com/oauth/.

Box_getFileInfo

The Box_getFileInfo service returns information about a file for a given file ID:

Request parameters:

The authorization parameter is a string “Bearer ” + access_token. This parameter should be sent in the header. The access_token is received with the help of the Box_OAuth service. An authorization parameter of this kind is used in all other services. That’s why it is stored in authorization local storage variable.

You need an access_token to test the service. That’s why it is easier to create the response structure from the sample response specified in the Box developer documentation (http://developers.box.com/docs/).

Response parameters:

Other services are defined in a similar manner.

Mapping the UI

The final step is to map the service parameters to the UI components.

Here’s an example showing request and response parameters being mapped to UI components.

Request parameters:

Response parameters:

All other services are defined in a similar manner.