Build a document dashboard with the Content Explorer metadata view

http://localhost:8080

mkdir invoice-explorer && cd invoice-explorer
npm init -y
npm install box

BOX_DEVELOPER_TOKEN=YOUR_DEVELOPER_TOKEN
BOX_FOLDER_ID=YOUR_FOLDER_ID

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);
});

node --env-file=.env setup.js

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

<!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>

npx serve -l 8080