Box Plug-in

Contents

Overview

This is a sample plug-in with a Kintone integration with "Box", a file hosting service operated by Box, Inc.
https://www.box.com/ (External link)

The Box Plug-in displays contents of your Box account, and also creates new folders when new records are created.
You will need an active Box account to connect your Kintone app with Box.

Integration Screenshots

The Box Plug-in has the following characteristics:

  • Contents of files can be previewed within the record
  • When a record is created in the app, a folder will be created inside your box account.
  • When a folder is created in your box account, this will not create a new record in your Kintone app.

Setting up the Box Plug-in

Follow the below 4 steps to connect your Kintone app to your Box account.

Step 1: Set up Your Form in the App Settings

To configure your Box Plug-in, you will first need to edit your app's form and set the below 2 fields.

  • A "Text" field with a "Prohibit duplicate values" option
    This value in this field will be used to create and correspond to folders in your Box account.

  • A "Link" field with the URL option, or a "Text" field.
    Box will be embedded in the location of this field.

Once these fields are set, you can go ahead to place other fields of your choice onto the canvas. They will not affect the behavior of the plug-in.

Step 2: Add the Box Plug-in to Your App

Install the Box Plug-in into your Kintone environment, and add it to your app.

  1. Download the Box Plug-in file introduced later on this page
  2. Install the plug-in file into your Kintone environment. Refer to the following article on the Kintone Help site for steps to install the plug-in file:
    Adding plug-ins by importing plug-in files (External link)
  3. Add the Box Plug-in to your app. Refer to the following article on the Kintone Help site for steps to add the plug-in:
    Adding plug-ins to an app (External link)

Step 3: Configure the Settings for the Plug-in

Set up the configurations for the plug-in added to your app in STEP 2.

  1. On the apps settings page, click on "App Settings" -> "Plug-ins", and click on the cog wheel for the Box Plug-in.

  2. Set up each item in the settings as follows:

    • Box Parent Folder ID
      Specify the Folder ID of a folder in your box account. Kintone will create folders under here when you create a new record in Kintone.
      The folder ID can be found in the URL of your box folder, in the form below:
      https://app.box.com/files/0/f/(Folder ID)/(Folder Name) or https://app.box.com/folder/(Folder ID)

    • Kintone Key Field
      Select the "Text" field in your app that has the "Prohibit duplicate values" option turned on. When a new record is created in your app, a folder with the same name as the value of this field will be created in your Box account.

    • Box Shared Link Field
      Select the "Link" field or "Text" field in your app. This location will be where Box will be embedded in your record details page.

    • Box Shared Link Permissions
      Sets the permission type of the folder:

      • Collaborators (People in this folder): Only users who are invited to the folder can access the files.
      • Company (People in your company): Users with a company email address or collaborators who have access to the folder can access the files.
      • Open (Anyone with the link): Any user can access the files if they have the link.

      For more details, please refer to the Box’s help page: Using Shared Links (External link)

  3. Click save.

  4. Click on "Settings" on the breadcrumbs,

    and on "Update App" to apply the plug-in settings.

STEP 4: Allow Kintone to Access Box

When you add a new record to the app, you will be directed to a log in screen of box, where you will be asked to input your email address and password for your box account.

Place in your credentials, and click “Authorize”, and your Box Plug-in will be ready.

Plug-in Sample

Packaged Sample

SAMPLE_boxPlugin_v5.0.1 (External link)

Updates

Date Update Notes
12th January 2024 ver. 5.0.1
  • Fixed homepage_url
28th March 2019 ver. 1.6.2
  • Adjusted the size of the iframe displaying the Box contents
  • Updated the code to register event handles synchronously
26th February 2018 ver. 1.6.1
  • Fixed a function that was supposed to return the event object, to correctly return the event object
10th August 2017 ver. 1.6
  • Changed stylesheet from "51-current-default.css" to "51-modern-default.css" .
  • Other minor updates were made
4th September 2015 ver. 1.5

Limitations

  • This Box Plug-in sample will not run on the smartphone.
  • The Kintone JavaScript Delete events are not involved in this plug-in - this means that deleting a record in Kintone will not result in deleting a folder in Box. If you delete files and folders in the displayed Box area though, this will also delete files and folders in your Box account.

Notes

  • We do not guarantee this sample to run.
  • We do not provide any technical support for this sample plug-in.
  • This plug-in uses APIs that are not made public on the Kintone Developer Program. Please refrain from developing and selling plug-ins that use these private APIs.
  • Some of the code in this plug-in alters the DOM structure of the app. These altered DOM structures may be affected by future Kintone updates. Be sure to note this if you are to use this plug-in sample as reference.

OSS Licenses

The following licenses are being used in this plug-in: