1 / 25

Understanding Box UI Elements

Box training content for understanding the different Box UI Elements, how to configure them, and what methods / scopes are available to them.

jcleblanc
Download Presentation

Understanding Box UI Elements

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. User interface components built with React (JavaScript library). Authentication and token agnostic: Works with JWT / OAuth. User type agnostic: Works with app, managed, and unmanaged users. 2

  2. Works with both mobile (through React Native) and non-mobile environments. Responsive design implementation to function in any size / environment. 3

  3. Token Downscoping

  4. Server-side Super token Client-side Limited token UI Element Component

  5. Token Exchange, Box Node SDK

  6. The UI Elements

  7. base_explorer Ability to view files and folders item_preview Preview file contents (Content Preview) item_download Download files and folders item_rename Rename files and folders item_share Provide a share button option item_delete Ability to delete files and folders 9

  8. Creating a Simple Content Explorer Element <div class='container'style='height:600px'></div> <script src='https://cdn01.boxcdn.net/platform/elements/1.0.2/en-US/explorer.js'></script> <script type='text/javascript'> var folderId= '34007816377'; var accessToken= '1!Cf1gy8gP59bHZBoxwJVd3rXeKs6...'; var contentExplorer = new Box.ContentExplorer(); contentExplorer.show(folderId, accessToken, { container: '.container' }) </script>

  9. Content Explorer Methods // Display functionality contentExplorer.show(folderId, accessToken, options); contentExplorer.hide(); // Force reload contentExplorer.clearCache(); // Listeners- select, rename, preview, download, // delete, upload, navigate, create contentExplorer.addListener(eventName, listener); contentExplorer.removeListener(eventName, listener); contentExplorer.removeAllListeners();

  10. base_picker Ability to select files and folders item_share Adjust share settings for files and folders item_upload Include ability to upload new content (Content uploader) 13

  11. Creating a Simple Content Picker Element <div class='container'style='height:600px; '></div> <script src='https://cdn01.boxcdn.net/platform/elements/1.0.2/en-US/picker.js'></script> <script type='text/javascript'> var folderId= '34007816377'; var accessToken= '1!mgMlen0nWaJvCOeUTRw1w-ADO1-WvW8jsr...'; var filePicker = new Box.FilePicker(); filePicker.show(folderId, accessToken, { container: '.container' }) </script>

  12. Content Picker Methods // Display functionality filePicker.show(folderId, accessToken, options); filePicker.hide(); // Force reload filePicker.clearCache(); // Listeners- choose, cancel filePicker.addListener(eventName, listener); filePicker.removeListener(eventName, listener); filePicker.removeAllListeners();

  13. base_preview Ability to preview files item_download Button available to download the file annotation_edit Users can edit annotations annotation_view_all Allow users to view all annotations annotation_view_self Allow users to only view their own annotations 17

  14. Creating a Simple Content Preview Element <script src='https://cdn01.boxcdn.net/platform/preview/1.2.1/en-US/preview.js'></script> <div class='container'style='height:400px; width:100%;'></div> <script type='text/javascript'> var fileId = '204496637878'; var accessToken= '1!ODmIRfdbEVZBB-IG4Pv2TWMvqog7jbJvnSEdgtJ-qlw708UXK-i...'; var preview = new Box.Preview(); preview.show(fileId, accessToken, { container: '.container', showDownload: true }); </script>

  15. Content Preview Methods // Display functionality preview.show(fildId, accessToken, options); preview.hide(); // Actions preview.print(); preview.download(); preview.resize(); // Listeners- ex. destroy, load, notification, navigate, // reload, resize, zoom, printsuccess // https://developer.box.com/docs/file-types-events preview.addListener(); preview.removeListener(eventName, listener); preview.removeAllListeners();

  16. base_upload Allows users to choose content from their devices and upload to your app and Box instance. 21

  17. Creating a Simple Content Uploader Element <script src='https://cdn01.boxcdn.net/platform/elements/1.0.2/en-US/uploader.js'></script> <div class='container'style='height:600px;'></div> <script type='text/javascript'> var folderId= '34007816377'; var accessToken= '1!yE28H_Q3KN4hvT2lJB_OrDHkmFn2S7U8pfC--Nj6a...'; var uploader= new Box.ContentUploader(); uploader.show(folderId, accessToken, { container: '.container' }); </script>

  18. Content Uploader Methods // Display functionality uploader.show(folderId, accessToken, options); uploader.hide(); // Listeners- close, complete uploader.addListener(eventName, listener); uploader.removeListener(eventName, listener); uploader.removeAllListeners();

  19. Demo Github Source: http://bit.ly/bwelements

More Related