콘텐츠 조각 선택기 - 관련 속성 content-fragment-selector-related-properties

마이크로 프론트엔드 콘텐츠 조각 선택기를 사용하면 저장소에서 콘텐츠 조각을 찾아보거나 검색하고 애플리케이션에서 사용할 수 있습니다.

다음 속성을 사용하여 콘텐츠 조각 선택기를 렌더링하는 방법과 사용 방법을 사용자 지정할 수 있습니다.

콘텐츠 조각 선택기 속성 content-fragment-selector-properties

속성
유형
필수
기본값
설명
ref
조각 선택기 참조
아니요
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
조각 필터
아니요
{ folder: "/content/dam" }
콘텐츠 조각 목록에 적용할 필터. 기본적으로 /content/dam 아래의 조각이 표시됩니다.
repoFilters
레코드<문자열, FragmentFilterWithReadonlySupport>
아니요
저장소 ID로 처리된 저장소당 필터 재정의.
선택기가 여러 저장소를 노출하지만 각 저장소에 서로 다른 필터가 필요한 경우 사용합니다(예: 상태: 작성자 인스턴스 하나에 대한 초안 반면 다른 작성자 인스턴스에서는 상태: 게시됨, 수정됨).
활성 리포지토리에 항목이 있으면 해당 리포지토리에 대한 필터를 완전히 대체하므로(기본값은 병합되지 않음) 각 재정의는 필요한 전체 필터 집합을 선언해야 합니다. 항목이 없는 저장소는 필터로 대체되므로 repoFilters을(를) 생략하면 기존 동작이 유지됩니다. 사용자가 저장소를 전환하면 재정의가 자동으로 다시 적용됩니다. 각 항목은 필터와 동일한 읽기 전용 마커를 지원합니다.
isOpen
부울
아니요
false
선택기의 열기 또는 닫기 여부를 제어하는 플래그.
noWrap
부울
아니요
false
래핑 대화 상자 없이 조각 선택기를 렌더링할지 여부를 결정합니다. true(으)로 설정하면 조각 선택기가 상위 컨테이너에 직접 포함됩니다. 선택기를 사용자 지정 레이아웃 또는 워크플로우에 통합하는 데 유용합니다.
onSelectionChange
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
아니요
콘텐츠 조각 선택이 변경될 때마다 트리거되는 콜백 함수입니다. 현재 선택한 조각, 도메인 이름, 테넌트 정보, 저장소 ID 및 게재 저장소를 제공합니다.
onDismiss
() => void
아니요
닫기 작업이 수행될 때(예: 선택기를 닫는 경우) 트리거되는 콜백 함수입니다.
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
재고 보기 유형
아니요
table
선택기에서 사용할 재고 기본 보기 유형입니다.
inventoryViewToggleEnabled
부울
아니요
false
사용자가 테이블 및 그리드 보기 간을 전환할 수 있도록 인벤토리 보기 토글을 활성화할지 여부를 나타냅니다.
selectFields
부울
아니요
false
필드 선택 단계를 사용할지 여부를 나타냅니다. true일 때 사용자는 선택한 각 조각에 대해 표시할 필드를 선택하고, 선택한 필드는 onSelectionChangeonSubmit 페이로드에서 조각별 selectedFields 맵으로 반환됩니다. false(기본값)이면 단계를 건너뛰고 각 조각에서 selectedFields이(가) 생략됩니다.
variationsFilters
개체
아니요
선택 사항입니다.
기본 목록이 아닌 변형 드롭다운을 조정합니다. 필터를 사용합니다. 현재는 상태만 지원되며 "게시됨"은 지원되는 값으로 사용됩니다(예: { status: [“게시됨”] }). 다른 키는 무시됩니다. 모든 변형을 표시하려면 prop을 생략합니다.
rememberState
부울
아니요
false
true에서 선택기는 사용자의 활성 필터, 저장된 검색 및 마지막으로 사용한 리포지토리를 IndexedDB에 유지하고 다음 로드 시 자동으로 복원합니다. 옵트인 — 기존 소비자는 생략하면 변경할 필요가 없습니다.
amsRepositories
배열<{ label: string; 값: string; orgId?: string }>
아니요
저장소 선택기에 포함할 선택적 AMS 저장소 목록입니다. 검색 서비스에서 클라우드 저장소와 연결됩니다. 각 항목에는 다중 조직 사용자에 대한 선택적 orgId이(가) 포함될 수 있습니다. 생략하면 최상위 orgId prop이 사용된 다음 Adobe IMS 조회가 사용됩니다. AMS 리포지토리는 항상 원시 imsToken을(를) 사용합니다(클라우드 토큰 교환 없음). 해당 prop이 함께 제공되는 경우 allowedRepositoryIds 필터링에 따릅니다.

