Content Fragment Selector - Related Properties content-fragment-selector-related-properties
The Micro-Frontend Content Fragment Selector allows you to browse or search Content Fragments in the repository, and use them in your application.
You can use the following properties to customize how the Content Fragment Selector is rendered and how it can be used.
Content Fragment Selector Properties content-fragment-selector-properties
refContentFragmentSelector instance, allowing access to provided functionality such as reload.apiKeydigitalData.page.attributes.apiKey. Used only for tracking — not for data API calls. If not provided, it is derived from the imsToken (client_id claim), falling back to the package default.imsTokenrepoIdallowedRepositoryIdsdefaultRepoIdrepoId is not provided. If repoId is set, the repository selector is hidden, and this value is ignored.orgIdlocaleenvEnv type for allowed environment names.filters{ folder: "/content/dam" }/content/dam will be displayed.repoFiltersUse when the selector exposes multiple repositories, but each needs different filters (e.g. Status: Draft for one author instance while others use Status: Published, Modified).
When the active repository has an entry, it fully replaces filters for that repository (the defaults are not merged in), so each override must declare the complete filter set it needs. Repositories without an entry fall back to filters, so omitting
repoFilters preserves the existing behavior. The override is re-applied automatically when the user switches repositories. Each entry supports the same readonly markers as filters.isOpenfalsenoWrapfalsetrue, the Fragment Selector is embedded directly in the parent container. Useful for integrating the selector into custom layouts or workflows.onSelectionChangeContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidonDismissonSubmitContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidthemeselectionTypesinglemaxItemsselectionType is multiple. When not specified, unlimited selection is allowed. Not applicable for single selection mode.dialogSizefullscreenrunningInUnifiedShellselectedFragments[]hipaaEnabledfalseinventoryViewtableinventoryViewToggleEnabledfalseselectFieldsfalsetrue, the user picks which fields to expose for each selected fragment, and the chosen fields are returned as a per-fragment selectedFields map on the onSelectionChange and onSubmit payloads. When false (default), the step is skipped and selectedFields is omitted from each fragment.variationsFiltersAdjusts the variation dropdown (not the main list—use filters for that). Only status is supported today, with “PUBLISHED” as the supported value (e.g. { status: [“PUBLISHED”] }). Other keys are ignored. Omit the prop to show all variations.
rememberStatefalsetrue, the selector persists the user’s active filters, saved searches, and last-used repository to IndexedDB and restores them automatically on the next load. Opt-in — existing consumers require no changes when omitted.amsRepositoriesorgId for multi-org users. When omitted, the top-level orgId prop is used, then an Adobe IMS lookup. AMS repos always use the raw imsToken (no cloud token exchange). Subject to allowedRepositoryIds filtering when that prop is also provided.ImsAuthProps Properties imsauthprops-properties
The ImsAuthProps properties define the authentication information and flow that the Content Fragment Selector uses to obtain an imsToken. By setting these properties, you can control how the authentication flow should behave and register listeners for various authentication events.
imsClientIdimsScoperedirectUrlredirectUrl is not supplied, ImsAuthService will use the redirectUrl used to register the imsClientIdmodalModetrue, the authentication flow is displayed in a pop-up. If set to false, the authentication flow is displayed in a full page reload. Note: for better UX, you can dynamically control this value if the user has browser pop-up disabled.onImsServiceInitializedservice, which is an object representing the Adobe IMS service. See ImsAuthService for more details.onAccessTokenReceivedimsToken is received from the Adobe IMS authentication service. This function takes one parameter, imsToken, which is a string representing the access token.onAccessTokenExpiredonErrorReceivedImsAuthService Properties imsauthservice-properties
The ImsAuthService class handles the authentication flow for the Content Fragment Selector. It is responsible for obtaining an imsToken from the Adobe IMS authentication service. The imsToken is used to authenticate the user and authorize access to the Adobe Experience Manager (AEM) CS repository. ImsAuthService uses the ImsAuthProps properties to control the authentication flow and register listeners for various authentication events. You can use the convenient registerContentFragmentSelectorAuthService function to register the ImsAuthService instance with the Content Fragment Selector. The following functions are available on the ImsAuthService class. However, if you are using the registerContentFragmentSelectorAuthService function, you do not need to call these functions directly.
isSignedInUsergetImsTokenimsToken for the currently signed-in user, which can be used to authenticate requests to other services such as generating asset rendition.signInImsAuthProps to show authentication in either a pop-up or a full page reload.signOutrefreshTokenContentFragmentSelection Type contentfragmentselection-type
The ContentFragmentSelection type represents the structure of Content Cragments returned by the Content Fragment Selector when a user selects fragments.
Type Definitions 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 properties
ContentFragmentSelection Properties contentfragmentselection-properties
idpath/content/dam/my-project/article-fragment)titlemodelvariations["master", "mobile", "tablet"])statuspublishedBypublishedByFullNamepublishedDatemodifiedBymodifiedByFullNamemodifiedDatecreatedBycreatedByFullNamecreatedDateselectedFieldsRecord<string, unknown>ContentFragmentField["values"] array — i.e. each value is an array of primitives (string[], boolean[], number[], …) whose element type depends on the field’s model type. Present only when the selector was opened with selectFields={true} and the user picked at least one field for this fragment; omitted otherwise.selectedTemplateIdstring | null@aem-sites/fragment-selector). null means the generic (default) template was explicitly selected — a real selection that is forwarded. The key is omitted entirely when nothing was chosen (e.g. the template picker was never opened for this fragment, or the upstream feature toggle gating the picker is off).ContentFragmentModel Properties contentfragmentmodel-properties
nameidpath/conf/my-project/settings/dam/cfm/models/article)tagIdsExample Usage example-usage
Basic Example 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 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 Integration typescript-integration
If you are using TypeScript, you can import the type from the package:
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 Code Reference source-code-reference
The complete type definition can be found in the source code:
- Location:
packages/@aem-sites/content-fragment-selector/src/types/index.ts - Repository: sites-content-fragment-selector