DocumentazioneAEM as a Cloud ServiceGuida utente

Definizione del componente component-definition

Last update: Thu Nov 06 2025 00:00:00 GMT+0000 (Coordinated Universal Time)
  • Si applica a:
  • Experience Manager as a Cloud Service

Creato per:

  • Amministratore
  • Sviluppatore

Informazioni dettagliate sul contratto JSON tra la definizione del componente e l’editor universale.

Panoramica overview

Il file component-definition.json definisce i componenti disponibili per gli autori dei contenuti per il progetto. Questo documento spiega in dettaglio lo scopo di questo file e come viene utilizzato dall’editor universale per presentare agli autori i componenti per l’authoring delle pagine.

TIP
Per una panoramica del processo di modellazione del contenuto, consulta il documento Modellazione del contenuto per l’authoring di WYSIWYG con progetti Edge Delivery Services.
TIP
Non è necessario creare un file component-definition.json personalizzato da zero. Il progetto standard utilizzato per avviare il progetto contiene un file component-definition.json perfettamente funzionante che puoi adattare in base alle tue esigenze.

Definizione del componente di esempio example

Di seguito è riportato un esempio di component-definition.json completo, ma semplice.

{
  "groups":[
    {
      "title":"General Components",
      "id":"general",
      "components":[
        {
          "title":"Text",
          "id":"text",
          "model": "text",
          "filter": "texts",
          "plugins":{
            "aem":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            },
            "aem65":{
              "page":{
                "resourceType":"wknd/components/text",
                "template":{
                  "text":"Default Text",
                  "name":"Text"
                }
              }
            }
          }
        }
      ]
    }
  ]
}

groups groups

groups definisce i gruppi di componenti visualizzati dall’autore nell’editor universale quando si fa clic sull’icona Aggiungi nel pannello delle proprietà dell’editor per aggiungere un nuovo componente a una pagina. I gruppi consentono di organizzare i componenti. I gruppi comuni possono essere Componenti generali e Componenti avanzati.

  • title definisce la descrizione testuale del gruppo mostrato nell’interfaccia utente dell’editor.
  • id identifica in modo univoco il gruppo.

components components

components definisce quali componenti appartengono a un gruppo.

  • title definisce la descrizione testuale del componente mostrato nell’interfaccia utente.

  • id identifica in modo univoco il componente.

    • Il modello di componente dello stesso id definisce i campi del componente.
    • Poiché è univoco, può essere utilizzato, ad esempio, in una definizione di filtro per determinare quali componenti possono essere aggiunti a un contenitore.

  • model definisce quale modello viene utilizzato con il componente.

    • Il modello viene così mantenuto centralmente nella definizione di componente e non è necessario specificarlo nella strumentazione.
    • In questo modo, inoltre, sarà possibile spostare i componenti tra contenitori diversi.

  • filter definisce quale filtro deve essere utilizzato con il componente.

plugins plugins

plugins definisce quale plug-in è responsabile della persistenza del componente. I plug-in più comuni includono:

page oppure cf page-cf

Una volta definito il plugin, devi indicare se è correlato alla pagina o al frammento.

  • page indica che il componente è contenuto nella pagina corrente.
  • cf indica che il componente è correlato al contenuto all’interno di un frammento di contenuto.

page page

Se il componente è contenuto nella pagina, puoi fornire le seguenti informazioni.

  • resourceType definisce lo Sling resourceType utilizzato per il rendering del componente.
  • template definisce la chiave o i valori facoltativi da scrivere automaticamente nel componente appena creato e definisce quale filtro e/o modello applicare al componente.
    • Utile per testi esplicativi, di esempio o segnaposto.

template template

Fornendo coppie chiave/valore facoltative, template può scriverle automaticamente nel nuovo componente. È, inoltre, possibile specificare i seguenti valori facoltativi.

cf cf

Se il componente è correlato al contenuto all’interno di un frammento di contenuto, puoi fornire le seguenti informazioni.

  • name definisce un nome facoltativo salvato nel JCR per il componente appena creato.
    • Solo informativo e non generalmente mostrato nell’interfaccia utente come lo è il title.
  • cfModel definisce il modello di frammento di contenuto per il componente appena creato.
  • cfFolder definisce in quale cartella deve essere creato il frammento di contenuto.
  • title definisce il titolo del nuovo frammento di contenuto.
  • description definisce una descrizione del nuovo frammento di contenuto.
  • template definisce una chiave o valori facoltativi da scrivere automaticamente nel frammento di contenuto appena creato.
    • Utile per testi esplicativi, di esempio o segnaposto.

cf Può essere implicito cf-implied

Se la pagina è strumentata per puntare a un campo di riferimento, cf verrà presupposto.

<div data-aue-resource="urn:aem:/content" data-aue-type="container" data-aue-prop="field"></div>

In questo caso, cf è presupposto poiché data-aue-prop punta a un campo di riferimento. Senza data-aue-prop, l’editor universale presupporrà page, poiché in tal caso i componenti non sono collegati tramite un campo di riferimento.

<div data-aue-resource="urn:aem:/content" data-aue-type="container"></div>

I componenti sono semplicemente sottonodi al di sotto della risorsa.

recommendation-more-help
fbcff2a9-b6fe-4574-b04a-21e75df764ab