Creare un componente personalizzato nell’ambiente di authoring WYSIWYG

Questa funzione è disponibile tramite il programma per i primi utilizzatori. Per richiedere l'accesso, invia un'e-mail con il nome dell'organizzazione GitHub e il nome dell'archivio dall'indirizzo ufficiale a aem-forms-ea@adobe.com . Ad esempio, se l’URL dell’archivio è https://github.com/adobe/abc, il nome dell’organizzazione è adobe e il nome dell’archivio è abc.

I moduli di Edge Delivery Services offrono funzionalità di personalizzazione e permettono agli sviluppatori front-end di creare componenti per moduli su misura. Questi componenti personalizzati si integrano direttamente nell’esperienza di authoring WYSIWYG, consentendo agli autori di moduli di aggiungerli, configurarli e gestirli facilmente nell’editor di moduli. I componenti personalizzati permettono agli autori di ottimizzare le funzionalità dei moduli. Inoltre, assicurano un processo di authoring fluido e intuitivo.

Questo documento illustra i passaggi necessari per creare componenti personalizzati assegnando uno stile ai componenti per moduli HTML nativi, migliorando l’esperienza utente e aumentando l’impatto visivo dei moduli stessi.

Prerequisiti

Prima di iniziare a creare il componente personalizzato, è necessario:

Creare un componente personalizzata

Quando si aggiunge nell’editor universale un componente personalizzato, questo diventa disponibile per gli autori che potranno utilizzarlo per progettare i moduli. Per aggiungere un componente personalizzato, occorre registrarlo, definirne le proprietà e configurare la posizione in cui può essere utilizzato. Per creare componenti personalizzati, segui i passaggi seguenti:

1. Aggiungere la struttura per il nuovo componente personalizzato
2. Definire le proprietà per l’authoring del componente personalizzato
3. Rendere visibile il componente personalizzato nell’elenco dei componenti WYSIWYG
4. Registrare il componente personalizzato
5. Aggiungere il comportamento runtime del componente personalizzato

Prendiamo ad esempio la creazione di un nuovo componente personalizzato denominato Intervallo. Il componente Intervallo viene visualizzato come una linea retta e mostra valori quali minimo, massimo o il valore selezionato.

Alla fine di questo articolo avrai appreso a creare componenti personalizzati da zero.

1. Aggiungere la struttura per il nuovo componente personalizzato

Prima di poter utilizzare un componente personalizzato, è necessario registrarlo in modo che l’editor universale lo riconosca come opzione disponibile. A tale scopo è necessaria una definizione del componente, che include un identificatore univoco, le proprietà predefinite e la struttura. Per rendere il componente personalizzato disponibile per l’authoring dei moduli, segui i passaggi riportati di seguito:

Dopo aver aggiunto la definizione del componente, il file _range.json è il seguente:

{
  "definitions": [
    {
      "title": "Range",
      "id": "range",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/fd/components/form/numberinput/v1/numberinput",
            "template": {
              "jcr:title": "Range",
              "fieldType": "number-input",
              "fd:viewType": "range",
              "enabled": true,
              "visible": true
            }
          }
        }
      }
    }
  ]
}

2. Definizione delle proprietà per l’authoring del componente personalizzato

Il componente personalizzato include un modello di componente che specifica quali proprietà possono essere configurate dall’autore del modulo. Queste proprietà vengono visualizzate nella finestra di dialogo Proprietà dell’editor universale, consentendo agli autori di modificare impostazioni quali etichette, regole di convalida, stili e altri attributi. Per definire le proprietà:

Aggiungere proprietà personalizzate per il componente personalizzato

Le proprietà personalizzate ti consentono di definire comportamenti specifici in base ai valori impostati nella finestra di dialogo Proprietà di un componente. Questo consente di estendere le funzionalità del componente e le opzioni di personalizzazione.

In questo esempio, al componente Intervallo viene aggiunto il Valore passaggio come proprietà personalizzata.

Per aggiungere la proprietà personalizzata Valore passaggio, aggiungi il modello del componente con le seguenti righe di codice nel file _<component>.json:

      {
      "component": "number",
      "name": "stepValue",
      "label": "Step Value",
      "valueType": "number"
      }

