Integrating Box metadata querying inside UI Elements with React

Metadata Querying in the Content Explorer

The power behind Box isn’t simply in secure content storage, but in what you can do to enhance that content into powerful workflows and control systems. If you haven’t explored it yet, metadata queries are one of those mechanisms. The ability to store customized data about files without altering their content, through metadata, and then the ability to query that data brings in an entire range of capabilities to organize, control, and govern your content.

Back in April we announced the availability of the new metadata query APIs, and today we’re happy to show an early integration walkthrough of what’s coming next. Our most popular UI element, Content Explorer, is a fantastic way to quickly integrate a customizable visual component into your site with minimal effort. Typically the element will show all content within a specified folder, but with the addition of metadata queries we can now introduce the ability to filter all content that you show using a SQL-like syntax, meaning that the element has just become much more versatile.

Without further adieu, let’s take a look through an early prototype of the integration of this feature within React.

Installing the Sample

Download the sample application from Github here, then do the following:

• Run yarn install from a terminal or command prompt to install all dependencies. Don’t have yarn installed? You can grab it here.
• Runyarn start to test the integration. Your browser should automatically load up the integration, but produce an error. This means that the sample is functional, but we need to configure it with the proper metadata query information for our enterprise.

Configure the Sample

Once we’ve confirmed the sample works, now we need to use our own metadata syntax and templates to power it.

• From the root of the sample, load up src/App.js.
• There are 4 variables that we need to change: rootFolderID, token, mdQuery, and metadataColumsToShow.
• rootFolderID defines the folder ID under which querying should be run. Either specify a folder ID you want or just use 0 to refer to the root of an account. Please note — the folder ID must be an ID that the token would have access to, meaning that if the token is scoped for user X, then the folder needs to refer to a folder that user X has access to.
• tokenis an access or developer token to give the app permission to connect to Box APIs and the user account. If you don’t have a full Box JWT or OAuth application to get an access token, you can use a developer token. Another alternative, if you use the Box CLI, is to extract a token from the terminal / command prompt using the box tokens:get command. The CLI token extraction is one of the hidden gems that I prefer when running tests against Box APIs.
• mdQuery is the query that you’d like to use filter the results for the content explorer element. Use this guide to help build that out.
• metadataColumnsToShow is a list of the columns to show in the content explorer element. This list needs to match or be a sub-list of the fields within the metadata template that you’ve used for the query.

Once everything is place, run yarn startfrom a terminal or command prompt to run the sample again. You should see that the metadata query content search is only displaying the files and folders with metadata that matches what you’ve defined, such as the below.

Metadata Query Results in the Content Explorer Element

What’s Coming

What you’ve seen here is a prototype of the integration within React. In the coming months you’ll see a steady rollout of enhanced guides and integrations directly into the Content Explorer element.