box_content_explorer_ui_element_quickstart_with_event_listeners.ts

1import ContentExplorer from 'box-ui-elements/es/elements/content-explorer';
2
3// Note: In a real application, you would obtain this token via your backend
4const token: string = 'YOUR_DEVELOPER_TOKEN';
5const folderId: string = '0'; // '0' represents the root folder
6
7const contentExplorer = new ContentExplorer();
8
9/**
10 * Renders the Box Content Explorer into a specific DOM element.
11 * 
12 * @param folderId - The ID of the folder to display
13 * @param token - The Box Access Token or Downscoped Token
14 * @param options - Configuration options for the UI Element
15 */
16contentExplorer.show(folderId, token, {
17    container: '.container', // CSS selector for the target HTML element
18    sortBy: 'name',
19    sortDirection: 'ASC',
20    logoUrl: '', // Optional: URL for a custom logo
21    canPreview: true,
22    canDownload: true,
23    canUpload: true,
24    canCreateNewFolder: true,
25    canRename: true,
26    canShare: true,
27    canDelete: true,
28});
29
30// Example of an event listener for user interaction
31contentExplorer.on('select', (data: any) => {
32    console.log(`File or folder selected: ${data[0].name}`);
33});
34
35contentExplorer.on('error', (error: any) => {
36    console.error('An error occurred with the Box Content Explorer:', error);
37});