Lo snippet JSON definisce una proprietà personalizzata denominata Valore passaggio per un componente Intervallo. Di seguito è riportata la suddivisione di ciascun campo:

Ora puoi utilizzare stepValue come proprietà personalizzata nelle proprietà JSON di range.js e implementarne il comportamento dinamico in base al relativo valore in fase di esecuzione.

Di conseguenza, il file _range.json finale, dopo l’aggiunta della definizione del componente, del modello del componente e delle proprietà personalizzate, è il seguente:

 {
  "definitions": [
    {
      "title": "Range",
      "id": "range",
      "plugins": {
        "xwalk": {
          "page": {
            "resourceType": "core/fd/components/form/numberinput/v1/numberinput",
            "template": {
              "jcr:title": "Range",
              "fieldType": "number-input",
              "fd:viewType": "range",
              "enabled": true,
              "visible": true
            }
          }
        }
      }
    }
  ],
  "models": [
    {
      "id": "range",
      "fields": [
        {
          "component": "container",
          "name": "basic",
          "label": "Basic",
          "collapsible": false,
          "...": "../../../../models/form-common/_basic-input-fields.json"
         {
           "component": "number",
           "name": "stepValue",
            "label": "Step Value",
             "valueType": "number"
}
        },
        {
          "...": "../../../../models/form-common/_help-container.json"
        },
        {
          "component": "container",
          "name": "validation",
          "label": "Validation",
          "collapsible": true,
          "...": "../../../../models/form-common/_number-validation-fields.json"
        }
      ]
    }
  ]
}

3. Rendere visibile il componente personalizzato nell’elenco dei componenti WYSIWYG.

Un filtro definisce la sezione in cui il componente personalizzato può essere utilizzato nell’editor universale. In questo modo il componente può essere utilizzato solo nelle sezioni appropriate, mantenendo la struttura e l’usabilità.

Per fare in modo che il componente personalizzato venga visualizzato nell’elenco dei componenti disponibili durante l’authoring del modulo WYSIWYG:

 "filters": [
    {
      "id": "form",
      "components": [
        "captcha",
        "checkbox",
        "checkbox-group",
        "date-input",
        "drop-down",
        "email",
        "file-input",
        "form-accordion",
        "form-button",
        "form-fragment",
        "form-image",
        "form-modal",
        "form-reset-button",
        "form-submit-button",
        "number-input",
        "panel",
        "plain-text",
        "radio-group",
        "rating",
        "telephone-input",
        "text-input",
        "tnc",
        "wizard",
        "range"
      ]
    }
  ]

4. Registrazione del componente personalizzato

Per consentire al blocco modulo di riconoscere il componente personalizzato e caricarne le proprietà definite nel modello di componente durante l’authoring, aggiungi il valore fd:viewType dalla definizione del componente al file mappings.js.
Per registrare un componente:

let customComponents = ["range"];
const OOTBComponentDecorators = ['file-input',
                                 'wizard',
                                 'modal', 'tnc',
                                'toggleable-link',
                                'rating',
                                'datetime',
                                'list',
                                'location',
                                'accordion'];

Dopo aver completato i passaggi precedenti, il componente personalizzato viene visualizzato nell’elenco dei componenti del modulo all’interno dell’editor universale. Puoi quindi trascinarlo nella sezione del modulo.

La schermata seguente mostra le proprietà del componente range aggiunto al modello di componente, che specifica le proprietà che l’autore del modulo può configurare.:

Ora puoi definire il comportamento runtime del componente personalizzato aggiungendo stile e funzionalità.

5. Aggiungere il comportamento runtime per il componente personalizzato

Puoi modificare i componenti personalizzati utilizzando markup predefiniti, come spiegato in Stile dei campi modulo. A questo scopo, puoi utilizzare CSS (Cascading Style Sheets) personalizzati e codice personalizzato per migliorare l’aspetto del componente. Per aggiungere i il comportamento runtime del componente:

Domande frequenti

Best practice

Byte aggiuntivi

ResourceType supportato

fieldType supportati

I fieldType supportati per i moduli sono:

Consulta anche