> ## Documentation Index
> Fetch the complete documentation index at: https://developer.box.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Build a document dashboard with the Content Explorer metadata view

> Embed the enhanced metadata view of the Box Content Explorer to browse, filter, and edit documents by their metadata, with a single setup script and one HTML page.

export const RelatedLinks = ({title, items = []}) => {
  const getBadgeClass = badge => {
    if (!badge) return "badge-default";
    const badgeType = badge.toLowerCase().replace(/\s+/g, "-");
    return `badge-${badge === "ガイド" ? "guide" : badgeType}`;
  };
  if (!items || items.length === 0) {
    return null;
  }
  return <div className="my-8">
      {}
      <h3 className="text-sm font-bold uppercase tracking-wider mb-4">{title}</h3>

      {}
      <div className="flex flex-col gap-3">
        {items.map((item, index) => <a key={index} href={item.href} className="py-2 px-3 rounded related_link hover:bg-[#f2f2f2] dark:hover:bg-[#111827] flex items-center gap-3 group no-underline hover:no-underline border-b-0">
            {}
            <span className={`px-2 py-1 rounded-full text-xs font-semibold uppercase tracking-wide flex-shrink-0 ${getBadgeClass(item.badge)}`}>
              {item.badge}
            </span>

            {}
            <span className="text-base">{item.label}</span>
          </a>)}
      </div>
    </div>;
};

export const SignupCTA = ({children}) => {
  return <div className="flex flex-wrap items-center gap-4 p-5 rounded-lg border border-gray-200 dark:border-gray-700 my-6" style={{
    background: "linear-gradient(135deg, rgba(0, 97, 213, 0.06), rgba(0, 97, 213, 0.02))"
  }}>
      <div className="flex-1 text-sm leading-relaxed text-gray-700 dark:text-gray-300" style={{
    minWidth: "280px"
  }}>
        {children}
      </div>
      <div className="flex flex-col items-center gap-2">
        <a href="https://account.box.com/signup/developer#ty9l3" className="signup-cta-button inline-flex items-center whitespace-nowrap px-5 py-2 text-sm font-semibold text-white no-underline">
          {translate("Get started for free")}
        </a>
        <a href="https://account.box.com/developers/console" className="signup-cta-login text-xs text-gray-500 dark:text-gray-400 no-underline whitespace-nowrap">
          {translate("Already have an account? Log in")}
        </a>
      </div>
    </div>;
};

export const Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

Any set of documents in Box gets harder to work through as it grows, even when the metadata is all there. A filterable, sortable, editable grid over that metadata normally means weeks of front-end work. The <Link href="/guides/embed/ui-elements/explorer-metadata-v2">enhanced metadata view (v2)</Link> of the Box Content Explorer provides that grid as a single embeddable component: filters for every field, sorting, list and grid layouts, and metadata editing in a side panel. This tutorial uses invoices as the example, though the same page fits contracts, claims, or anything else with a metadata template.

Box AI fills the grid for you: a setup script reads the fields straight out of the documents and stores them as metadata, so the table shows real data rather than values you typed in. In about 15 minutes, you have a working invoice dashboard, with no backend and no build tooling.

<SignupCTA>
  A free developer account gives you access to the Developer Console, admin rights in your own Box environment, and a developer token — everything you need to create the metadata template and embed the Content Explorer in this tutorial.
</SignupCTA>

<Card title="Clone the working sample" href="https://github.com/box-community/box-document-metadata-dashboard" icon="github" arrow="true">
  Prefer to start from running code? The setup script and webpage built in this tutorial are on GitHub. Clone the repo, add your Box credentials, and run.
</Card>

## What you are building

By the end of this tutorial, you have:

* A minimal `Invoice` metadata template created entirely from code.
* The invoice files in your folder tagged with vendor, invoice number, amount, and status — values that Box AI reads from the documents themselves.
* A single HTML page that embeds the Content Explorer metadata view (v2) so you can filter, sort, and edit those invoices in the browser.

<Frame>
  <img src="https://mintcdn.com/box/Ix7MVW0KhmFJM65t/images/tutorials/explorer-metadata-view/content-explorer-metadata-view.png?fit=max&auto=format&n=Ix7MVW0KhmFJM65t&q=85&s=64a563f3149908a289203f541ccc3a7d" alt="Content Explorer metadata view listing five invoices, with filter chips for each field and columns for vendor, invoice number, amount, and status. The selected row opens a metadata panel for inline editing." width="2312" height="980" data-path="images/tutorials/explorer-metadata-view/content-explorer-metadata-view.png" />
