Integrating Box metadata querying inside UI Elements with React

Jonathan LeBlanc
Aug 3 · 3 min read
Image for post
Image for post
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.

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.

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.

Image for post
Image for post
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

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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