콘텐츠 조각 선택기 - 관련 속성 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를 위해 브라우저 팝업이 비활성화된 경우 이 값을 동적으로 제어할 수 있습니다(Note :).onImsServiceInitializedservice 매개 변수 하나를 사용합니다. 자세한 내용은 ImsAuthService을(를) 참조하십시오.onAccessTokenReceivedimsToken을(를) 받을 때 호출되는 콜백 함수입니다. 이 함수는 액세스 토큰을 나타내는 문자열인 imsToken 매개 변수 하나를 사용합니다.onAccessTokenExpiredonErrorReceivedImsAuthService 속성 imsauthservice-properties
ImsAuthService 클래스는 콘텐츠 조각 선택기에 대한 인증 흐름을 처리합니다. Adobe IMS 인증 서비스에서 imsToken을(를) 가져옵니다. imsToken은(는) 사용자를 인증하고 Adobe Experience Manager(AEM) CS 저장소에 대한 액세스 권한을 부여하는 데 사용됩니다. ImsAuthService는 ImsAuthProps 속성을 사용하여 인증 흐름을 제어하고 다양한 인증 이벤트에 대한 수신기를 등록합니다. 편리한 registerContentFragmentSelectorAuthService 함수를 사용하여 콘텐츠 조각 선택기에 ImsAuthService 인스턴스를 등록할 수 있습니다. 다음 함수는 ImsAuthService 클래스에서 사용할 수 있습니다. 그러나 registerContentFragmentSelectorAuthService 함수를 사용하는 경우에는 이러한 함수를 직접 호출할 필요가 없습니다.
isSignedInUsergetImsTokenimsToken을(를) 검색합니다.signInImsAuthProps을(를) 사용하여 팝업 또는 전체 페이지 다시 로드에서 인증을 표시합니다.signOutrefreshTokenContentFragmentSelection 유형 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} 및(으)로 열린 경우에만 표시됩니다. 사용자가 이 조각에 대해 하나 이상의 필드를 선택했지만 그렇지 않은 경우에는 생략했습니다.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