New Sidebar Element & the GA of Open With

Jonathan LeBlanc
Jan 18, 2019 · 2 min read

We’re happy to announce some significant updates to Box Elements. Many of you have already discovered the benefits behind Box Elements as UI tools for easily incorporating some of the most popular components of Box into your own apps and sites.

To expand on this functionality, we are releasing a brand new Sidebar element and making a previous Beta element, Open With, generally available for everyone as of today.

New Sidebar Element

Our first release, the Sidebar element, gives you the ability to integrate the file metadata sidebar from Box into your apps. Through the sidebar, you’ll be able to see version information, comments, tasks, and more.

To keep things as seamless as possible, including the sidebar is very similar to all of the other elements. After including the associated CSS and JS files, it’s as easy as creating a new sidebar object, adding in any configuration information, and showing it for an associated file.

The full HTML / CSS / JS might look something like this:

<!DOCTYPE html>
<html lang="en">
<head>
<title>Box Content Sidebar</title>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=es6,Intl"></script>
<link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/5.0.0/en-US/sidebar.css">
</head>
<body>
<div class="container" style="height:600px;"></div>
<script src="https://cdn01.boxcdn.net/platform/elements/5.0.0/en-US/sidebar.js"></script>
<script type="text/javascript">
var fileId = '24053226791';
var accessToken = '5tX3jefL21kc2Z1yPM3ESpD2RO';

var contentSidebar = new Box.ContentSidebar();
contentSidebar.show(fileId, accessToken, {
container: '.container',
detailsSidebarProps: {
hasNotices: true,
hasProperties: true,
hasAccessStats: true,
hasVersions: true
},
hasActivityFeed: true,
hasSkills: true,
hasMetadata: true
});
</script>
</body>
</html>

Read more about it in the Sidebar element docs.

General Availability of the Open With Element

Back in September we announced the beta release of the Open With element, allowing developers an early look into a highly requested UI feature — the ability to load the content of any Box file on your site through a simple button.

As of today we’ve made the element generally available for everyone, allowing you to open Box files using Adobe Sign, Google Suite, and Box Edit directly within your own apps and sites.

If you haven’t seen it already, check out the Open With element docs.

Happy coding!

Box Developer Blog

News and stories for working with the Box APIs

Jonathan LeBlanc

Written by

Emmy award winner, O'Reilly author, open source contributor, Director of Developer Advocacy at Box.

Box Developer Blog

News and stories for working with the Box APIs

More From Medium

More on Box from Box Developer Blog

More on Box from Box Developer Blog

New metadata, tasks, and mobile guides

More on Box from Box Developer Blog

More on Box from Box Developer Blog

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade