Personalização da criação de página customizing-page-authoring

O Adobe Experience Manager as a Cloud Service fornece mecanismos que permitem personalizar a funcionalidade de criação de página (e os consoles) da sua instância de criação.

Clientlibs clientlibs

As clientlibs permitem estender a implementação padrão para habilitar uma nova funcionalidade, ao mesmo tempo em que reutiliza as funções, objetos e métodos padrão.

Ao personalizar, você pode criar sua própria clientlib em /apps. A nova clientlib deve:

Consulte Usando Bibliotecas do Lado do Cliente no AEM as a Cloud Service.

Sobreposições overlays

As sobreposições são baseadas nas definições de nó e permitem sobrepor a funcionalidade padrão em /libs com sua própria funcionalidade personalizada em /apps.

Ao criar uma sobreposição, uma cópia 1:1 do original não é necessária, pois a fusão de recursos de sling permite a herança.

Para obter mais informações, consulte o conjunto de documentação JS.

Para obter mais informações sobre sobreposições, consulte Sobreposições para Adobe Experience Manager as a Cloud Service.

Adicionar nova camada (modo) add-new-layer-mode

Quando você está editando uma página, há vários modos disponíveis. Estes modos são implementados usando camadas. Eles permitem acesso a diferentes tipos de funcionalidade para o mesmo conteúdo de página. Os modos AEM padrão incluem Editar, Layout, Desenvolvedor, Timewarp, Status da Live Copy e Direcionamento.

Exemplo de camada: status da Live Copy layer-example-live-copy-status

Uma instância AEM padrão fornece a camada MSM. Isso acessa os dados relacionados ao gerenciamento multissite e os destaca na camada.

Para vê-la em ação, edite qualquer cópia de idioma no conteúdo de amostra do WKND e selecione o modo Status da Live Copy.

Você pode encontrar a definição da camada MSM (para referência) em:

/libs/wcm/msm/content/touch-ui/authoring/editor/js/msm.Layer.js

Amostra de código code-sample

Este é um exemplo de pacote que mostra como criar uma camada (modo) para exibição do MSM.

Você pode encontrar o código desta página no GitHub.

Adicionar nova categoria de seleção ao navegador de ativos add-new-selection-category-to-asset-browser

O navegador de ativos mostra ativos de vários tipos/categorias (por exemplo, imagens e documentos). Os ativos também podem ser filtrados por essas categorias de ativos.

Amostra de código code-sample-1

aem-authoring-extension-assetfinder-flickr é um exemplo de pacote que mostra como adicionar um grupo ao localizador de ativos. Este exemplo conecta-se ao fluxo público do Flickr e os mostra no painel lateral.

Você pode encontrar o código desta página no GitHub.

Filtrar recursos filtering-resources

Ao criar páginas, o usuário geralmente deve selecionar entre os recursos em uma lista.

Para manter a lista em um tamanho razoável e também relevante para o caso de uso, um filtro pode ser implementado no formato de um predicado personalizado. Por exemplo, se o componente Granite pathbrowser for usado para permitir que o usuário selecione o caminho para um recurso específico, os caminhos apresentados poderão ser filtrados da seguinte maneira:

Para obter mais detalhes sobre como criar um predicado personalizado, consulte este artigo.

Adicionar nova ação a uma barra de ferramentas do componente add-new-action-to-a-component-toolbar

Cada componente geralmente tem uma barra de ferramentas que fornece acesso a uma variedade de ações que podem ser executadas nesse componente.

Amostra de código code-sample-2

aem-authoring-extension-toolbar-screenshot é um exemplo de pacote que mostra como criar uma ação personalizada na barra de ferramentas para renderizar componentes.

Você pode encontrar o código desta página no GitHub.

Adicionar novo editor no local add-new-in-place-editor

Editor padrão no local standard-in-place-editor

Em uma instalação padrão do AEM:

Veja a seguir um exemplo de definição de proporções de aspecto para o plug-in de recorte de imagem do componente de imagem.

   <cq:inplaceEditing
           jcr:primaryType="cq:InplaceEditingConfig"
           active="{Boolean}true"
           editorType="image">
           <config jcr:primaryType="nt:unstructured">
               <plugins jcr:primaryType="nt:unstructured">
                   <crop jcr:primaryType="nt:unstructured">
                       <aspectRatios jcr:primaryType="nt:unstructured">
                           <_x0031_6-10
                               jcr:primaryType="nt:unstructured"
                               name="16 : 10"
                               ratio="0.625"/>
                       </aspectRatios>
                   </crop>
               </plugins>
           </config>
   </cq:inplaceEditing>

Criação de um novo editor no local creating-a-new-in-place-editor

Para implementar um novo editor no local (na clientlib):

Amostra de código para criar um novo editor no local code-sample-for-creating-a-new-in-place-editor

aem-authoring-extension-inplace-editor é um exemplo de pacote que mostra como criar um editor local no AEM.

Você pode encontrar o código desta página no GitHub.

Adicionar uma nova ação de página add-a-new-page-action

Para adicionar uma nova ação de página à barra de ferramentas da página, por exemplo, uma ação Voltar aos Sites (console).

Amostra de código code-sample-3

aem-authoring-extension-header-backtosites é um exemplo de pacote que mostra como criar uma ação de barra de cabeçalho personalizada para voltar ao console de Sites.

Você pode encontrar o código desta página no GitHub.

Personalizar a solicitação para o fluxo de trabalho de ativação customizing-the-request-for-activation-workflow

O workflow predefinido, Solicitação de ativação:

Para personalizar o comportamento nessa ativação, é possível sobrepor o fluxo de trabalho Solicitação de ativação: