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

# SalesforceのUI Elements

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 Link = ({href, children, className, ...props}) => {
  const localizedHref = localizeLink(href);
  return <a href={localizedHref} className={className} {...props}>
      {children}
    </a>;
};

Box for Salesforce管理パッケージでは、<Link href="/guides/embed/ui-elements/picker">Content Picker</Link>、<Link href="/guides/embed/ui-elements/explorer">エクスプローラ</Link>、<Link href="/guides/embed/ui-elements/preview">プレビュー</Link>、<Link href="/guides/embed/ui-elements/uploader">アップローダー</Link>の<Link href="/guides/embed/ui-elements">UI Elements</Link>がLightningコンポーネントとして提供されます。これらのUI ElementsはLightningページまたはLightningフローで使用できます。

## Content Picker

Box for SalesforceのPickerで使用できる<Link href="/guides/embed/ui-elements/picker/#options">オプション</Link>は以下のとおりです。

* `folderId` - Lightningコンポーネントがレコードページにある場合は、デフォルトでレコードフォルダになります
* `chooseButtonLabel`
* `cancelButtonLabel`
* `canSetShareAccess`
* `canCreateNewFolder`
* `canUpload`
* `maxSelectable`

## コンテンツエクスプローラ

Box for Salesforceのエクスプローラで使用できる<Link href="/guides/embed/ui-elements/explorer/#options">オプション</Link>は以下のとおりです。

* `folderId` - Lightningコンポーネントがレコードページにある場合は、デフォルトでレコードフォルダになります
* `canSetShareAccess`
* `canCreateNewFolder`
* `canUpload`
* `canPreview`
* `canDownload`
* `canDelete`
* `canRename`
* `canShare`

## コンテンツプレビュー

Box for Salesforceのプレビューで使用できる<Link href="/guides/embed/ui-elements/preview/#options">オプション</Link>は以下のとおりです。

* `fileId` (<Link href="/guides/files/get">ファイルIDの確認</Link>)
* **ファイルIDのAPIフィールド名** - Salesforce固有。レコードページでは、表示するファイルIDを保持するAPIフィールド名を使用できます

## コンテンツアップローダー

Box for Salesforceのアップローダーで使用できる<Link href="/guides/embed/ui-elements/uploader/#options">オプション</Link>は以下のとおりです。

* `folderId` - Lightningコンポーネントがレコードページにある場合は、デフォルトでレコードフォルダになります
* `fileLimit`

<RelatedLinks
  title="関連するガイド"
  items={[
{ label: translate("Install Salesforce SDK"), href: "/guides/tooling/sdks/salesforce", badge: "GUIDE" }
]}
/>
