Integrating Box metadata querying inside UI Elements with React
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. - Run
yarn 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
, andmetadataColumsToShow
. rootFolderID
defines the folder ID under which querying should be run. Either specify a folder ID you want or just use0
to refer to the root of an account. Please note — the folder ID must be an ID that thetoken
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.token
is 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 thebox 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 start
from 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.
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.