New Sidebar Element & the GA of Open With
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!
