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

Propriedade
Tipo
Obrigatório
Padrão
Descrição
ref
RefSeletorFragmento
Não
Referência à instância ContentFragmentSelector, permitindo acesso à funcionalidade fornecida, como reload.
apiKey
string
Não
Chave de API relatada para análise em digitalData.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.
imsToken
string
Não
Token IMS usado para autenticação. Se não for fornecido, o fluxo de logon do IMS será iniciado.
repoId
string
Não
ID do repositório usada para o Seletor de fragmentos. Quando fornecido, o seletor se conecta automaticamente ao repositório especificado e a lista suspensa de repositórios fica oculta. Se não for fornecido, o usuário poderá selecionar um repositório na lista de repositórios disponíveis aos quais tem acesso.
allowedRepositoryIds
cadeia de caracteres[]
Não
Lista de IDs de repositório para filtrar repositórios e fragmentos de conteúdo no Seletor de fragmento de conteúdo. Quando forem fornecidas com as IDs do repositório, somente esses repositórios estarão visíveis no seletor de repositórios. Se não for fornecida uma matriz ou se a matriz estiver vazia, todos os repositórios aos quais o usuário tiver acesso estarão disponíveis.
defaultRepoId
string
Não
ID do repositório que será selecionado por padrão quando o seletor de repositório for exibido. Usado apenas quando repoId não é fornecido. Se repoId estiver definido, o seletor de repositório ficará oculto e esse valor será ignorado.
orgId
string
Não
ID da organização usada para autenticação. Se não for fornecido, o usuário poderá selecionar um repositório de diferentes organizações às quais tem acesso. Se o usuário não tiver acesso a nenhum repositório ou organização, o conteúdo não será carregado.
locale
string
Não
“en-US”
Localidade.
env
string
Não
Ambiente de implantação. Consulte o tipo Env para obter os nomes de ambiente permitidos.
filters
FiltroDeFragmentos
Não
{ folder: "/content/dam" }
Filtros a serem aplicados à lista de fragmentos de conteúdo. Por padrão, os fragmentos em /content/dam serão exibidos.
repoFilters
Registro<cadeia de caracteres, FragmentFilterWithReadonlySupport>
Não
Substituições de filtro por repositório digitadas pela ID do repositório.
Use 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.
isOpen
booleano
Não
false
Sinalizador para controlar se o seletor está aberto ou fechado.
noWrap
booleano
Não
false
Determina se o Seletor de fragmentos é renderizado sem uma caixa de diálogo de encapsulamento. Quando definido como true, o Seletor de fragmento é inserido diretamente no contêiner pai. Útil para integrar o seletor em layouts ou fluxos de trabalho personalizados.
onSelectionChange
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
Não
A função de retorno de chamada é acionada sempre que a seleção de fragmentos de conteúdo é alterada. Fornece os fragmentos selecionados no momento, o nome do domínio, as informações do locatário, a ID do repositório e os repositórios de entrega.
onDismiss
() => void
Não
Função de retorno de chamada acionada quando a ação de descarte é executada (por exemplo, fechar o seletor).
onSubmit
({ contentFragments: ContentFragmentSelection, domainName?: string, tenantInfo?: string, repoId?: string, deliveryRepos?: DeliveryRepository[] }) => void
Não
A função de retorno de chamada é acionada quando o usuário confirma sua seleção. Recebe os fragmentos de conteúdo selecionados, o nome do domínio, as informações do locatário, a ID do repositório e os repositórios de entrega.
theme
“claro” ou “escuro”
Não
Tema para o Seletor de fragmentos. Por padrão, é definido como o tema de ambiente unifiedShell.
selectionType
“único” ou “múltiplo”
Não
single
O tipo de seleção pode ser usado para restringir a seleção do Seletor de fragmentos.
maxItems
número
Não
Número máximo de itens que podem ser selecionados quando selectionType é multiple. Quando não especificado, a seleção ilimitada é permitida. Não aplicável ao modo de seleção única.
dialogSize
“fullscreen” ou “fullscreenTakeover”
Não
fullscreen
Prop opcional para controlar o tamanho do diálogo.
runningInUnifiedShell
booleano
Não
Se DestinationSelector está em execução no UnifiedShell ou autônomo.
selectedFragments
IdentificadorFragmentoConteúdo[]
Não
[]
Seleção inicial de fragmentos de conteúdo a serem pré-selecionados quando o seletor é aberto.
hipaaEnabled
booleano
Não
false
Indica se a conformidade com a HIPAA está habilitada.
inventoryView
TipodeVisualizaçãodeInventário
Não
table
Tipo de exibição padrão de estoque a ser usado no seletor.
inventoryViewToggleEnabled
booleano
Não
false
Indica se a opção de exibição de estoque está habilitada, permitindo que o usuário alterne entre as exibições de tabela e grade.
selectFields
booleano
Não
false
Indica se a etapa de seleção de campo está habilitada. Quando true, 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.
variationsFilters
objeto
Não
Opcional.
Ajusta 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.
rememberState
booleano
Não
false
Quando true, 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.
amsRepositories
Matriz<{ label: string; value: string; orgId?: string }>
Não
Lista opcional de repositórios AMS a ser incluída no seletor de repositório. Eles são concatenados com repositórios em nuvem do serviço de descoberta. Cada entrada pode incluir um orgId 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.