</Frame>

## Prerequisites

Before you start, you need:

* A **free** <Link href="https://account.box.com/signup/developer#ty9l3">Box developer account</Link>. It gives you admin rights in your own Box environment, which lets you create metadata templates, and it includes free AI units this tutorial uses.
* A Box Platform app that uses **User Authentication (OAuth 2.0)** in the <Link href="https://account.box.com/developers/console">Developer Console</Link>. See <Link href="/guides/getting-started/first-application">Create your first application</Link>.
* A Box folder that contains a few invoice files in a format Box AI can read, such as PDF, DOCX, or a scanned image. See <Link href="/guides/box-ai/ai-tutorials/extract-metadata-structured#supported-file-formats">supported file formats</Link>. Note the folder ID from the URL. For example, for `https://app.box.com/folder/123456789`, the ID is `123456789`.
* Node.js 22 or later.

<Tip>
  No invoices to test with? Download these <Link href="/static/tutorials/explorer-metadata-view/box-sample-invoices.zip">sample invoices</Link> (`INV-1001.pdf` through `INV-1005.pdf`) and unzip them. The samples are billed in different currencies, so the **Amount** column mixes them. Add a currency field to the template if you want to compare amounts directly.
</Tip>

Get those files into your folder in either of these ways:

* **In the Box web app**, open the folder and select **Upload** > **Files**, or drag the files onto the folder.
* **From the API**, upload each file to the folder ID you noted. See <Link href="/guides/uploads/direct/file">Upload a new file</Link>.

The setup script calls <Link href="/guides/box-ai/ai-tutorials/extract-metadata-structured">Box AI structured extraction</Link> once per document, which consumes AI units. Your developer account includes 1,000 AI units per month, so the five sample invoices use only a small part of your monthly allowance.

This tutorial uses a short-lived <Link href="/guides/authentication/tokens/developer-tokens">developer token</Link> for everything: the setup script and the webpage both authenticate with it. You generate that token yourself in the Developer Console, so you don't have to implement the OAuth 2.0 redirect flow to try this out.

