Monday, February 20, 2017

Integrating Box File Picker with Salesforce

Box File Picker allows to view content present in box folders and to integrate it with other application. Suppose we want to display the box folder contents for user from salesforce UI, then we can use javascript code snippet provided for box file picker.

Box File Picker allow your users to share their Box content with your application — without using OAuth!

Now we are going to use below code sample to implement this in Salesforce. In order to use Box File Picker, you need Client Id or API Key.
Navigate to your box application and click on Edit Application button.

Suppose your URL is -

Then Client Id is 133000

Below is VF Page Code

Explanation about different attributes in Box file picker:
  • linkType : The type of link. Can be direct or shared
    • shared : Allow you to select folder as well as file inside folder. Shared also allow you to specify the access type of file or folder like people with link, people in your company or people with access to folders
    • direct : Allow you to select only files not folder.
  • multiselect : true or false.
    • true: will get checkboxes for multiple file selection
    • false: will get radio button for single file selection

Callback & Responses from Box File Picker

Below javascript functions helps in integrating Box file picker with your application:

// Register a success callback handler
boxSelect.success(function(response) {
// Register a cancel callback handler
boxSelect.cancel(function() {
    console.log("The user clicked cancel or closed the popup");

Details about callback functions:

  • Success function : Whenever user select files or folders, response is passed as JSON in sucess callback handler.
  • Cancel function : This function will be called whenever user click cancel or close the box file picker
Below is sample JSON response which we will get in success callback function for shared link type:

        "url" : "",
        "name" : "Happy Time",
        "access" : "collaborators",
        "type" : "folder",
        "id" : 100344004694
        "url" : "",
        "name" : "The Sunil Kumar.docx",
        "access" : "collaborators",
        "type" : "file",
        "id" : 1000000344

How to fetch files from Box and store it into salesforce

You can pass the JSON to controller method using javascript remoting and parse JSON to find out file and folder information. JSON response return the file URL which can be used to get file details by doing callout and storing it as attachment in salesforce.

Please refer Fetching File from External/Public URL for more details on this.



  1. Hi Sunil,

    Can we change content disposition while creating download link for box file api.

  2. "Great blog created by you. I read your blog, its best and useful information. You have done a great work. Super blogging and keep it up.php jobs in hyderabad.

  3. Took me time to read all the comments, but I really enjoyed the article. It proved to be Very helpful to me and I am sure to all the commenters here! It’s always nice when you can not only be informed, but also entertained!