Box Developer Blog
Published in

Box Developer Blog

Using Box UI Elements and Python (Part 3)

In part 1 and part 2 of this getting started with Box UI Elements 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 Element 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, to the stored content.

An implementation example looks like this:

sidebar.py example

The file id represents the file you want to display the sidebar.

And the corresponding template:

sidebar.html sample

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:

uploader.py sample

The folder id represents which folder the uploaded files will be stored.

And the corresponding template:

uploader.html sample

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.:

uploader.py pop-up sample

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:

uploader popup in sample application

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:

picker.py sample

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:

picker.html sample

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:

picker.py extension filter sample

The result looks like this:

picker extension filter sample app

Picker pop-up

You can invoke the Picker as a pop-up using the modal properties, e.g.:

picker.py pop-up sample

Similarly to the uploader, 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:

picker pop-up in sample app

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.

Now you just need to go and build some apps using the Box UI Elements.

Let me know in the comments some cool implementation ideas.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store