Developer tokens suit prototypes only. For production, pick an authentication method that fits your app and downscope the token before it reaches the browser. See <Link href="/guides/authentication/select">Select Auth Method</Link> and [Scaling to production](#scaling-to-production).

<Warning>
  Developer tokens expire after **60 minutes**. If a call starts failing with `401 Unauthorized`, generate a fresh token in the Developer Console, and then update it in `.env` and in `index.html`.
</Warning>

## Step-by-step process

This tutorial uses four Box Platform capabilities:

| Component                               | Purpose                                                   | API                                             |
| --------------------------------------- | --------------------------------------------------------- | ----------------------------------------------- |
| **Metadata templates**                  | Define the invoice fields the view displays               | `POST /2.0/metadata_templates/schema`           |
| **Box AI Extract**                      | Read those fields out of each invoice document            | `POST /2.0/ai/extract_structured`               |
| **File metadata**                       | Tag each invoice in your folder with the extracted values | `POST /2.0/files/:id/metadata/:scope/:template` |
| **Content Explorer (metadata view v2)** | Render the metadata table in the browser                  | Box UI Elements (CDN)                           |

<Steps>
  <Step title="Allowlist localhost and get a developer token">
    1. Open your app in the <Link href="https://account.box.com/developers/console">Developer Console</Link>.
    2. Go to **Configuration** > **CORS Domains** and add the origin you serve the page from:

    ```text theme={null}
    http://localhost:8080
    ```

    <Warning>
      The metadata view calls `api.box.com` **directly from the browser**. Box rejects those calls with `403 Forbidden` unless the exact serving origin (scheme, host, and port) is on the CORS allowlist. `http://localhost:8080` and `http://127.0.0.1:8080` are different origins; add whichever you open.
    </Warning>

    3. In **Configuration** > **Application Scopes**, enable the following scopes:
       * Read and write all files and folders stored in Box
       * Manage AI

    4. Select **Save Changes**.

    5. In **Configuration** > **App Details** > **Access**, locate the **Developer Token** field, select **Generate Developer Token**, and copy the value. You need it in the next steps.

    <Note>
      Generate the token last. If you change and save your app configuration afterwards, generate a fresh token before you carry on.
    </Note>
  </Step>

  <Step title="Set up the project and run the setup script">
    1. Create a project directory and install the SDK:

    ```bash theme={null}
    mkdir invoice-explorer && cd invoice-explorer
    npm init -y
    npm install box
    ```

    <Info>
      The <Link href="/guides/tooling/box-npm-package">box</Link> package installs the Box Node SDK and the Box CLI as direct dependencies. Existing projects can keep using `npm install box-node-sdk`.
    </Info>

    2. In the project directory, create a file called `.env` that holds your credentials, so they stay out of your code:

    ```text theme={null}
    BOX_DEVELOPER_TOKEN=YOUR_DEVELOPER_TOKEN
    BOX_FOLDER_ID=YOUR_FOLDER_ID
    ```

    <Warning>
      `.env` holds a live credential. Add it to `.gitignore` before you commit anything.
    </Warning>

    3. In the same directory, create a file called `setup.js` and paste the following code. The script creates the <Link href="/guides/metadata/templates/create">metadata template</Link>, asks Box AI to read those fields out of each document in your folder, writes the results back as metadata, and prints the configuration values the webpage needs.

    ```javascript theme={null}
    const { BoxClient, BoxDeveloperTokenAuth } = require("box/sdk");

    const ACCESS_TOKEN = process.env.BOX_DEVELOPER_TOKEN;
    const FOLDER_ID = process.env.BOX_FOLDER_ID;
    const TEMPLATE_KEY = "invoice";

    async function main() {
      if (!ACCESS_TOKEN || !FOLDER_ID) {
        throw new Error("Set BOX_DEVELOPER_TOKEN and BOX_FOLDER_ID in .env.");
      }

      const client = new BoxClient({
        auth: new BoxDeveloperTokenAuth({ token: ACCESS_TOKEN }),
      });

      // 1. Create the Invoice metadata template, or reuse it if it already exists.
      let template;
      try {
        template = await client.metadataTemplates.createMetadataTemplate({
          scope: "enterprise",
          displayName: "Invoice",
          templateKey: TEMPLATE_KEY,
          fields: [
            { type: "string", key: "vendor", displayName: "Vendor" },
            { type: "string", key: "invoiceNumber", displayName: "Invoice Number" },
            { type: "float", key: "amount", displayName: "Amount" },
            {
              type: "enum",
              key: "status",
              displayName: "Status",
              options: [{ key: "Paid" }, { key: "Pending" }, { key: "Overdue" }],
            },
          ],
        });
        console.log(`Created template '${template.templateKey}'`);
      } catch {
        template = await client.metadataTemplates.getMetadataTemplate(
          "enterprise",
          TEMPLATE_KEY
        );
        console.log(`Template '${template.templateKey}' already exists, reusing it.`);
      }

      const scope = template.scope; // for example, "enterprise_123456"

      // 2. Read the files already in your folder. This returns the first page
      // only, which is 100 items unless you pass a larger limit.
      const items = await client.folders.getFolderItems(FOLDER_ID);
      const files = items.entries.filter((entry) => entry.type === "file");
      if (files.length === 0) {
        throw new Error(
          `Folder ${FOLDER_ID} has no files. Add a few invoices and run again.`
        );
      }

      // 3. Extract the template fields from each document with Box AI, then
      // write them back as metadata. Box AI takes one file per request.
      for (const file of files) {
        let extracted;
        try {
          const response = await client.ai.createAiExtractStructured({
            items: [{ id: file.id, type: "file" }],
            metadataTemplate: {
              templateKey: TEMPLATE_KEY,
              type: "metadata_template",
              scope: scope,
            },
          });
          extracted = response.answer;
        } catch (error) {
          console.log(`  Skipped ${file.name}: extraction failed (${error.message})`);
          continue;
        }

        // Keep only the fields Box AI actually read, so the metadata request
        // doesn't carry empty values.
        const metadata = Object.fromEntries(
          Object.entries(extracted).filter(
            ([, value]) => value !== null && value !== ""
          )
        );

        if (Object.keys(metadata).length === 0) {
          console.log(`  Skipped ${file.name}: no fields found.`);
          continue;
        }

        try {
          await client.fileMetadata.createFileMetadataById(
            file.id,
            "enterprise",
            TEMPLATE_KEY,
            metadata
          );
          console.log(`  Tagged ${file.name}: ${JSON.stringify(metadata)}`);
        } catch (error) {
          console.log(`  Skipped ${file.name}: ${error.message}`);
        }
      }

      // 4. Print the values to paste into index.html.
      console.log("\n--- Paste these into index.html ---");
      console.log(`FOLDER_ID     = ${FOLDER_ID}`);
      console.log(`METADATA_FROM = ${scope}.${TEMPLATE_KEY}`);
    }

    main().catch((error) => {
      console.error(error.message);
      process.exit(1);
    });
    ```

    4. Run the script. Node reads your credentials straight out of `.env`:

    ```bash theme={null}
    node --env-file=.env setup.js
    ```

    Extraction takes a few seconds per document. The output shows the values Box AI read from each file, followed by the two values you need next:

    ```text theme={null}
    Created template 'invoice'
      Tagged INV-1001.pdf: {"vendor":"Acme Solutions Inc.","invoiceNumber":"INV-1001","amount":1250,"status":"Paid"}
      Tagged INV-1002.pdf: {"vendor":"Acme Solutions Inc.","invoiceNumber":"INV-1002","amount":3480.5,"status":"Pending"}
      Tagged INV-1003.pdf: {"vendor":"Acme Solutions Inc.","invoiceNumber":"INV-1003","amount":980,"status":"Overdue"}
      Tagged INV-1004.pdf: {"vendor":"Acme Solutions Inc.","invoiceNumber":"INV-1004","amount":7200,"status":"Paid"}
      Tagged INV-1005.pdf: {"vendor":"Acme Solutions Inc.","invoiceNumber":"INV-1005","amount":450.75,"status":"Pending"}

    --- Paste these into index.html ---
    FOLDER_ID     = 987654321
    METADATA_FROM = enterprise_123456.invoice
    ```

    <Note>
      Passing `metadataTemplate` instead of `fields` means the template you just created also serves as the extraction schema, so Box AI returns values that already match the field keys and types the metadata view expects. Box AI leaves off anything it can't find, and you can fill those fields in manually in the metadata view after it loads.
    </Note>

    <Note>
      You create templates in the `enterprise` scope, and the API returns that scope as `enterprise_123456`, where the number is your enterprise ID. Other scopes exist, such as the read-only `global` scope that holds `global.properties`, so don't hard-code the `enterprise_` prefix. The metadata view needs the full `scope.templateKey` string, which the script prints for you. See <Link href="/guides/metadata/scopes">Metadata scopes</Link>.
    </Note>
  </Step>

  <Step title="Create the webpage">
    Create a file called `index.html` in the same directory. Replace the three placeholder values at the top of the script (`ACCESS_TOKEN`, `FOLDER_ID`, and `METADATA_FROM`) with your developer token and the values the setup script printed.

    <Note>
      This page reads its token from the file rather than from `.env`, because a static page has no server to read `.env` for it. Every UI Element needs a token in the browser, so production apps mint a downscoped one server-side instead of shipping the file. See [Scaling to production](#scaling-to-production).
    </Note>

    ```html theme={null}
    <!DOCTYPE html>
    <html lang="en-US">
      <head>
        <meta charset="utf-8" />
        <title>Invoice explorer</title>
        <!-- Box UI Elements v24.0.0 or higher is required for the metadata view v2 -->
        <link
          rel="stylesheet"
          href="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.css"
        />
        <style>
          html, body { margin: 0; height: 100%; }
          body {
            padding: clamp(12px, 2.5vh, 40px) clamp(12px, 2vw, 32px);
            box-sizing: border-box;
          }
          .container {
            height: 100%;
            max-width: 1440px;
            margin: 0 auto;
          }
        </style>
      </head>
      <body>
        <div class="container"></div>

        <script src="https://cdn01.boxcdn.net/platform/elements/26.3.0/en-US/explorer.js"></script>
        <script>
          // Prototype only. In production, serve a downscoped token from your
          // backend and keep your app credentials server-side.
          const ACCESS_TOKEN = "YOUR_DEVELOPER_TOKEN";
          const FOLDER_ID = "YOUR_FOLDER_ID";
          const METADATA_FROM = "enterprise_123456.invoice"; // scope.templateKey

          // Fully qualified metadata field IDs: metadata.<scope>.<templateKey>.<field>
          const field = (key) => `metadata.${METADATA_FROM}.${key}`;

          const columns = [
            { textValue: "Vendor", id: field("vendor"), type: "string", allowsSorting: true },
            { textValue: "Invoice Number", id: field("invoiceNumber"), type: "string", allowsSorting: true },
            { textValue: "Amount", id: field("amount"), type: "number", allowsSorting: true },
            { textValue: "Status", id: field("status"), type: "singleSelect", allowsSorting: true },
          ];

          const contentExplorer = new Box.ContentExplorer();
          contentExplorer.show(FOLDER_ID, ACCESS_TOKEN, {
            container: ".container",
            defaultView: "metadata",
            metadataQuery: {
              from: METADATA_FROM,
              ancestor_folder_id: FOLDER_ID,
              fields: columns.map((c) => c.id),
            },
            features: {
              contentExplorer: {
                metadataViewV2: true, // required to enable the enhanced view
              },
            },
            metadataViewProps: {
              columns,
              isSelectionEnabled: true, // enables row selection, which activates the Metadata button
            },
          });
        </script>
      </body>
    </html>
    ```

    <Note>
      The column `type` values use the metadata view's own vocabulary, which differs slightly from the template field types: a template `float` field maps to a `number` column, and an `enum` field maps to a `singleSelect` column. The supported column types are `string`, `number`, `date`, `singleSelect`, and `multiSelect`.
    </Note>
  </Step>

  <Step title="Serve the page and explore">
    Serve the static HTML over HTTP so the origin matches your CORS allowlist. Don't open the HTML file directly in the browser (for example, with a `file://` URL). From the project directory, start a static server on port 8080:

    ```bash theme={null}
    npx serve -l 8080
    ```

    <Note>
      `npx` downloads `serve` the first time you run it and asks you to confirm. Any static server works, as long as it serves the page on the port you allowlisted. If port 8080 is already in use, `serve` starts on a different port and prints that address instead, so check its output before you go to the page: a different port is a different origin, and Box rejects the API calls.
    </Note>

    Go to <Link href="http://localhost:8080">[http://localhost:8080](http://localhost:8080)</Link>. The page shows your invoices in a metadata table. From here you can:

    * **Filter** by vendor, amount, or status by using the filter chips in the action bar.
    * **Sort** any column by selecting its header.
    * **Toggle** between list and grid layouts.
    * **Select** a row, and then select **Metadata** in the header and **Edit** in the panel that opens. You edit values in that panel, not in the grid cells.

    <Tip>
      The view writes your changes straight back to Box metadata. Refresh the page (or query the folder from the API) to confirm that the edits persisted.
    </Tip>
  </Step>
</Steps>

## Troubleshooting

<AccordionGroup>
  <Accordion title="403 Forbidden in the browser console (calls to api.box.com)">
    The serving origin isn't on the CORS allowlist. Add the **exact** origin you opened (for example, `http://localhost:8080`) under **CORS Domains** in the Developer Console, select **Save Changes**, wait a minute, and then reload. Remember that `localhost` and `127.0.0.1` are different origins, and that a static server falls back to another port when the one you asked for is taken, so confirm the address your server printed.
  </Accordion>

  <Accordion title="401 Unauthorized">
    Your developer token expired (developer tokens last 60 minutes) or you pasted it incorrectly. Generate a fresh token in the Developer Console, and then update `BOX_DEVELOPER_TOKEN` in `.env` and `ACCESS_TOKEN` in `index.html`.
  </Accordion>

  <Accordion title="Box AI returned no fields, or the wrong ones">
    Box AI reads text from a broad range of documents, images, and spreadsheets, and applies OCR to image files and scanned documents, but a file in an unsupported format returns nothing. Check your files against the <Link href="/guides/box-ai/ai-tutorials/extract-metadata-structured#supported-file-formats">supported file formats</Link>. If the file is readable but the values are off, the layout may be ambiguous. Add a `description` to each template field, or switch from `metadataTemplate` to an explicit `fields` array, where each field also takes a `prompt` that describes how to find and format the value. See <Link href="/guides/box-ai/ai-tutorials/extract-metadata-structured">Extract structured metadata</Link>.
  </Accordion>

  <Accordion title="The script skips every file with a 409 conflict">
    The files already carry the `Invoice` template, which is what happens when you run `setup.js` a second time. Writing metadata fails when an instance already exists, so the script reports `409 tuple_already_exists` and keeps the values already on the file. Those values still appear in the metadata view, so you can safely ignore a repeat run. To extract everything again, remove the existing metadata first, either from the metadata panel in the Box web app or with <Link href="/reference/delete-files-id-metadata-id-id">Remove metadata instance from file</Link>, and then run `setup.js` again.
  </Accordion>

  <Accordion title="The table is empty">
    Confirm that `METADATA_FROM` matches the `scope.templateKey` the setup script printed, and that `FOLDER_ID` is the folder that contains your invoices. The `metadataQuery.from` and `ancestor_folder_id` values must point to the folder that holds the tagged files.
  </Accordion>

  <Accordion title="Nothing renders, or the console shows Box is not defined">
    The CDN scripts didn't load, or the version is too old. The metadata view v2 requires Box UI Elements **v24.0.0 or higher**. Check the `explorer.js` and `explorer.css` URLs and your network tab.
  </Accordion>

  <Accordion title="You don't have permission to create metadata templates">
    A developer token belongs to the account you were signed in with when you generated it in the Developer Console. If you were signed in as a different Box user, the token doesn't carry the admin rights that template creation needs. Sign in with your developer account, generate a fresh token, and then run the script again.
  </Accordion>
</AccordionGroup>

## Scaling to production

<AccordionGroup>
  <Accordion title="Replace the developer token with a real authentication flow">
    Developer tokens are for prototyping only. In production, mint a short-lived, **downscoped** token server-side and pass it to the browser; never ship a full-privilege token to the client. See <Link href="/guides/authentication/tokens/downscope">Downscope a token</Link> and <Link href="/guides/embed/ui-elements/scopes">UI Elements scopes</Link>.
  </Accordion>

  <Accordion title="Tag documents as they arrive">
    This script extracts metadata for a folder on demand. In production, trigger the same extraction from a `FILE.UPLOADED` webhook so every new document is tagged when it arrives, and the metadata view stays current without anyone running a script. See <Link href="/tutorials/invoice-intake">Automate invoice intake</Link>.
  </Accordion>

  <Accordion title="Improve extraction accuracy">
    For dense or inconsistent documents, replace `metadataTemplate` with an explicit `fields` array so you can attach a `description` and `prompt` to each field, request confidence scores with `includeConfidenceScore`, and route low-confidence results to a human. The Enhanced Extract Agent handles longer and more complex documents. See <Link href="/guides/box-ai/ai-tutorials/extract-metadata-structured">Extract structured metadata</Link>.
  </Accordion>

  <Accordion title="Filter the query server-side">
    For large folders, narrow the result set with the `query` and `query_params` fields of `metadataQuery` (for example, only `Overdue` invoices). See the <Link href="/reference/post-metadata-queries-execute-read/">Metadata Query API</Link>.
  </Accordion>

  <Accordion title="Use React instead of the CDN">
    For a componentized app, import `ContentExplorer` from the `box-ui-elements` package and pass the same `metadataQuery` and `metadataViewProps`. You get an embeddable dashboard component you can drop into an existing app. See the React setup in the <Link href="/guides/embed/ui-elements/explorer-metadata-v2">metadata view v2 guide</Link>.
  </Accordion>
</AccordionGroup>

## Next steps

<CardGroup cols={2}>
  <Card title="Invoice intake automation" href={localizeLink("/tutorials/invoice-intake")} icon="file-invoice" arrow="true">
    Run the same extraction from a webhook so documents are tagged as they arrive, instead of on demand.
  </Card>

  <Card title="Metadata view v2 guide" href={localizeLink("/guides/embed/ui-elements/explorer-metadata-v2")} icon="table" arrow="true">
    See every configuration option for the enhanced Content Explorer metadata view.
  </Card>
</CardGroup>

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Content Explorer metadata view v2"), href: "/guides/embed/ui-elements/explorer-metadata-v2", badge: "GUIDE" },
{ label: translate("Content Explorer"), href: "/guides/embed/ui-elements/explorer", badge: "GUIDE" },
{ label: translate("Create a metadata template"), href: "/guides/metadata/templates/create", badge: "GUIDE" },
{ label: translate("Working with metadata queries"), href: "/guides/metadata/queries", badge: "GUIDE" },
{ label: translate("UI Elements installation"), href: "/guides/embed/ui-elements/installation", badge: "GUIDE" }
]}
/>