ImsAuthProps 속성 imsauthprops-properties

ImsAuthProps 속성은 콘텐츠 조각 선택기에서 imsToken을(를) 가져오는 데 사용하는 인증 정보 및 흐름을 정의합니다. 이러한 속성을 설정하여 인증 플로우의 동작 방법을 제어하고 다양한 인증 이벤트에 대한 리스너를 등록할 수 있습니다.

속성 이름
설명
imsClientId
인증 용도로 사용되는 IMS 클라이언트 ID를 나타내는 문자열 값입니다. 이 값은 Adobe에서 제공하며 Adobe AEM CS 조직에만 해당됩니다.
imsScope
인증에 사용되는 범위를 설명합니다. 범위는 응용 프로그램이 조직 리소스에 대해 갖는 액세스 수준을 결정합니다. 여러 범위는 쉼표로 구분할 수 있습니다.
redirectUrl
인증 후 사용자가 리디렉션되는 URL을 나타냅니다. 이 값은 일반적으로 애플리케이션의 현재 URL로 설정됩니다. redirectUrl이(가) 제공되지 않으면 ImsAuthService에서 imsClientId을(를) 등록하는 데 사용되는 redirectUrl을 사용합니다.
modalMode
인증 흐름을 모달(팝업)로 표시할지 여부를 나타내는 부울. true(으)로 설정하면 인증 흐름이 팝업에 표시됩니다. false(으)로 설정하면 전체 페이지를 다시 로드할 때 인증 흐름이 표시됩니다. 향상된 UX를 위해 브라우저 팝업이 비활성화된 경우 이 값을 동적으로 제어할 수 있습니다(Note :).
onImsServiceInitialized
Adobe IMS 인증 서비스가 초기화될 때 호출되는 콜백 함수입니다. 이 함수는 Adobe IMS 서비스를 나타내는 개체인 service 매개 변수 하나를 사용합니다. 자세한 내용은 ImsAuthService을(를) 참조하십시오.
onAccessTokenReceived
Adobe IMS 인증 서비스에서 imsToken을(를) 받을 때 호출되는 콜백 함수입니다. 이 함수는 액세스 토큰을 나타내는 문자열인 imsToken 매개 변수 하나를 사용합니다.
onAccessTokenExpired
액세스 토큰이 만료된 경우 호출되는 콜백 함수입니다. 이 함수는 일반적으로 새 액세스 토큰을 얻기 위해 새 인증 흐름을 트리거하는 데 사용됩니다.
onErrorReceived
인증 중에 오류가 발생할 때 호출되는 콜백 함수입니다. 이 함수는 오류 유형과 오류 메시지의 두 매개 변수를 사용합니다. 오류 유형은 오류의 유형을 나타내는 문자열이고, 오류 메시지는 오류 메시지를 나타내는 문자열이다.

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 유형 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

속성
유형
필수
설명
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>
아니요
필드 선택 단계에서 사용자가 선택한 필드에 대한 필드 이름 → 필드 값 맵. 키는 필드 이름입니다. 값은 기본 ContentFragmentField["values"] 배열​을 미러링합니다. 즉, 각 값은 필드의 모델 형식에 따라 요소 유형이 달라지는 기본 요소(string[], boolean[], number[], …)의 배열입니다. 선택기가 selectFields={true} (으)로 열린 경우에만 표시됩니다. 사용자가 이 조각에 대해 하나 이상의 필드를 선택했지만 그렇지 않은 경우에는 생략했습니다.
selectedTemplateId
string | null
아니요
빠른 세부 정보 패널의 템플릿 선택기(업스트림 @aem-sites/fragment-selector)에서 이 조각에 대해 선택한 HTML 템플릿의 ID입니다. null은(는) 제네릭(기본) 템플릿이 명시적으로 선택되었음을 의미합니다. 전달된 실제 선택입니다. 아무 것도 선택되지 않은 경우 키는 완전히 생략됨​입니다(예: 이 조각에 대해 템플릿 선택기를 열지 않았거나 선택기를 토글하는 업스트림 기능 토글이 해제됨).

ContentFragmentModel 속성 contentfragmentmodel-properties

속성
유형
필수
설명
name
문자열
콘텐츠 조각 모델의 표시 이름
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