Personalizzare i componenti core dei moduli adattivi

La personalizzazione dei componenti core dei moduli adattivi consente di personalizzare le funzionalità predefinite in base alle proprie esigenze specifiche. Questa guida illustra come personalizzare tali componenti, per creare un’esperienza più personale.

Prerequisito

Prima di iniziare a personalizzare i componenti core dei moduli adattivi,

Personalizzare un componente core per moduli adattivi

Segui i passaggi seguenti per modificare l’aspetto, il comportamento e la funzionalità di un componente core per moduli adattivi.

  1. Identificare e duplicare il componente core

    Durante la configurazione dell’ambiente di sviluppo, hai creato un progetto basato su Archetipo. Nell’Archetipo progetto AEM, identifica il componente core specifico che desideri personalizzare. Una volta identificato, crea un duplicato del componente all’interno del progetto basato su Archetipo AEM. Mantienilo in parallelo agli altri componenti core per moduli adattivi. Questo passaggio assicura che le attività di personalizzazione non influiscano sul componente originale, consentendoti di sperimentare liberamente.

  2. Personalizzare il componente copiato

    Apri il componente duplicato e inizia ad apportare le modifiche necessarie in base alle tue esigenze:

    • Personalizza struttura HTML: personalizza la struttura HTML in base alle tue esigenze di progettazione, rispettando allo stesso tempo le procedure di stile BEM (Block Element Modifier) per il codice gestibile e scalabile.
    • Aggiorna etichetta: aggiorna l’etichetta del componente per fornire un nome chiaro e descrittivo per la versione personalizzata. Consulta il Modello di etichetta OOTB (preconfigurata) fornito per coerenza.
    • Personalizza widget: regola il widget utilizzato all’interno del componente (menu a discesa, caselle di controllo) per allinearlo al caso d’uso specifico. Consulta la sezione esempio di implementazione di un widget di riferimento.
    • Testo guida e descrizioni comandi: personalizza il testo della guida o le descrizioni comandi associate al componente per offrire agli utenti contesto e indicazioni. Utilizza il modello di testo guida OOTB (preconfigurata) come punto di partenza.
    • Attributi dei dati: incorpora tutti gli attributi di dati necessari all’interno degli elementi HTML del componente. Questi attributi sono fondamentali per il corretto funzionamento del componente in fase di esecuzione. Per comprendere il ruolo degli attributi di dati nei componenti core per moduli adattivi, consulta la documentazione.
  3. Implementare la logica di back-end

    Se la personalizzazione richiede una logica di back-end, puoi estendere i modelli sling esistenti. Per integrare perfettamente la funzionalità desiderata nel componente personalizzato, fai riferimento all’esempio fornito.

  4. Configurare la finestra di dialogo del componente

    Configura la finestra di dialogo associata al componente personalizzato. Utilizza l’esempio finestra di dialogo del componente fornito nella documentazione per garantire che le interazioni e le impostazioni dell’utente siano gestite in modo appropriato.

  5. Distribuire e testare il componente nell’ambiente di sviluppo locale

    Utilizzare Maven per generare e distribuire il componente nell’ambiente di sviluppo locale. Dopo la distribuzione del componente, crea un modulo adattivo per testare il componente personalizzato.

  6. Distribuire il componente personalizzato nell’ambiente di produzione

    Dopo aver testato il componente nell’ambiente di sviluppo locale, distribuiscilo negli ambienti di produzione.

recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c