コンテンツフラグメントセレクター - 関連プロパティ content-fragment-selector-related-properties

マイクロフロントエンドコンテンツフラグメントセレクターを使用すると、リポジトリ内のコンテンツフラグメントを参照または検索し、アプリケーションで使用できます。

次のプロパティを使用して、コンテンツフラグメントセレクターのレンダリング方法と使用方法をカスタマイズできます。

コンテンツフラグメントセレクターのプロパティ content-fragment-selector-properties

Property
種類
必須
デフォルト
説明
ref
FragmentSelectorRef
いいえ
ContentFragmentSelector インスタンスを参照し、reloadなどの提供された機能へのアクセスを許可します。
apiKey
文字列
不要
API キーがdigitalData.page.attributes.apiKeyにAnalyticsに報告されました。 トラッキングにのみ使用され、データ API呼び出しには使用されません。 指定しない場合は、imsToken (client_id クレーム)から派生し、パッケージのデフォルトにフォールバックします。
imsToken
文字列
不要
認証に使用されるIMS トークン。 指定しない場合、IMS ログインフローが開始されます。
repoId
文字列
不要
フラグメントセレクターに使用されるリポジトリ ID。 指定すると、セレクターは指定されたリポジトリに自動的に接続し、リポジトリドロップダウンは非表示になります。 指定しない場合、ユーザーは、アクセス権を持つ使用可能なリポジトリのリストからリポジトリを選択できます。
allowedRepositoryIds
文字列[]
不要
コンテンツフラグメントセレクターでリポジトリとコンテンツフラグメントをフィルタリングするためのリポジトリ IDのリスト。 リポジトリ IDを指定すると、これらのリポジトリのみがリポジトリセレクターに表示されます。 指定しない場合や空の配列の場合、ユーザーがアクセスできるリポジトリはすべて使用できます。
defaultRepoId
文字列
不要
リポジトリセレクターが表示されたときにデフォルトで選択されるリポジトリ ID。 repoIdが指定されていない場合にのみ使用されます。 repoIdが設定されている場合、リポジトリセレクターは非表示になり、この値は無視されます。
orgId
文字列
不要
認証に使用される組織ID。 指定しない場合、ユーザーはアクセス権を持つ別の組織からリポジトリを選択できます。 ユーザーがリポジトリまたは組織にアクセスできない場合、コンテンツは読み込まれません。
locale
文字列
不要
「en-US」
ロケール。
env
文字列
不要
デプロイ環境: 許可された環境名については、Env タイプを参照してください。
filters
FragmentFilter
いいえ
{ folder: "/content/dam" }
コンテンツフラグメントのリストに適用するフィルター。 デフォルトでは、/content/dam以下のフラグメントが表示されます。
repoFilters
Record<string, FragmentFilterWithReadonlySupport>
いいえ
リポジトリ IDでキー設定されたリポジトリごとのフィルターのオーバーライド。
セレクターが複数のリポジトリを公開していますが、それぞれに異なるフィルターが必要な場合に使用します(例:ステータス:作成者インスタンスのドラフト、他のユーザーがステータス:公開済み、変更済み)。
アクティブなリポジトリーにエントリがある場合、そのリポジトリーのフィルターは完全に置き換えられます(デフォルトはマージされません)。そのため、各オーバーライドでは、必要なフィルターセットを完全に宣言する必要があります。 エントリのないリポジトリはフィルターにフォールバックするため、repoFiltersを省略すると、既存の動作が保持されます。 オーバーライドは、ユーザーがリポジトリを切り替えるときに自動的に再適用されます。 各エントリは、フィルターと同じ読み取り専用マーカーをサポートしています。
isOpen
ブーリアン
不要
false
セレクターを開くか閉じるかを制御するフラグです。
noWrap
ブーリアン
不要
false
フラグメントセレクターをラッピングダイアログなしでレンダリングするかどうかを指定します。 trueに設定すると、フラグメントセレクターは親コンテナに直接埋め込まれます。 セレクターをカスタムレイアウトまたはワークフローに統合する場合に便利です。
onSelectionChange
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
いいえ
コールバック関数は、コンテンツフラグメントの選択が変更されるたびにトリガーされます。 現在選択されているフラグメント、ドメイン名、テナント情報、リポジトリ ID、配信リポジトリを提供します。
onDismiss
() => void
いいえ
コールバック関数は、Dismiss アクションが実行されたときにトリガーされます(例えば、セレクターを閉じます)。
onSubmit
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
いいえ
ユーザーが選択を確認すると、コールバック機能がトリガーされます。 選択したコンテンツフラグメント、ドメイン名、テナント情報、リポジトリ ID、配信リポジトリを受け取ります。
theme
「light」または「dark」
いいえ
フラグメントセレクターのテーマ。 デフォルトでは、unifiedShell環境テーマに設定されています。
selectionType
「single」または「multiple」
いいえ
single
選択タイプは、フラグメントセレクターの選択を制限するために使用できます。
maxItems
数値
いいえ
selectionTypeがmultipleの場合に選択できる項目の最大数。 指定しない場合、無制限の選択が許可されます。 単一選択モードには適用できません。
dialogSize
「fullscreen」または「fullscreenTakeover」
いいえ
fullscreen
ダイアログサイズを制御するオプションのprop。
runningInUnifiedShell
ブーリアン
不要
DestinationSelectorがUnifiedShellの下で実行されているか、スタンドアロンで実行されているかを確認します。
selectedFragments
ContentFragmentIdentifier[]
いいえ
[]
セレクターが開いたときに事前選択するコンテンツフラグメントの初期選択。
hipaaEnabled
ブーリアン
不要
false
HIPAA コンプライアンスが有効かどうかを示します。
inventoryView
InventoryViewType
いいえ
table
セレクターで使用されるインベントリのデフォルトのビュータイプ。
inventoryViewToggleEnabled
ブーリアン
不要
false
在庫ビューの切り替えが有効かどうかを示します。これにより、ユーザーはテーブル ビューとグリッド ビューを切り替えることができます。
selectFields
ブーリアン
不要
false
フィールド選択ステップが有効かどうかを示します。 trueの場合、ユーザーは選択したフラグメントごとに表示するフィールドを選択し、選択したフィールドはonSelectionChangeおよびonSubmit ペイロードのフラグメントごとのselectedFields マップとして返されます。 false (デフォルト)の場合、ステップはスキップされ、各フラグメントからselectedFieldsが省略されます。
variationsFilters
object
いいえ
オプション。
バリエーションのドロップダウンを調整します(メインリストではなく、フィルターを使用します)。 現在はステータスのみがサポートされており、サポートされている値は「公開済み」です(例:{ status: [ 「公開済み」 ]})。 その他のキーは無視されます。 すべてのバリエーションを表示するには、propを省略します。
rememberState
ブーリアン
不要
false
trueの場合、セレクターはユーザーのアクティブなフィルター、保存された検索、最後に使用したリポジトリをIndexedDBに保持し、次の読み込み時に自動的に復元します。 オプトイン – 既存の消費者は、省略しても変更を必要としません。
amsRepositories
配列<{ label:文字列;値:文字列;組織ID?:文字列}>
いいえ
リポジトリピッカーに含めるAMS リポジトリのオプションのリスト。 これらは、検出サービスのクラウドリポジトリと連結されます。 各エントリには、複数の組織のユーザーに対するオプションのorgIdを含めることができます。 省略すると、最上位レベルのorgId propが使用され、次にAdobe IMS参照が使用されます。 AMS リポジトリでは、常に未加工のimsToken (クラウドトークン交換なし)が使用されます。 そのpropも指定されている場合、allowedRepositoryIds フィルタリングの対象となります。

