Integrating Box metadata querying inside UI Elements with React

Jonathan LeBlanc
Aug 3, 2020 · 3 min read
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:

Configure the Sample

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

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.

Box Developer Blog

News and stories for working with the Box APIs