If you find any errors, typos or have general feedback, select the text and click CTRL+ALT+ENTER.

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:CreateNewApp

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

Importing the plug-in

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

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”:AppSettings

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”:
ShowWithoutFrame

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:

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

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:Box_Settings

Application

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

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):
Cropped

Then, click “Grant access to Box,” and you’ll see the list of your files and folders:
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:
DoubledScreen

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

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

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

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/.
BoxOAuth2

Box_getFileInfo

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

Request parameters:Box_getFileInfoRequestQuery

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/).ImportButton

ImportServices

Response parameters:ResponseParams

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:RequestMapping

Response parameters:SuccessMapping

All other services are defined in a similar manner.