Sunday, June 21, 2015

Box and Salesforce Integration

In this blog, I am going to explain how to integrate Box.com and Salesforce using Apex and VF in order to upload document to Box and to view files present in Box in VF page.

First of all, Create a Box Application


Create Box content application which will help us to upload files directly from Salesforce to Box.com.  After creating app, copy client_id and client_secret values and specify your VF page URL as redirect_uri in Oauth 2 parameters section.


Now create another application and select Box view application. This will help us to view files in VF page. View API allow to convert files in HTML format for easy display in web pages. Copy view API Key from General information section.


Now Create a custom setting in Salesforce to store client_id,client_secret, access token, refresh token and View API key.



Now Create Remote site setting in order to do call out to Box.com.


Now create a VF page "boxAuthPage" and apex class "boxAuthPageController". Code is provided in end of this blog. Please scroll down to copy code and paste in your VF and apex class.

Snapshot of VF page:

Store client_id, client_secret, view api key in custom setting record. While creating custom setting record, I have specified "Box_sunil02kumar' as name for custom setting. If you want to use other name, then replace "Box_sunil02kumar' in apex class with your custom setting name.

Open VF page and click on Authorize Box button, system will redirect you to login page where you need to enter you box login credential and then a click grant access to box button.

All folder present in box will be listed in Folders drop down. When you select any particular folder, all files present in that folder will appear in page block table. When you click on "View" link, file will open on right side of page.

If you have box account, then use below url to test the functionality. Create folders in your box account and upload pdf and doc files in it. If you upload files with already existing file name in Box folder, then you will get error.

https://skforce-developer-edition.ap1.force.com/skforce__boxauthpage

I have built this page for demo. So every time you refresh this page, you need to again authorize it by clicking on Authorize box button. Actually I am not storing access token or refresh token or any user credentials and also scope of these variables are same as that of VF page. Also client id, client secret and access tokens are not displayed in demo page but if you follow all steps mentioned above including custom setting and remote site setting, then you will get complete UI.

Important information which will help you to understand apex class:
  • Uploading data into box.com uses content type as multipart/form-data.
  • You can not send a file to server which is expecting a binary. So you need to encode the base64 in binary supported format.
  • In order to view document, first you need to send request to get temporary download URL by sending file id to Box.com. Temporary download URL is returned in response Location header. This URL can be used to download file.
  • Once you get temporary download URL, sent request to BOX.com to get temporary document id. In HTTPRequest, you need to pass temporary download URL in body.
  • Now this document id which you get in response can be used to generate session id for file which will be used to view file in iframe in VF page. When you do call out to get session id, pass temporary document id in request body.
  • If file is processed by Box.com and is ready to view, then in response you will get session id. If your request is accepted but file is not yet converted to HTML format then in response header, you will time duration after which file will be ready. This information is present in 'retry' header in response.
  • Once you get file session id from Box.com, then you use it view file in iframe in your VF page by using  URL: https://view-api.box.com/1/sessions/'+fileSessionId+'/view


Notes:
  • You can upload any type of file to box folder.
  • Before uploading any file, please select folder in which you want to upload file.
  • As per my knowledge, View API doesn't support jpg and png images. 
  • You can easily view any pdf or word file from Box in SFDC using view api.
  • You can also specify download URL. Please refer Box content view API for this.
  • In apex, code is specified to get file download URL in FindFileDownloadUrl method in apex class.
This blog will help you to basic understanding of how to achieve integration between Box and SFDC by using apex code. After going through this code, you can easily modify the code as per your requirements.

Code for VF and apex class:



27 comments:

  1. We have mastered the integration of box and salesforce! You can now include functionality that allows an individual to associate any folder in box.com with a corresponding record in salesforce.com. Click on the link for more information, and we will be glad to assist you.

    http://www.eustaceconsulting.com/blog/general/associate-any-box-com-folder-with-salesforce-integration/

    ReplyDelete
  2. This comment has been removed by the author.

    ReplyDelete
  3. Why we used symcsk02 as a state?

    ReplyDelete
    Replies
    1. Hi Dilip,

      It is just a place holder. You can pass any value as per your wish. What ever you specify here will be returned in callback URL.

      Delete
  4. How did you create a Box View app? the option was not included that's why we are having trouble viewing the docs in Visualforce. Do you have other source for this? Thanks!

    ReplyDelete




  5. I like this query i was stuck in a problem but this query help me a lot. thank thanks

    Google App Integration Chennai

    ReplyDelete
  6. Hi you done a good job, This is very valuable information.
    I got struck at viewing files from box in iframe i'm not able to see the selected files .

    ReplyDelete
  7. How do i get Authcode if i am calling box api from class. i dont want to use VF page. is there any wahy to do this

    ReplyDelete
    Replies
    1. Did you ever answer this query? I am trying to do the same...

      Delete
  8. How did you create a Box View app? the option was not included that's why we are having trouble viewing the docs in Visualforce. Do you have other source for this? Thanks!

    ReplyDelete
  9. It’s too informative blog and I am getting conglomerations of info’s. Thanks for sharing; I would like to see your updates regularly so keep blogging.
    salesforce form builder and integration

    ReplyDelete
  10. Positive site, where did u come up with the information on this posting? I'm pleased I discovered it though, ill be checking back soon to find out what additional posts you include.
    box file

    ReplyDelete
  11. HI, it's everything working fine but we have getting the "read timeout error" when we are viewing file. Please give me any suggestions.

    ReplyDelete
  12. my emailid: udaykumarg553@gmail.com

    ReplyDelete
  13. We need to create a lightning app which should contain a button that uploads files from our PC to Box App directly.
    Can you please help on this?

    ReplyDelete
    Replies
    1. This is quite urgent .can anyone help on this?

      Delete
    2. You can use Content Uploader Box UI elements for this. Please refer below URL:
      https://developer.box.com/docs/box-content-uploader

      Delete
  14. Thanks for your suggestion. We started by installing box sdk package.
    Any idea on how can we get the file Id?

    ReplyDelete
  15. once you click click on Authorize Box button, system will redirect you to inside box application instead of putting user name and pwd in login page where you can see file folders . How can we achieve ?

    ReplyDelete
  16. Hi Sunil: This was very helpful. I wish I could meet you personally and take you for a lunch or something. I have one question. My requirement is to connect to Box and get the latest file in a folder. There is no UI involved. In such case how do I get the auth_code? In Line#80 of your code, you are getting the Auth_code from the VF Page ref. But from Apex how do you get this? thx.

    ReplyDelete
  17. Hi Sunil: This was very helpful. I wish I could meet you personally and take you for a lunch or something. I have one question. My requirement is to connect to Box and get the latest file from a folder in Box. There is no UI involved. In such case how do I get the auth_code? In Line#80 of your code, you are getting the Auth_code from the VF Page ref. But from Apex how do you get this? thx.

    ReplyDelete
  18. That is very interesting; you are a very skilled blogger. I have shared your website in my social networks! A very nice guide. I will definitely follow these tips. Thank you for sharing such detailed article.
    CONTRACTS

    ReplyDelete
  19. Thank you for the article. We suggest integrating Salesforce with Box.com using two approaches: via Native Box App and via Custom Implementation https://ascendix.com/blog/box-salesforce-integration/.

    ReplyDelete
  20. Thanks for the article , its working fine in classic but when I am trying the same in lightning using input type file teh file is saving in box but not opening , it is showing as corrupted . Do you have any idea how we can make it work from lightning component .

    ReplyDelete
  21. i am not able to redirect to page when i click authrioze box i am getting this err0r: No_Oauth_State: State was not valid please help me and also Authcode=ApexPages.currentPage().getparameters().get('code'); getting null

    ReplyDelete