Download - Understanding Box UI Elements
![Page 1: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/1.jpg)
![Page 2: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/2.jpg)
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
![Page 3: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/3.jpg)
3
Works with both mobile (through
React Native) and non-mobile
environments.
Responsive design implementation
to function in any size /
environment.
![Page 4: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/4.jpg)
Token Downscoping
![Page 5: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/5.jpg)
Server-side Super token
Client-side Limited token
UI Element Component
![Page 6: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/6.jpg)
Token Exchange, Box Node SDK
![Page 7: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/7.jpg)
The UI Elements
![Page 8: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/8.jpg)
![Page 9: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/9.jpg)
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
![Page 10: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/10.jpg)
<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>
Creating a Simple Content Explorer Element
![Page 11: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/11.jpg)
// 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();
Content Explorer Methods
![Page 12: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/12.jpg)
![Page 13: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/13.jpg)
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
![Page 14: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/14.jpg)
<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>
Creating a Simple Content Picker Element
![Page 15: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/15.jpg)
// 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();
Content Picker Methods
![Page 16: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/16.jpg)
![Page 17: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/17.jpg)
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
![Page 18: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/18.jpg)
<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>
Creating a Simple Content Preview Element
![Page 19: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/19.jpg)
// 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();
Content Preview Methods
![Page 20: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/20.jpg)
![Page 21: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/21.jpg)
base_upload
Allows users to choose content from their
devices and upload to your app and Box
instance.
21
![Page 22: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/22.jpg)
<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>
Creating a Simple Content Uploader Element
![Page 23: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/23.jpg)
// Display functionality
uploader.show(folderId, accessToken, options);
uploader.hide();
// Listeners - close, complete
uploader.addListener(eventName, listener);
uploader.removeListener(eventName, listener);
uploader.removeAllListeners();
Content Uploader Methods
![Page 24: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/24.jpg)
Demo
Github Source: http://bit.ly/bwelements
![Page 25: Understanding Box UI Elements](https://reader031.vdocument.in/reader031/viewer/2022013104/5a65729c7f8b9a931a8b588d/html5/thumbnails/25.jpg)