Appsmith with Box

This is a guide on how to make a successful connection from Appsmith to Box.com using a developer token or using authentication via Oauth2.0.

Table of Contents

• Appsmith with box
  • How to connect box
    • Application configuration from box
      • Create app
      • Additional configurations in my app
    • Connect with Developer Token
    • Oauth2 Configuration
    • Endpoint configuration
      • Get Files
      • Download Files
      • Delete Files
      • Upload Files

How to connect with Box

Application configuration from Box

Create app

1. Navigate to the developer dashboard in Box.

2. Click on My Apps.

3. Press Create New App.

4. Select Custom App.

5. Select the option called User Authentication (OAuth 2.0).

6. Enter the name of your app.

7. Press create.

Aditional configuration for the app

1. In OAuth 2.0 Redirect URI add new uri and put appsmith uri

   • https://app.appsmith.com/api/v1/datasources/authorize

2. In Applications Scopes select the option called Write all files and folders stored in box

3. Press the Save changes button

Connect with Developer Token

Import this CURL in appsmith for automatic configuration

curl https://api.box.com/2.0/folders/0 -H "Authorization: Bearer <<Token>>" -H "Content-Type: application/json"

Oauth2 Configuration

1. Go to datasources in Appsmith
2. Select Athenticated API
3. Set the configuration parameters as shown below

URL: `https://api.box.com/2.0/`
Headers: `Content-Type`: `application/json`
Authentication Type: `OAuth 2.0`
Grant Type: `Authorization Code`
Add Access Token To: `Request Header`
Access Token URL: `https://api.box.com/oauth2/token`
Client ID: `<<your_client_id>>`
Client Secret: `<<your_client_secret>>`
Authorization URL: `https://account.box.com/api/oauth2/authorize`

Add you Redirect URL in theOAuth 2.0 Redirect URI in your box.com console

4. Press the authorize button note: sometimes you will get a message that says something went wrong, just authorize the data source again

Endpoint configuration

Get Files

Http method: GET

URL: https://api.box.com/2.0/folders/0 Headers: Content-Type: application/json

1. You can link it to a table to show the files by writing this in the table data: {{Get_Files.data.item_collection.entries}}

Download Files

1. Use a widget input
2. Set the default value of the input to this {{Table1.selectedRow.id}}

Http method: GET

URL: https://api.box.com/2.0/files/{{Table1.selectedRow.id}} Headers: content-type: application/json

Delete Files

1. Use a widget input
2. Set the default value of the input to this {{Table1.selectedRow.id}} Note: You can use the same input configured above

Http method: DELETE

URL: https://api.box.com/2.0/files/{{Table1.selectedRow.id}}

Upload Files

Http method: POST

URL: `https://upload.box.com/api/2.0/files/content`
Headers: `content-type: multipart/form-data`
Body: In tab `MULTIPART_FORM_DATA` - `attributes:{"name":"{{File_data.files[0].name}}", "parent":{"id":"0"}}` - `file: {{File_data.files[0]}}`