Box Open With UI Element available now in beta, featuring G Suite and Adobe Sign
When we launched Box UI Elements last year, we wanted to not only provide a simple way to embed Box UI components in your site or service, but also to continue developing highly-requested Box features as new components.
Today, we are happy to announce the beta launch of our newest Box UI Element, ‘Open With’. ‘Open With’ helps you provide a more end-to-end content management experience in your app by allowing you to let your users open content (stored in Box) with a partner application, mimicking many of the same capabilities available when viewing files in the Box web application. Our first integration partners available with this beta are Adobe Sign and G Suite.
With the Adobe Sign integration, you can easily prepare documents from Box and send them out for signature right within your own applications.
“Businesses and their customers rely on Adobe Sign to save time and reduce unnecessary paperwork with e-signatures. We’re thrilled that Adobe and Box are extending modern, secure, and simple e-signature experiences into applications that our customers are building on Box Platform.”
- John Kremer, VP, Business Development and Product Operations, Adobe
With G Suite you’ll have the capabilities for working with their extensive set of content creation features for creating, modifying, and auto-saving documents in Google Docs, Sheets, or Slides.
“This integration builds on our work with Box to help users collaborate seamlessly. The new ‘Open With’ capability will allow our joint users to apply the features in our products they love — like real time collaboration, Answers on Sheets or suggested action items — with Box. We look forward to bringing this integration to more customers.”
— Ritcha Ranjan, Director of Product Management at Google Cloud
Signing Up for the Beta
The beta of the ‘Open With’ UI Element is available to any developer building with the Box Platform. To activate it for your instance, send us an email with your application client ID. We’ll whitelist your app so that you can start making API calls for the Element.
How it Works
The first step to setting up the ‘Open With’ element is to activate the partner applications (e.g. G Suite or Adobe Sign) for a given app user. That’s a simple process of picking the integrations you want and enabling them for your users, which is detailed here. Beyond that, the Element works much like any other, with an access token, a file/folder ID, and some simple HTML, JavaScript, and CSS.
Let’s go through two ways that you can set up the ‘Open With’ UI Element.
Standalone ‘Open With’ Button
Let’s take a look at the standalone Element first, which creates a button bound to a specific file.
<!-- Script and stylesheet includes -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script>
<script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script>
<script src="https://cdn01.boxcdn.net/platform/elements/7.1.1/en-US/openwith.js"></script><link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/7.1.1/en-US/openwith.css"><!-- Node to embed UI Element into -->
<div class="container"></div><script type="text/javascript">
// File ID to use for button, and valid user access token
var fileId = '[FILE_TO_LOAD]';
var accessToken = '[USER_ACCESS_TOKEN]';
// Create new Open With element and display
var contentOpenWith = new Box.ContentOpenWith(); contentOpenWith.show(fileId, accessToken, {
container: '.container'
})
</script>
For this integration you set up an HTML node, like a <div>, to house the Element. You then specify a file ID that the button should be bound to for loading and a valid access token for the app user, before creating and showing the button.
The Element functions something like this before being customized.
‘Open With’ Option Enabled in a ‘Content Explorer’ UI Element
The other integration type is to enable the ‘Open With’ feature in an existing ‘Content Explorer’ UI Element. That code looks something like this:
<!-- Script and stylesheet includes -->
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script>
<script src="https://cdn01.boxcdn.net/polyfills/core-js/2.5.3/core.min.js"></script>
<script src="https://cdn01.boxcdn.net/platform/elements/7.1.0/en-US/explorer.js"></script><link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/7.1.0/en-US/explorer.css"><!-- Node to embed UI Element into -->
<div class="container" style="height:600px;"></div><script type="text/javascript">
// Folder ID to use for explorer, and user access token
var folderId = '[FOLDER_TO_LOAD]';
var accessToken = '[USER_ACCESS_TOKEN]'; // Create new explorer element with Open With option enabled
var contentExplorer = new Box.ContentExplorer(); contentExplorer.show(folderId, accessToken, {
container: '.container',
contentPreviewProps: {
contentOpenWithProps: {
show: true
}
}
})
</script>
The process is much the same as the previous example, we first define our scripts / stylesheets for the Element as well as the HTML node that it’ll live in.
Next we specify the folder ID that the ‘Content Explorer’ should launch, and a valid user access token. When we create a new ‘Content Explorer’ UI Element we set up a preview property option to enable the ‘Open With’ feature.
When that explorer window opens, the ‘Open With’ integration looks something like this:
That’s the general process for enabling the new UI Element. For full documentation and setup instructions, please see the docs.
For our users, it is critical that they have the ability to quickly access and edit relevant files to quickly manage a real estate deal. With the Open With Element, the user experience is much more streamlined. What would normally take several steps (for example, downloading, editing, and re-uploading files), users now have a single, streamlined flow.
— Kenter Wu, Co-Founder and VP of Engineering, Dealpath
Links and More Samples
To get you started easily, check out the following samples and links with some other integrations:
- Documentation and Setup Guide
- ‘Open With’ Codepen example
- ‘Open With’ + ‘Content Explorer’ Codepen example
- Node Express app integration with all 5 elements
We’d Love Your Feedback
Since this is a beta launch, we want to hear from you about anything that you want to see in the future with the ‘Open With’ Element, things that you like, or components that you don’t think are working the way they should.
You can send us that feedback directly though email here.
Happy coding!
