コンテンツフラグメントセレクター - 関連プロパティ content-fragment-selector-related-properties
マイクロフロントエンドコンテンツフラグメントセレクターを使用すると、リポジトリ内のコンテンツフラグメントを参照または検索し、アプリケーションで使用できます。
次のプロパティを使用して、コンテンツフラグメントセレクターのレンダリング方法と使用方法をカスタマイズできます。
コンテンツフラグメントセレクターのプロパティ content-fragment-selector-properties
refContentFragmentSelector インスタンスを参照し、reloadなどの提供された機能へのアクセスを許可します。apiKeydigitalData.page.attributes.apiKeyにAnalyticsに報告されました。 トラッキングにのみ使用され、データ API呼び出しには使用されません。 指定しない場合は、imsToken (client_id クレーム)から派生し、パッケージのデフォルトにフォールバックします。imsTokenrepoIdallowedRepositoryIdsdefaultRepoIdrepoIdが指定されていない場合にのみ使用されます。 repoIdが設定されている場合、リポジトリセレクターは非表示になり、この値は無視されます。orgIdlocaleenvEnv タイプを参照してください。filters{ folder: "/content/dam" }/content/dam以下のフラグメントが表示されます。repoFiltersセレクターが複数のリポジトリを公開していますが、それぞれに異なるフィルターが必要な場合に使用します(例:ステータス:作成者インスタンスのドラフト、他のユーザーがステータス:公開済み、変更済み)。
アクティブなリポジトリーにエントリがある場合、そのリポジトリーのフィルターは完全に置き換えられます(デフォルトはマージされません)。そのため、各オーバーライドでは、必要なフィルターセットを完全に宣言する必要があります。 エントリのないリポジトリはフィルターにフォールバックするため、
repoFiltersを省略すると、既存の動作が保持されます。 オーバーライドは、ユーザーがリポジトリを切り替えるときに自動的に再適用されます。 各エントリは、フィルターと同じ読み取り専用マーカーをサポートしています。isOpenfalsenoWrapfalsetrueに設定すると、フラグメントセレクターは親コンテナに直接埋め込まれます。 セレクターをカスタムレイアウトまたはワークフローに統合する場合に便利です。onSelectionChangeContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidonDismissonSubmitContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidthemeselectionTypesinglemaxItemsselectionTypeがmultipleの場合に選択できる項目の最大数。 指定しない場合、無制限の選択が許可されます。 単一選択モードには適用できません。dialogSizefullscreenrunningInUnifiedShellselectedFragments[]hipaaEnabledfalseinventoryViewtableinventoryViewToggleEnabledfalseselectFieldsfalsetrueの場合、ユーザーは選択したフラグメントごとに表示するフィールドを選択し、選択したフィールドはonSelectionChangeおよびonSubmit ペイロードのフラグメントごとのselectedFields マップとして返されます。 false (デフォルト)の場合、ステップはスキップされ、各フラグメントからselectedFieldsが省略されます。variationsFiltersバリエーションのドロップダウンを調整します(メインリストではなく、フィルターを使用します)。 現在はステータスのみがサポートされており、サポートされている値は「公開済み」です(例:{ status: [ 「公開済み」 ]})。 その他のキーは無視されます。 すべてのバリエーションを表示するには、propを省略します。
rememberStatefalsetrueの場合、セレクターはユーザーのアクティブなフィルター、保存された検索、最後に使用したリポジトリをIndexedDBに保持し、次の読み込み時に自動的に復元します。 オプトイン – 既存の消費者は、省略しても変更を必要としません。amsRepositoriesorgIdを含めることができます。 省略すると、最上位レベルのorgId propが使用され、次にAdobe IMS参照が使用されます。 AMS リポジトリでは、常に未加工のimsToken (クラウドトークン交換なし)が使用されます。 そのpropも指定されている場合、allowedRepositoryIds フィルタリングの対象となります。ImsAuthProps プロパティ imsauthprops-properties
ImsAuthProps プロパティは、コンテンツフラグメントセレクターが imsToken を取得するのに使用する認証情報とフローを定義します。 これらのプロパティを設定すると、認証フローの動作を制御し、様々な認証イベントのリスナーを登録できます。
imsClientIdimsScoperedirectUrlredirectUrl を指定していない場合、ImsAuthService は imsClientId の登録に使用した redirectUrl を使用します。modalModetrue に設定すると、認証フローがポップアップで表示されます。 false に設定すると、認証フローはページ全体をリロードして表示されます。 メモ::_UX を向上させるには、ユーザーがブラウザーのポップアップを無効にしていると、この値を動的に制御できます。onImsServiceInitializedservice という 1 つのパラメーターを受け取ります。 詳しくは、ImsAuthService を参照してください。onAccessTokenReceivedimsToken を受信する際に呼び出されるコールバック関数。 この関数は、アクセストークンを表す文字列である imsToken という 1 つのパラメーターを受け取ります。onAccessTokenExpiredonErrorReceivedImsAuthService プロパティ imsauthservice-properties
ImsAuthService クラスは、コンテンツフラグメントセレクターの認証フローを処理します。 これは、Adobe IMS 認証サービスから imsToken を取得する役割を果たします。 imsToken は、ユーザーを認証し、Adobe Experience Manager(AEM)CS リポジトリへのアクセスを認証するのに使用されます。 ImsAuthService は、ImsAuthProps プロパティを使用して認証フローを制御し、様々な認証イベントのリスナーを登録します。 便利な registerContentFragmentSelectorAuthService 関数を使用して、ImsAuthService インスタンスをコンテンツフラグメントセレクターに登録できます。 ImsAuthService クラスでは、次の関数を使用できます。 ただし、registerContentFragmentSelectorAuthService 関数を使用している場合は、これらの関数を直接呼び出す必要はありません。
isSignedInUsergetImsTokenimsTokenを取得します。この認証は、アセットのレンディションの生成など、他のサービスへのリクエストを認証するために使用できます。signInImsAuthProps を使用して、ポップアップまたはページ全体のリロードで認証を表示します。signOutrefreshTokenContentFragmentSelection 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
idpath/content/dam/my-project/article-fragment)titlemodelvariations["master", "mobile", "tablet"])statuspublishedBypublishedByFullNamepublishedDatemodifiedBymodifiedByFullNamemodifiedDatecreatedBycreatedByFullNamecreatedDateselectedFieldsRecord<string, unknown>ContentFragmentField["values"]配列を反映します。つまり、各値は、要素タイプがフィールドのモデルタイプに依存するプリミティブの配列(string[]、boolean[]、number[]、…)です。 selectFields={true} およびでセレクターが開かれた場合にのみ、ユーザーがこのフラグメントの少なくとも1つのフィールドを選択しました。それ以外の場合は省略します。selectedTemplateIdstring | null@aem-sites/fragment-selector)でこのフラグメント用に選択されたHTML テンプレートのID。 nullは、汎用(デフォルト)テンプレートが明示的に選択されたことを意味します。これは、転送される実際の選択範囲です。 何も選択されていない場合、キーは 完全に省略 されます(例えば、このフラグメントに対してテンプレートピッカーが開かれなかった、またはアップストリーム機能の切替スイッチがピッカーのゲートがオフになっている)。ContentFragmentModel プロパティ contentfragmentmodel-properties
nameidpath/conf/my-project/settings/dam/cfm/models/article)tagIds使用例 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
完全なタイプ定義は、ソースコードに記載されています。
- 場所:
packages/@aem-sites/content-fragment-selector/src/types/index.ts - リポジトリ: sites-content-fragment-selector