ImsAuthProps プロパティ imsauthprops-properties

ImsAuthProps プロパティは、コンテンツフラグメントセレクターが imsToken を取得するのに使用する認証情報とフローを定義します。 これらのプロパティを設定すると、認証フローの動作を制御し、様々な認証イベントのリスナーを登録できます。

プロパティ名
説明
imsClientId
認証目的で使用される IMS クライアント ID を表す文字列値。 この値はアドビから提供され、アドビの AEM CS 組織に固有です。
imsScope
認証で使用されるスコープについて説明します。 スコープは、組織のリソースに対するアプリケーションのアクセスレベルを決定します。 複数のスコープは、コンマで区切ることができます。
redirectUrl
認証後にユーザーがリダイレクトされる URL を表します。 この値は通常、アプリケーションの現在の URL に設定されます。 redirectUrl を指定していない場合、ImsAuthService は imsClientId の登録に使用した redirectUrl を使用します。
modalMode
認証フローをモーダル(ポップアップ)に表示するかどうかを示すブール値。 true に設定すると、認証フローがポップアップで表示されます。 false に設定すると、認証フローはページ全体をリロードして表示されます。 メモ::_UX を向上させるには、ユーザーがブラウザーのポップアップを無効にしていると、この値を動的に制御できます。
onImsServiceInitialized
Adobe IMS 認証サービスを初期化する際に呼び出されるコールバック関数。 この関数は、Adobe IMS サービスを表すオブジェクトである service という 1 つのパラメーターを受け取ります。 詳しくは、ImsAuthService を参照してください。
onAccessTokenReceived
Adobe IMS 認証サービスから imsToken を受信する際に呼び出されるコールバック関数。 この関数は、アクセストークンを表す文字列である imsToken という 1 つのパラメーターを受け取ります。
onAccessTokenExpired
アクセストークンの有効期限が切れる際に呼び出されるコールバック関数。 この関数は通常、新しい認証フローをトリガーして新しいアクセストークンを取得するために使用されます。
onErrorReceived
認証中にエラーが発生する際に呼び出されるコールバック関数。 この関数は、エラータイプとエラーメッセージという 2 つのパラメーターを受け取ります。 エラータイプはエラータイプを表す文字列で、エラーメッセージはエラーメッセージを表す文字列です。