Nome de propriedade
Descrição
imsClientId
Um valor de string que representa a ID do cliente IMS usada para fins de autenticação. Esse valor é fornecido pela Adobe e é específico para a sua organização do Adobe AEM CS.
imsScope
Descreve os escopos usados na autenticação. Os escopos determinam o nível de acesso que o aplicativo tem aos recursos da organização. Vários escopos podem ser separados por vírgulas.
redirectUrl
Representa o URL para o qual o usuário é redirecionado após a autenticação. Normalmente, esse valor é definido como o URL atual do aplicativo. Se um redirectUrl não for fornecido, ImsAuthService usará o redirectUrl usado para registrar o imsClientId
modalMode
Um booleano que indica se o fluxo de autenticação deve ser exibido em um modal (pop-up) ou não. Se definido como true, 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.
onImsServiceInitialized
Uma função de retorno de chamada que é chamada quando o serviço de autenticação do Adobe IMS é inicializado. Essa função recebe um parâmetro, service, que é um objeto que representa o serviço Adobe IMS. Consulte ImsAuthService para obter mais detalhes.
onAccessTokenReceived
Uma função de retorno de chamada que é chamada quando um imsToken é 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.
onAccessTokenExpired
Uma função de retorno de chamada chamada chamada quando um token de acesso expira. Normalmente, essa função é usada para acionar um novo fluxo de autenticação para obter um novo token de acesso.
onErrorReceived
Uma função de retorno de chamada que é chamada quando ocorre um erro durante a autenticação. Essa função usa dois parâmetros: o tipo de erro e a mensagem de erro. O tipo de erro é uma cadeia de caracteres que representa o tipo de erro, e a mensagem de erro é uma cadeia de caracteres que representa a mensagem de erro.

Propriedades 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.

Nome da função
Descrição
isSignedInUser
Determina se o usuário está conectado ao serviço no momento e retorna um valor booleano correspondente.
getImsToken
Recupera a autenticação imsToken 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.
signIn
Inicia o processo de entrada do usuário. Esta função usa o ImsAuthProps para mostrar autenticação em um pop-up ou em um recarregamento de página completo.
signOut
Desconecta o usuário do serviço, invalidando seu token de autenticação e exigindo que ele entre novamente para acessar recursos protegidos. Chamar essa função recarregará a página atual.
refreshToken
Atualiza o token de autenticação do usuário conectado no momento, evitando a expiração e garantindo acesso ininterrupto aos recursos protegidos. Retorna um novo token de autenticação que pode ser usado para solicitações subsequentes.

Tipo 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

Propriedade
Tipo
Obrigatório
Descrição
id
string
Sim
Identificador exclusivo do fragmento de conteúdo
path
string
Sim
Caminho completo para o fragmento no DAM (por exemplo, /content/dam/my-project/article-fragment)
title
string
Sim
Exibir título do fragmento de conteúdo
model
ModeloDeFragmentoDeConteúdo
Sim
Informações completas sobre o modelo de fragmento de conteúdo
variations
cadeia de caracteres[]
Sim
Matriz de nomes de variação disponíveis para este fragmento (por exemplo, ["master", "mobile", "tablet"])
status
string
Sim
Status de publicação do fragmento (por exemplo, “PUBLISHED”, “MODIFIED”, “DRAFT”, “NEW”, “UNPUBLISHED”)
publishedBy
string
Sim
Email/nome de usuário do usuário que publicou o fragmento
publishedByFullName
string
Sim
Nome completo do usuário que publicou o fragmento
publishedDate
número
indefinido
Sim
modifiedBy
string
Sim
Email/nome de usuário do usuário que modificou o fragmento pela última vez
modifiedByFullName
string
Sim
Nome completo do usuário que modificou o fragmento pela última vez
modifiedDate
número
Sim
Carimbo de data e hora (em milissegundos) quando o fragmento foi modificado pela última vez
createdBy
string
Sim
Email/nome de usuário do usuário que criou o fragmento
createdByFullName
string
Sim
Nome completo do usuário que criou o fragmento
createdDate
número
Sim
Carimbo de data e hora (em milissegundos) quando o fragmento foi criado
selectedFields
Record<string, unknown>
Não
Mapa de nome-campo → valor-campo para os campos que o usuário escolheu na etapa de seleção de campo. As chaves são nomes de campo; os valores espelham a matriz 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.
selectedTemplateId
string | null
Não
ID do modelo HTML escolhido para este fragmento no seletor de modelos do painel Detalhes Rápidos (upstream @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

Propriedade
Tipo
Obrigatório
Descrição
name
string
Sim
Nome de exibição do modelo de fragmento de conteúdo
id
string
Sim
Identificador exclusivo do modelo
path
string
Não
Caminho completo para a definição do modelo (por exemplo, /conf/my-project/settings/dam/cfm/models/article)
tagIds
cadeia de caracteres[]
Não
Matriz de IDs de tag associadas ao modelo

Exemplo 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:

recommendation-more-help
experience-manager-cloud-service-help-main-toc