Personalizzazione dell’authoring delle pagine customizing-page-authoring

Adobe Experience Manager as a Cloud Service offre meccanismi che ti consentono di personalizzare la funzionalità di authoring delle pagine (e le console) della tua istanza di authoring.

Clientlibs clientlibs

Le clientlibs consentono di estendere l’implementazione predefinita per abilitare nuove funzionalità, riutilizzando le funzioni, gli oggetti e i metodi standard.

Durante la personalizzazione, puoi creare la tua libreria client in /apps.. La nuova libreria client deve:

Vedi Utilizzo delle librerie lato client in AEM as a Cloud Service.

Sovrapposizioni overlays

Le sovrapposizioni si basano sulle definizioni dei nodi e consentono di sovrapporre la funzionalità standard in /libs con la funzionalità personalizzata in /apps.

Durante la creazione di una sovrapposizione, non è necessaria una copia 1:1 dell'originale, in quanto sling resource merger consente l'ereditarietà.

Per ulteriori informazioni, vedere la documentazione JS.

Per ulteriori informazioni sulle sovrapposizioni, vedere Sovrapposizioni per Adobe Experience Manager as a Cloud Service.

Aggiungi nuovo livello (modalità) add-new-layer-mode

Quando modifichi una pagina, sono disponibili varie modalità. Queste modalità sono implementate utilizzando livelli. Consentono di accedere a diversi tipi di funzionalità per lo stesso contenuto della pagina. Le modalità AEM standard includono Modifica, Layout, Sviluppatore, Timewarp, Stato Live Copy e Targeting.

Esempio di livello: stato Live Copy layer-example-live-copy-status

Un'istanza AEM standard fornisce il livello MSM. Consente di accedere ai dati relativi alla gestione multisito e di evidenziarli nel livello.

Per vederlo in azione, puoi modificare qualsiasi copia per lingua nel contenuto di esempio WKND e selezionare la modalità Stato Live Copy.

Puoi trovare la definizione del livello MSM (per riferimento) in:

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

Esempio di codice code-sample

Questo è un pacchetto di esempio che mostra come creare un livello (modalità) per la vista MSM.

Puoi trovare il codice di questa pagina in GitHub.

Aggiungi nuova categoria selezione al browser risorse add-new-selection-category-to-asset-browser

Il browser Risorse mostra risorse di vari tipi/categorie (ad esempio, immagini e documenti). Le risorse possono essere filtrate anche in base a queste categorie di risorse.

Esempio di codice code-sample-1

aem-authoring-extension-assetfinder-flickr è un pacchetto di esempio che mostra come aggiungere un gruppo a Asset Finder. Questo esempio si connette al flusso pubblico di Flickr e lo mostra nel pannello laterale.

Puoi trovare il codice di questa pagina in GitHub.

Filtrare le risorse filtering-resources

Durante l’authoring delle pagine, l’utente deve spesso selezionare tra le risorse di un elenco.

Per mantenere l’elenco a una dimensione ragionevole e pertinente al caso d’uso, un filtro può essere implementato sotto forma di predicato personalizzato. Ad esempio, se il componente Granite pathbrowser viene utilizzato per consentire all'utente di selezionare il percorso di una particolare risorsa, i percorsi presentati possono essere filtrati nel modo seguente:

Per ulteriori dettagli sulla creazione di un predicato personalizzato, vedi questo articolo.

Aggiungere una nuova azione alla barra degli strumenti di un componente add-new-action-to-a-component-toolbar

Ogni componente dispone in genere di una barra degli strumenti che consente di accedere a una serie di azioni che possono essere eseguite su quel componente.

Esempio di codice code-sample-2

aem-authoring-extension-toolbar-screenshot è un pacchetto di esempio che mostra come creare un'azione della barra degli strumenti personalizzata per eseguire il rendering dei componenti.

Puoi trovare il codice di questa pagina in GitHub.

Aggiungi nuovo editor locale add-new-in-place-editor

Editor locale standard standard-in-place-editor

In un’installazione standard di AEM:

Di seguito è riportato un esempio di definizione delle proporzioni per il plug-in di ritaglio immagine del componente immagine.

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

Creazione di un nuovo editor locale creating-a-new-in-place-editor

Per implementare un nuovo editor locale (nella libreria client):

Esempio di codice per la creazione di un nuovo editor locale code-sample-for-creating-a-new-in-place-editor

aem-authoring-extension-inplace-editor è un pacchetto di esempio che mostra come creare un editor locale in AEM.

Puoi trovare il codice di questa pagina in GitHub.

Aggiungi un'azione Nuova pagina add-a-new-page-action

Per aggiungere una nuova azione di pagina alla barra degli strumenti della pagina, ad esempio, Torna a Sites (console).

Esempio di codice code-sample-3

aem-authoring-extension-header-backtosites è un pacchetto di esempio che mostra come creare un'azione personalizzata della barra di intestazione per tornare alla console Sites.

Puoi trovare il codice di questa pagina in GitHub.

Personalizzazione del flusso di lavoro Richiesta attivazione customizing-the-request-for-activation-workflow

Flusso di lavoro predefinito, Richiesta di attivazione:

Per personalizzare il comportamento di questa attivazione, puoi sovrapporre il flusso di lavoro Richiesta di attivazione: