> ## 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.

# Create a custom metadata template

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

export const MultiRelatedLinks = ({sections = []}) => {
  if (!sections || sections.length === 0) {
    return null;
  }
  return <div className="space-y-8">
      {sections.map((section, index) => <RelatedLinks key={index} title={section.title} items={section.items} />)}
    </div>;
};

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 ProgressBar = ({pages = [], ...props}) => {
  const [currentStep, setCurrentStep] = useState(0);
  const [isDarkMode, setIsDarkMode] = useState(false);
  useEffect(() => {
    const checkDarkMode = () => {
      const isDark = document.documentElement.classList.contains('dark');
      console.log('ProgressBar - isDarkMode:', isDark);
      setIsDarkMode(isDark);
    };
    checkDarkMode();
    const observer = new MutationObserver(() => {
      checkDarkMode();
    });
    observer.observe(document.documentElement, {
      attributes: true,
      attributeFilter: ['class']
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  useEffect(() => {
    if (pages.length > 0) {
      const currentPath = window.location.pathname;
      const stepIndex = pages.findIndex(page => {
        const pagePath = page.startsWith('/') ? page : `/${page}`;
        return currentPath.endsWith(pagePath) || currentPath.includes(pagePath);
      });
      if (stepIndex !== -1) {
        setCurrentStep(stepIndex + 1);
      }
    }
  }, [pages]);
  if (!pages || pages.length === 0) {
    return null;
  }
  const step = currentStep;
  const total = pages.length;
  console.log('ProgressBar - Rendering with isDarkMode:', isDarkMode);
  const progressBarContainerStyle = {
    width: '100%',
    marginBottom: '32px',
    display: 'flex',
    alignItems: 'center',
    gap: '16px'
  };
  const stepsContainerStyle = {
    display: 'flex',
    alignItems: 'center',
    gap: '8px',
    flexShrink: 0
  };
  const progressBarTrackStyle = {
    flex: 1,
    height: '22px',
    backgroundColor: 'rgba(169, 210, 244, 0.06)',
    border: isDarkMode ? '1px solid rgba(230, 241, 247, 0.67)' : '1px solid #e3ecf3',
    borderRadius: '4px',
    overflow: 'hidden',
    position: 'relative'
  };
  const progressBarFillStyle = {
    height: '100%',
    backgroundColor: 'rgba(113, 192, 248, 0.23)',
    width: `${step / total * 100}%`,
    transition: 'width 0.3s ease'
  };
  const getStepStyle = (stepNumber, isActive) => {
    if (isDarkMode) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: isActive ? 'rgba(113, 192, 248, 0.23)' : 'transparent',
        color: isActive ? '#60a5fa' : '#a0aec0',
        border: isActive ? '1px solid #e3ecf3' : '1px solid #e0e6eb',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    if (isActive) {
      return {
        width: '22px',
        height: '22px',
        borderRadius: '4px',
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'center',
        fontSize: '12px',
        fontWeight: '600',
        position: 'relative',
        zIndex: 1,
        transition: 'all 0.3s ease',
        backgroundColor: 'rgba(169, 210, 244, 0.32)',
        color: '#374151',
        border: '1px solid #e1eef8',
        cursor: 'pointer',
        textDecoration: 'none'
      };
    }
    return {
      width: '22px',
      height: '22px',
      borderRadius: '4px',
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: '12px',
      fontWeight: '600',
      position: 'relative',
      zIndex: 1,
      transition: 'all 0.3s ease',
      backgroundColor: '#fbfbfb',
      color: '#9ca3af',
      border: '1px solid #e3ecf3',
      cursor: 'pointer',
      textDecoration: 'none'
    };
  };
  return <div style={progressBarContainerStyle} {...props}>
      <div style={stepsContainerStyle}>
        {Array.from({
    length: total
  }, (_, index) => {
    const stepNumber = index + 1;
    const pageIndex = index;
    const pagePath = pages[pageIndex];
    const fullPath = pagePath.startsWith('/') ? pagePath : `/${pagePath}`;
    const isActive = stepNumber === step;
    return <a key={stepNumber} href={fullPath} style={getStepStyle(stepNumber, isActive)}>
              {stepNumber}
            </a>;
  })}
      </div>
      <div style={progressBarTrackStyle}>
        <div style={progressBarFillStyle}></div>
      </div>
    </div>;
};

<ProgressBar
  pages={[
                      "guides/metadata/quick-start/list-all",
                      "guides/metadata/quick-start/create-template",
                      "guides/metadata/quick-start/create-instance",
                      "guides/metadata/quick-start/update-instance",
                      "guides/metadata/quick-start/update-template",
                      "guides/metadata/quick-start/create-query",
                      "guides/metadata/quick-start/next-steps"
                    ]}
/>

To create a custom metadata template for your enterprise you can use
<Link href="/reference/post-metadata-templates-schema">our API directly</Link> or
one of our SDKs to create a new template.

For this `customerInfo` template, we're going to create a template with 3
fields. The first field is a text field to hold the customer's `name`, the
second is a dropdown list of the possible values for the `industry` the customer
operates in, and the final field represents the total annual contract value (`tav`).

<Card href={localizeLink("/guides/metadata/fields")} arrow title="Learn about the different field types" />

To create this template we need to pass in the configuration for the fields, as
well as a display name for the field.

<CodeGroup>
  ```sh cURL theme={null}
  curl -X POST https://api.box.com/2.0/metadata_templates/schema \
      -H "authorization: Bearer <ACCESS_TOKEN>" \
      -H "content-type: application/json" \
      -d '{
        "scope": "enterprise",
        "displayName": "Customer Info",
        "fields": [
          {
            "type": "string",
            "displayName": "Name"
          },
          {
            "type": "enum",
            "displayName": "Industry",
            "options": [
              {"key": "Technology"},
              {"key": "Healthcare"},
              {"key": "Legal"}
            ]
          },
          {
            "type": "float",
            "displayName": "Total account value",
            "key": "tav"
          }
        ]
      }'
  ```

  ```csharp .NET theme={null}
  var templateParams = new BoxMetadataTemplate()
  {
    DisplayName = "Customer Info",
    Scope = "enterprise",
    Fields = new List<BoxMetadataTemplateField>()
    {
      new BoxMetadataTemplateField()
      {
        Type = "string",
        DisplayName = "Name"
      },
      new BoxMetadataTemplateField()
      {
        Type = "enum",
        DisplayName = "Industry",
        Options = new List<BoxMetadataTemplateFieldOption>()
        {
          new BoxMetadataTemplateFieldOption() { Key = "Technology" },
          new BoxMetadataTemplateFieldOption() { Key = "Healthcare" },
          new BoxMetadataTemplateFieldOption() { Key = "Legal" }
        }
      },
      new BoxMetadataTemplateField()
      {
        Type = "float",
        DisplayName = "Total account value",
        Key="tav"
      },
    }
  };
  BoxMetadataTemplate template = await  client.MetadataManager.CreateMetadataTemplate(templateParams);
  ```

  ```java Java theme={null}
  MetadataTemplate.Field name = new MetadataTemplate.Field();
  name.setType("string");
  name.setDisplayName("Name");

  MetadataTemplate.Field industry = new MetadataTemplate.Field();
  industry.setType("enum");
  industry.setDisplayName("Industry");

  MetadataTemplate.Option technology = new MetadataTemplate.Option();
  technology.setKey("Technology");

  MetadataTemplate.Option healthcare = new MetadataTemplate.Option();
  healthcare.setKey("Healthcare");

  MetadataTemplate.Option legal = new MetadataTemplate.Option();
  legal.setKey("Legal");

  List<MetadataTemplate.Option> options = new ArrayList<MetadataTemplate.Option>();
  options.add(technology);
  options.add(healthcare);
  options.add(legal);

  MetadataTemplate.Field tav = new MetadataTemplate.Field();
  tav.setType("float");
  tav.setDisplayName("Total account value");
  tav.setKey("tav");

  List<MetadataTemplate.Field> fields = new ArrayList<MetadataTemplate.Field>();
  fields.add(name);
  fields.add(industry);
  fields.add(tav);

  MetadataTemplate template = MetadataTemplate.createMetadataTemplate(api, "enterprise", "customerInfo", "Customer Info", false, fields);
  ```

  ```python Python theme={null}
  from boxsdk.object.metadata_template import MetadataField, MetadataFieldType

  fields = [
      MetadataField(MetadataFieldType.STRING, 'Name')
      MetadataField(MetadataFieldType.ENUM, 'Industry', options=['Technology', 'Healthcare', 'Legal'])
  ]
  template = client.create_metadata_template('Customer Info', fields)
  ```

  ```js Node theme={null}
  client.metadata.createTemplate(
      'Customer Info',
      [
          {
              type: 'string',
              displayName: 'Name'
          },
          {
              type: 'enum',
              displayName: 'Industry',
              options: [
                  {key: 'Technology'},
                  {key: 'Healthcare'},
                  {key: 'Legal'}
              ]
          },
          {
              type: 'float',
              displayName: 'Total account value',
              key: 'tav'
          }
      ]
  ).then(template => {
      // ...
  });
  ```
</CodeGroup>

<Warning>
  **Admin permissions required**

  Creating metadata templates is restricted to users with admin permission. This
  means that only admins, or co-admins who have been granted rights to **Create
  and edit metadata templates for your company** by the admin can use the web
  app or the API to manage templates.
</Warning>

The API will return the newly created metadata template.

```json theme={null}
{
  "id": "100ac693-a468-4b37-9535-05984b804dc2",
  "type": "metadata_template",
  "templateKey": "customerInfo",
  "scope": "enterprise_34567",
  "displayName": "Customer Info",
  "hidden": false,
  "copyInstanceOnItemCopy": false,
  "fields": [
    {
      "id": "5c6a5906-003b-4654-9deb-472583fc2930",
      "type": "string",
      "key": "name",
      "displayName": "Name",
      "hidden": false
    },
    {
      "id": "cf3eb5b8-52ef-456c-b175-44354a27e289",
      "type": "enum",
      "key": "industry",
      "displayName": "Industry",
      "options": [
        {"key": "Technology"},
        {"key": "Healthcare"},
        {"key": "Legal"}
      ],
      "hidden": false
    },
    {
      "id": "5c6a5906-4654-9deb-003b-472583fc2930",
      "type": "float",
      "key": "tav",
      "displayName": "Total account value",
      "hidden": false
    }
  ]
}
```

<Note>
  **Template key**

  Although you did not explicitly set the template key the key is automatically
  derived from the `displayName` value. In this case, the `templateKey` would be
  `customerInfo`.
</Note>

<Next>I've created a custom template</Next>

<RelatedLinks
  title="RELATED APIS"
  items={[
{ label: translate("Create metadata template"), href: "/reference/post-metadata-templates-schema", badge: "POST" }
]}
/>

<RelatedLinks
  title="RELATED GUIDES"
  items={[
{ label: translate("Metadata template scopes"), href: "/guides/metadata/scopes", badge: "GUIDE" },
{ label: translate("Create a metadata template"), href: "/guides/metadata/templates/create", badge: "GUIDE" }
]}
/>
