<!DOCTYPE html><html lang="en-US"> <head> <meta charset="utf-8" /> <title>Box Content Sidebar</title> <!-- Latest version of the sidebar css for your locale --> <link rel="stylesheet" href="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/sidebar.css" /> </head> <body> <div class="container" style="height:600px"></div> <!-- Latest version of the sidebar js for your locale --> <script src="https://cdn01.boxcdn.net/platform/elements/{VERSION}/en-US/sidebar.js"></script> <script> var fileId = "123"; var accessToken = "abc"; // At least one of the sub-sidebars (details, activity feed, skills, metadata) need to be turned on for something to render. Details is iteself further divided into notices, properties, access stats and versions, one of which need to be enabled for the details sidebar to render. var sidebar = new Box.ContentSidebar(); sidebar.show(fileId, accessToken, { container: ".container", detailsSidebarProps: { hasNotices: true, hasProperties: true, hasAccessStats: true, hasVersions: true }, hasActivityFeed: true, hasSkills: true, hasMetadata: true }); </script> </body></html>
const { ContentSidebar } = Box;const sidebar = new ContentSidebar();/** * Shows the file selection. * * @public * @param {String} fileId - The file id. * @param {String} token - The API access token. * @param {Object|void} [options] - Optional options. * @return {void} */sidebar.show(fileId, token, options);/** * Hides the sidebar, removes all event listeners, and clears out the HTML. * * @public * @return {void} */sidebar.hide();/** * Clears out the internal in-memory cache for the sidebar. This forces * items to be reloaded from the API. * * @public * @return {void} */sidebar.clearCache();/** * Adds an event listener to the sidebar. Listeners should be added before * calling show() so no events are missed. * * @public * @param {String} eventName - Name of the event. * @param {Function} listener - Callback function. * @return {void} */sidebar.addListener(eventName, listener);/** * Removes an event listener from the sidebar. * * @public * @param {String} eventName - Name of the event. * @param {Function} listener - Callback function. * @return {void} */sidebar.removeListener(eventName, listener);/** * Removes all event listeners from the sidebar. * * @public * @return {void} */sidebar.removeAllListeners();
