Using Box UI Elements and Python (Part 3)
In part 1 and part 2 of this getting started with Box UI Elements and Python, we demonstrated how to use the Explorer and the Previewer. Today, we will look into the other UI Elements.
Let’s get started.
UI Element: Sidebar
The Sidebar UI Element allows developers to add support for viewing file related metadata (incl. Box Skills) and Activity Feed (incl. versions, comments and tasks) in their applications.
The Sidebar usually appears associated with other UI Elements such as the Explorer or Previewer; however, you can use it on its own.
Its capability is to show the user metadata about the file. This becomes particularly important if you want to trigger a task or if you are using Box Skills, i.e. applying ML and AI models, on the content.
An implementation example looks like this:
The file id represents the file you want to display the sidebar.
And the corresponding template:
UI Element: Uploader
The Uploader UI Element allows developers to embed an upload widget in their application. Users can select files or use drag and drop to upload.
It also supports uploading multiple files and will automatically upload files in chunks if they are too big.
To implement the Uploader on your app, all you need is an access token and a folder id where to drop the files. This is useful if your app expects to receive files from you users organizing them by folder.
An implementation example:
The folder id represents which folder the uploaded files will be stored.
And the corresponding template:
Close is triggered when the close button is pressed.
Complete is triggered when all the uploads are completed returning an array of file objects.
Upload is triggered when a single file is uploaded, returning the corresponding file object.
Error is triggered when a single file fails to upload, returning an error object from the upload API.
Uploader pop-up
You can invoke the Uploader as a pop-up using the modal properties, e.g.:
If you do so, a button is rendered on the container you specified and the on click will render the Uploader in new DIV’s, which are injected with the overlay and modal class names:
UI Element: Picker
The Picker UI Element allows developers to add support for selecting files and folders from Box in their application.
One of the cool things about Picker is that it allows users to pick files freely, maintaining the selected files and folders on a separate list even if the user is navigating the folder tree.
You can then pass the files and folders object list back to your application.
An implementation example:
The folder id represents the folder where the user navigation starts, the user won’t be able to navigate above this folder.
The corresponding template:
Choose is triggered when the user click the choose button and completes the selection of files. A files and folders object array is returned with the user selection.
Cancel is triggered when the user cancels the selection.
Picker Extensions filter
You can send an array of file extensions to limit what the user can select:
The result looks like this:
Picker pop-up
You can invoke the Picker as a pop-up using the modal properties, e.g.:
Similarly to the uploader, a button is rendered on the container you specified and the on click will render the Picker in new DIV’s, which are injected with the overlay and modal class names:
Security
Although in this example we are using a developer token directly, the access token is passed to the JavaScript UI Element object. Like any other JavaScript object, it can be inspected in the browser console.
In order to solve this issue Box has created a set of specific permissions or grants for the UI Elements. These are more restrictive than the app permissions.
For Sidebar you have, base_sidebar, item_comment, item_rename, item_upload, and item_task.
For Uploader you have, base_upload.
For Picker you have, base_picker, item_share, item_upload.
Check out the documentation links above for more details.
You should always down scope the access token using the above permissions.
Let me know in the comments if you’d like to explore OAuth 2.0 or JWT Authentication
You can get this sample app from this repo.
This concludes my series using the Box UI Elements and Python!
Let me know in the comments all of your cool implementation ideas.
