Seletor de fragmento de conteúdo — Propriedades relacionadas content-fragment-selector-related-properties
O Seletor de fragmento de conteúdo de micro front-end permite navegar ou pesquisar fragmentos de conteúdo no repositório e usá-los no aplicativo.
Você pode usar as seguintes propriedades para personalizar como o Seletor de fragmento de conteúdo é renderizado e como ele pode ser usado.
Propriedades do seletor de fragmentos de conteúdo content-fragment-selector-properties
refContentFragmentSelector, permitindo acesso à funcionalidade fornecida, como reload.apiKeydigitalData.page.attributes.apiKey. Usado apenas para rastreamento, não para chamadas de API de dados. Se não for fornecido, será derivado de imsToken (client_id declaração), retornando ao padrão do pacote.imsTokenrepoIdallowedRepositoryIdsdefaultRepoIdrepoId não é fornecido. Se repoId estiver definido, o seletor de repositório ficará oculto e esse valor será ignorado.orgIdlocaleenvEnv para obter os nomes de ambiente permitidos.filters{ folder: "/content/dam" }/content/dam serão exibidos.repoFiltersUse quando o seletor expõe vários repositórios, mas cada um precisa de filtros diferentes (por exemplo, Status: Rascunho para uma instância de autor, enquanto outros usam Status: Publicado, Modificado).
Quando o repositório ativo tiver uma entrada, ele substituirá totalmente os filtros desse repositório (os padrões não são mesclados), de modo que cada substituição deve declarar o conjunto de filtros completo necessário. Repositórios sem uma entrada retornam a filtros, portanto, omitir
repoFilters preserva o comportamento existente. A substituição é reaplicada automaticamente quando o usuário muda de repositório. Cada entrada suporta os mesmos marcadores somente leitura que os filtros.isOpenfalsenoWrapfalsetrue, o Seletor de fragmento é inserido diretamente no contêiner pai. Útil para integrar o seletor em layouts ou fluxos de trabalho personalizados.onSelectionChangeContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidonDismissonSubmitContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => voidthemeselectionTypesinglemaxItemsselectionType é multiple. Quando não especificado, a seleção ilimitada é permitida. Não aplicável ao modo de seleção única.dialogSizefullscreenrunningInUnifiedShellselectedFragments[]hipaaEnabledfalseinventoryViewtableinventoryViewToggleEnabledfalseselectFieldsfalsetrue, o usuário escolhe quais campos serão expostos para cada fragmento selecionado, e os campos escolhidos são retornados como um mapa por fragmento selectedFields nas cargas onSelectionChange e onSubmit. Quando false (padrão), a etapa é ignorada e selectedFields é omitido de cada fragmento.variationsFiltersAjusta a lista suspensa de variação (não a lista principal; use filtros para isso). Somente o status é compatível hoje, com “PUBLISHED” como o valor aceito (por exemplo, { status: [“PUBLISHED”] }). Outras chaves são ignoradas. Omita a prop para mostrar todas as variações.
rememberStatefalsetrue, o seletor persiste nos filtros ativos do usuário, pesquisas salvas e repositório usado pela última vez no IndexedDB e os restaura automaticamente na próxima carga. Opt-in — os consumidores existentes não exigem alterações quando omitidos.amsRepositoriesorgId opcional para usuários de várias organizações. Quando omitido, a prop orgId de nível superior é usada e, em seguida, uma pesquisa do Adobe IMS. Os repositórios AMS sempre usam o imsToken bruto (sem troca de token de nuvem). Sujeito à filtragem allowedRepositoryIds quando essa prop também for fornecida.Propriedades de ImsAuthProps imsauthprops-properties
As propriedades ImsAuthProps definem as informações de autenticação e o fluxo que o Seletor de fragmento de conteúdo usa para obter um imsToken. Ao definir essas propriedades, é possível controlar como o fluxo de autenticação deve se comportar e registrar ouvintes para vários eventos de autenticação.
imsClientIdimsScoperedirectUrlredirectUrl não for fornecido, ImsAuthService usará o redirectUrl usado para registrar o imsClientIdmodalModetrue, o fluxo de autenticação será exibido em um pop-up. Se definido como false, o fluxo de autenticação será exibido em um recarregamento de página completo. _Observação :_para melhor UX, você pode controlar dinamicamente esse valor se o usuário tiver o pop-up do navegador desabilitado.onImsServiceInitializedservice, que é um objeto que representa o serviço Adobe IMS. Consulte ImsAuthService para obter mais detalhes.onAccessTokenReceivedimsToken é recebido do serviço de autenticação do Adobe IMS. Esta função recebe um parâmetro, imsToken, que é uma cadeia de caracteres que representa o token de acesso.onAccessTokenExpiredonErrorReceivedPropriedades de ImsAuthService imsauthservice-properties
A classe ImsAuthService manipula o fluxo de autenticação para o Seletor de fragmento de conteúdo. Ele é responsável por obter um imsToken do serviço de autenticação do Adobe IMS. O imsToken é usado para autenticar o usuário e autorizar o acesso ao repositório do Adobe Experience Manager (AEM) CS. O ImsAuthService usa as propriedades ImsAuthProps para controlar o fluxo de autenticação e registrar ouvintes de vários eventos de autenticação. Você pode usar a conveniente função registerContentFragmentSelectorAuthService para registrar a instância ImsAuthService com o Seletor de fragmentos de conteúdo. As seguintes funções estão disponíveis na classe ImsAuthService. No entanto, se você estiver usando a função registerContentFragmentSelectorAuthService, não será necessário chamar essas funções diretamente.
isSignedInUsergetImsTokenimsToken para o usuário conectado no momento, que pode ser usada para autenticar solicitações para outros serviços, como geração de representação de ativos.signInImsAuthProps para mostrar autenticação em um pop-up ou em um recarregamento de página completo.signOutrefreshTokenTipo ContentFragmentSelection contentfragmentselection-type
O tipo ContentFragmentSelection representa a estrutura dos fragmentos de conteúdo retornados pelo Seletor de fragmento de conteúdo quando um usuário seleciona fragmentos.
Definições de tipo type-definitions
SeleçãoDeFragmentoDeConteúdo 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;
}[];
ModeloDeFragmentoDeConteúdo
type ContentFragmentModel = {
name: string;
id: string;
path?: string;
tagIds?: string[];
};
Propriedades properties
Propriedades de ContentFragmentSelection contentfragmentselection-properties
idpath/content/dam/my-project/article-fragment)titlemodelvariations["master", "mobile", "tablet"])statuspublishedBypublishedByFullNamepublishedDatemodifiedBymodifiedByFullNamemodifiedDatecreatedBycreatedByFullNamecreatedDateselectedFieldsRecord<string, unknown>ContentFragmentField["values"] subjacente — ou seja, cada valor é uma matriz de primitivos (string[], boolean[], number[], …) cujo tipo de elemento depende do tipo de modelo do campo. Presente somente quando o seletor foi aberto com selectFields={true} e, o usuário escolheu pelo menos um campo para este fragmento; omitido caso contrário.selectedTemplateIdstring | null@aem-sites/fragment-selector). null significa que o modelo genérico (padrão) foi selecionado explicitamente — uma seleção real que é encaminhada. A chave é totalmente omitida quando nada foi escolhido (por exemplo, o seletor de modelo nunca foi aberto para este fragmento ou o recurso de upstream que alterna o seletor está desativado).Propriedades do ContentFragmentModel contentfragmentmodel-properties
nameidpath/conf/my-project/settings/dam/cfm/models/article)tagIdsExemplo de uso example-usage
Exemplo básico 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);
}
});
}
}
);
Exemplo de resposta completa 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"
}
Integração do TypeScript typescript-integration
Se você estiver usando TypeScript, poderá importar o tipo do pacote:
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;
});
};
Referência de código do Source source-code-reference
A definição completa de tipo pode ser encontrada no código-fonte:
- Local:
packages/@aem-sites/content-fragment-selector/src/types/index.ts - Repositório: sites-content-fragment-seletor