ImsAuthService プロパティ imsauthservice-properties

ImsAuthService クラスは、コンテンツフラグメントセレクターの認証フローを処理します。 これは、Adobe IMS 認証サービスから imsToken を取得する役割を果たします。 imsToken は、ユーザーを認証し、Adobe Experience Manager(AEM)CS リポジトリへのアクセスを認証するのに使用されます。 ImsAuthService は、ImsAuthProps プロパティを使用して認証フローを制御し、様々な認証イベントのリスナーを登録します。 便利な registerContentFragmentSelectorAuthService 関数を使用して、ImsAuthService インスタンスをコンテンツフラグメントセレクターに登録できます。 ImsAuthService クラスでは、次の関数を使用できます。 ただし、registerContentFragmentSelectorAuthService 関数を使用している場合は、これらの関数を直接呼び出す必要はありません。

関数名
説明
isSignedInUser
ユーザーが現在サービスにログインしているかどうかを判断し、それに応じてブーリアンを返します。
getImsToken
現在ログインしているユーザーの認証imsTokenを取得します。この認証は、アセットのレンディションの生成など、他のサービスへのリクエストを認証するために使用できます。
signIn
ユーザーのログインプロセスを開始します。 この関数は、ImsAuthProps を使用して、ポップアップまたはページ全体のリロードで認証を表示します。
signOut
ユーザーをサービスからログアウトし、認証トークンを無効にし、保護されたリソースにアクセスするには再度ログインするようにリクエストします。 この関数を呼び出すと、現在のページがリロードされます。
refreshToken
現在ログインしているユーザーの認証トークンを更新して、トークンの有効期限切れを防ぎ、保護されたリソースに中断なくアクセスできるようになります。 後続のリクエストに使用できる新しい認証トークンを返します。

ContentFragmentSelection Type contentfragmentselection-type

ContentFragmentSelection タイプは、ユーザーがフラグメントを選択したときにコンテンツフラグメントセレクターによって返されるコンテンツフラグメントの構造を表します。

タイプ定義 type-definitions

ContentFragmentSelection contentfragmentselection

type ContentFragmentSelection = {
    id: string;
    path: string;
    title: string;
    model: ContentFragmentModel;
    variations: string[];
    status: string;
    publishedBy: string;
    publishedByFullName: string;
    publishedDate: number | undefined;
    modifiedBy: string;
    modifiedByFullName: string;
    modifiedDate: number;
    createdBy: string;
    createdByFullName: string;
    createdDate: number;
    selectedFields?: Record<string, unknown>;
    selectedTemplateId?: string | null;
}[];

ContentFragmentModel

type ContentFragmentModel = {
    name: string;
    id: string;
    path?: string;
    tagIds?: string[];
};

プロパティ properties

ContentFragmentSelection プロパティ contentfragmentselection-properties

Property
種類
必須
説明
id
文字列
はい
コンテンツフラグメントの一意のID
path
文字列
はい
DAM内のフラグメントへのフルパス (例:/content/dam/my-project/article-fragment)
title
文字列
はい
コンテンツフラグメントの表示タイトル
model
ContentFragmentModel
はい
コンテンツフラグメントモデルの情報
variations
文字列[]
はい
このフラグメントで使用可能なバリエーション名の配列(例:["master", "mobile", "tablet"])
status
文字列
はい
フラグメントの公開ステータス(例:「公開済み」、「変更」、「ドラフト」、「新規」、「非公開」)
publishedBy
文字列
はい
フラグメントを公開したユーザーのメールアドレス/ユーザー名
publishedByFullName
文字列
はい
フラグメントを公開したユーザーのフルネーム
publishedDate
番号
未定義
はい
modifiedBy
文字列
はい
フラグメントを最後に変更したユーザーのメールアドレス/ユーザー名
modifiedByFullName
文字列
はい
フラグメントを最後に変更したユーザーのフルネーム
modifiedDate
数値
はい
フラグメントが最後に変更されたときのタイムスタンプ(ミリ秒単位)
createdBy
文字列
はい
フラグメントを作成したユーザーのメールアドレス/ユーザー名
createdByFullName
文字列
はい
フラグメントを作成したユーザーの名前
createdDate
数値
はい
フラグメントの作成時のタイムスタンプ(ミリ秒単位)
selectedFields
Record<string, unknown>
いいえ
field-selection ステップでユーザーが選択したフィールドのfield-name → field-valueのマップ。 キーはフィールド名です。値は、基礎となるContentFragmentField["values"]配列​を反映します。つまり、各値は、要素タイプがフィールドのモデルタイプに依存するプリミティブの配列(string[]、boolean[]、number[]、…)です。 selectFields={true} および​でセレクターが開かれた場合にのみ、ユーザーがこのフラグメントの少なくとも1つのフィールドを選択しました。それ以外の場合は省略します。
selectedTemplateId
string | null
いいえ
クイック詳細パネルのテンプレートピッカー(上流@aem-sites/fragment-selector)でこのフラグメント用に選択されたHTML テンプレートのID。 nullは、汎用(デフォルト)テンプレートが明示的に選択されたことを意味します。これは、転送される実際の選択範囲です。 何も選択されていない場合、キーは​ 完全に省略 ​されます(例えば、このフラグメントに対してテンプレートピッカーが開かれなかった、またはアップストリーム機能の切替スイッチがピッカーのゲートがオフになっている)。

ContentFragmentModel プロパティ contentfragmentmodel-properties

Property
種類
必須
説明
name
文字列
はい
コンテンツフラグメントモデルの表示名
id
文字列
はい
モデルの一意のID
path
文字列
不要
モデル定義への完全なパス (例:/conf/my-project/settings/dam/cfm/models/article)
tagIds
文字列[]
不要
モデルに関連付けられたタグ IDの配列

使用例 example-usage

基本例 basic-example

PureJSContentFragmentSelectors.renderContentFragmentSelectorWithAuthFlow(
    container,
    {
        orgId: "YOUR_ORG_ID@AdobeOrg",
        onSubmit: ({ contentFragments, domainName, repoId }) => {
            // contentFragments is of type ContentFragmentSelection
            contentFragments.forEach(fragment => {
                console.log('Fragment ID:', fragment.id);
                console.log('Fragment Path:', fragment.path);
                console.log('Fragment Title:', fragment.title);
                console.log('Model Name:', fragment.model?.name);
                console.log('Model Path:', fragment.model?.path);
                console.log('Variations:', fragment.variations);
                console.log('Status:', fragment.status);
                console.log('Published By:', fragment.publishedBy);
                console.log('Published By Full Name:', fragment.publishedByFullName);
                console.log('Published Date:', new Date(fragment.publishedDate));
                console.log('Modified By:', fragment.modifiedBy);
                console.log('Modified By Full Name:', fragment.modifiedByFullName);
                console.log('Modified Date:', new Date(fragment.modifiedDate));
                console.log('Created By:', fragment.createdBy);
                console.log('Created By Full Name:', fragment.createdByFullName);
                console.log('Created Date:', new Date(fragment.createdDate));
                // Only present when the selector was opened with `selectFields={true}`
                // and the user picked at least one field for this fragment.
                if (fragment.selectedFields) {
                    console.log('Selected Fields:', fragment.selectedFields);
                }
                // Only present when a template was chosen in the Quick Details panel;
                // `null` means the generic (default) template was picked.
                if (fragment.selectedTemplateId !== undefined) {
                    console.log('Selected Template Id:', fragment.selectedTemplateId);
                }
            });
        }
    }
);

レスポンスの完全な例 complete-example-response

{
    contentFragments: [
        {
            id: "fragment-uuid-123",
            path: "/content/dam/my-project/article-fragment",
            title: "My Article Fragment",
            model: {
                name: "Article",
                id: "model-id-456",
                path: "/conf/my-project/settings/dam/cfm/models/article",
                tagIds: ["tag:product", "tag:news"]
            },
            variations: ["master", "mobile", "tablet"],
            status: "PUBLISHED",
            publishedBy: "user@adobetest.com",
            publishedByFullName: "John Doe",
            publishedDate: 1765728541321,
            modifiedBy: "editor@adobe.com",
            modifiedByFullName: "Jane Editor",
            modifiedDate: 1765728541320,
            createdBy: "abc12345@adobe.com",
            createdByFullName: "Peter Editor",
            createdDate: 1754035541525,
            // Returned per-fragment when the selector was opened with
            // `selectFields={true}` and the user picked fields for it.
            // Each value mirrors the underlying ContentFragmentField["values"]
            // array — usually a single-element array of the field's primitive
            // type. Multi-valued fields contain multiple entries.
            selectedFields: {
                title: ["My Article Fragment"],
                body: ["Lorem ipsum dolor sit amet…"],
                featured: [true]
            },
            // Returned per-fragment when a template was chosen in the Quick
            // Details panel. `null` means the generic (default) template;
            // omitted entirely when no template was chosen.
            selectedTemplateId: "template-abc-123"
        },
        {
            id: "fragment-uuid-789",
            path: "/content/dam/my-project/blog-post",
            title: "Sample Blog Post",
            model: {
                name: "Blog Post",
                id: "model-id-789",
                path: "/conf/my-project/settings/dam/cfm/models/blog-post",
                tagIds: ["tag:blog"]
            },
            variations: ["master"],
            status: "MODIFIED",
            publishedBy: "user@adobe.com",
            publishedByFullName: "John Doe",
            publishedDate: 1765728541321,
            modifiedBy: "admin@adobe.com",
            modifiedByFullName: "Admin User",
            modifiedDate: 1765728541322,
            createdBy: "admin@adobe.com",
            createdByFullName: "Admin User",
            createdDate: 1754035541525
        }
    ],
    domainName: "author-pXXXXX-eYYYYY.adobeaemcloud.com",
    repoId: "repository-id",
    tenantInfo: "tenant-info"
}

TypeScriptとの統合 typescript-integration

TypeScriptを使用している場合は、パッケージからタイプを読み込むことができます。

import type {
    ContentFragmentSelection,
    ContentFragmentModel
} from '@aem-sites/content-fragment-selector';

// Use in your code
const handleSubmit = (data: {
    contentFragments: ContentFragmentSelection
}) => {
    // TypeScript will provide full type checking
    data.contentFragments.forEach(fragment => {
        const title: string = fragment.title;
        const modelName: string = fragment.model.name;
    });
};

Source コード参照 source-code-reference

完全なタイプ定義は、ソースコードに記載されています。

recommendation-more-help
experience-manager-cloud-service-help-main-toc