Componenti core dei moduli adattivi adaptive-forms-core-components-introduction

Utilizzando i componenti core dei moduli adattivi in Adobe Experience Manager, puoi creare esperienze di iscrizione coinvolgenti.

Componenti core overview

In Adobe Experience Manager (AEM), i componenti sono i blocchi predefiniti utilizzati per creare pagine e moduli. Forniscono agli autori un modo semplice e potente per creare e gestire i contenuti, fornendo allo stesso tempo agli sviluppatori la flessibilità e l’estensibilità necessarie per creare componenti personalizzati. Questi sono progettati per velocizzare i tempi di sviluppo e ridurre i costi di manutenzione per siti web e moduli, per essere flessibili e possono essere facilmente personalizzati in base alle esigenze specifiche di un sito web e di un modulo.

I componenti core sono inoltre progettati per essere reattivi e supportano un’ampia gamma di dispositivi, tra cui desktop, tablet e smartphone. Inoltre, rispettano gli standard web e le best practice più recenti, rendendoli una soluzione solida e affidabile per la creazione di contenuti web.

Nel complesso, i componenti core sono uno strumento essenziale per la creazione e la gestione dei contenuti web in AEM, potente e flessibile, che consente di ridurre i tempi di sviluppo e i costi di manutenzione e offire un’ esperienza utente ottimale a coloro che visitano il sito web.

Componenti core dei moduli adattivi

I componenti core dei moduli adattivi sono un set di 29 componenti open-source compatibili con BEM creati sulle basi dei componenti core WCM di Adobe Experience Manager. Sono progettati appositamente per la creazione di moduli adattivi, ossia moduli che si adattano al dispositivo, al browser e alle dimensioni dello schermo dell’utente.

Questi componenti possono essere utilizzati per creare esperienze eccezionali di acquisizione e registrazione dei dati fornendo un’ampia gamma di opzioni per i campi modulo, compresi campi di testo, caselle di controllo, menu a discesa e altro ancora. Includono anche funzioni quali convalida, logica condizionale e progettazione reattiva, che possono essere utilizzate per creare moduli intuitivi e facili da usare.

Inoltre, poiché questi componenti sono open-source, gli sviluppatori possono personalizzare ed estendere facilmente i componenti in base alle esigenze specifiche della propria organizzazione. Questi componenti sono inoltre basati sulla metodologia BEM, che garantisce la scalabilità e la manutenzione dei componenti.

immagine del modulo adattivo

Funzioni features

Pronti per la produzione
I componenti core dei moduli adattivi sono 24 componenti WCM affidabili.
Compatibile con cloud
Disponibile per AEM Forms as a Cloud Service.
Versatili
I componenti rappresentano concetti generici con i quali gli autori di moduli possono assemblare quasi tutti i layout.
Configurabili
I criteri di contenuto a livello di modello definiscono quali funzioni sono utilizzabili e quali no.
Accessibili
Forniscono etichette ARIA, supportano la navigazione da tastiera e testo per tecnologie di assistenza come le utilità per la lettura dello schermo.
Con applicazione tema
I componenti implementano il sistema di stili e il markup segue le convenzioni BEM CSS.
Personalizzabili
Diversi modelli consentono una facile personalizzazione, dalla modficia del codice HTML al riutilizzo avanzato delle funzionalità.
Controllo delle versioni
I criteri di controllo delle versioni garantiscono che i Componenti core non blocchino il tuo sito in fase di miglioramento di elementi che potrebbero influire su di te.
Open source
Se qualcosa non va come dovrebbe, suggerisci miglioramenti.

Vantaggi benefits

Le esperienze di acquisizione dei dati sono fondamentali per la generazione e la registrazione dei lead e i componenti core dei moduli adattivi offrono una soluzione potente per la creazione di moduli ottimizzati per l’acquisizione dei dati. Alcuni dei motivi per utilizzare i componenti core per creare queste esperienze sui componenti di base sono:

  • Disponibilità su GitHub: i componenti core dei moduli adattivi in AEM sono open-source e disponibili su GitHub, insieme a una documentazione completa. In questo modo gli sviluppatori possono comprendere più facilmente i componenti e il loro funzionamento e contribuire al loro sviluppo. Anche il sito web aemcomponents.dev è una risorsa preziosa, in cui gli sviluppatori possono vedere i componenti in azione e accedere alla documentazione dettagliata.

  • Modello BEM per attribuzione di stile: i componenti core seguono il modello BEM (Block Element Modifier) per lo stile, una metodologia consolidata e ampiamente utilizzata per l’organizzazione dei CSS. In questo modo gli sviluppatori possono comprendere più facilmente come sono organizzati gli stili e come modificarli in base alle proprie esigenze specifiche.

  • Nessuna dipendenza dalle librerie di terze parti: uno dei vantaggi dei componenti core è che non hanno dipendenza da librerie JavaScript di terze parti, inclusi JQuery e Underscore. Questo rende i componenti più veloci e leggeri, nonché più facili da integrare in un’implementazione AEM esistente.

  • Focus su prestazioni e accessibilità: i componenti core sono progettati tenendo presente le prestazioni e l’accessibilità, che si riflettono nei loro punteggi Google Lighthouse e web vitals elevati. Questo rende più facile per gli sviluppatori creare pagine web accessibili e dalle prestazioni elevate, che è sempre più importante nell’attuale panorama digitale.

  • Componenti modulo nel modello e nei temi di Sites 30: i componenti core supportano i componenti del modulo nel modello e nei temi di Sites 30, facilitando agli sviluppatori la creazione e la personalizzazione dei moduli all’interno di AEM.

  • Stile più semplice: lo stile dei componenti core è più semplice rispetto a quello delle controparti componenti di base. Il processo di creazione del tema è simile a Sites, con la possibilità di ereditare lo stesso tema/CSS dalla pagina Sites principale. Inoltre, il modello BEM per lo stile facilita la comprensione e la modifica degli stili.

  • Accessibilità: i componenti core dei moduli adattivi supportano gli standard e le linee guida di accessibilità per garantire che i moduli possano essere utilizzati da persone con disabilità, incluse quelle che utilizzano tecnologie per l’accessibilità, come le utilità per la lettura dello schermo.

  • Controllo delle versioni: puoi creare e gestire più versioni di moduli adattivi basati su componenti core, partecipare a discussioni collaborative tramite commenti e allegare annotazioni a componenti modulo specifici, in modo da migliorare l’esperienza complessiva di creazione del modulo.

Componenti disponibili: un raggruppamento per tipo di componente

La versione corrente di AEM Forms contiene i seguenti componenti core: Componenti di base e Componenti blocco modulo (Edge Delivery Services).

Componenti
Componenti di base
Componenti core
Componenti blocco modulo
Informazioni aggiuntive
Blocco Adobe Sign
✔️
L’integrazione di Adobe Sign è disponibile solo per i componenti di base.
Pannello a soffietto
✔️
✔️
Per i componenti di base, puoi configurare il layout del pannello a soffietto nelle proprietà dei componenti del pannello.
Frammento di modulo adattivo
✔️
✔️
Per i componenti di base, puoi aggiungere un frammento dal Browser risorse.
reCAPTCHA per modulo adattivo
✔️
✔️
✔️
Per i componenti di base, utilizza il componente Captcha per aggiungere Google reCaptcha a un modulo.
Pulsante
✔️
✔️
✔️
Grafico
✔️
Casella di controllo
✔️
✔️
Gruppo di caselle di selezione
✔️
✔️
✔️
Per i componenti di base, utilizza il componente casella di controllo per aggiungere più caselle di controllo
Campo immissione data
✔️
Per i componenti core, utilizza il componente Selettore data. È inoltre possibile aggiungere i componenti casella di testo o casella numerica per acquisire il giorno, il mese e l’anno.
Selettore data
✔️
✔️
✔️
Elenco a discesa
✔️
✔️
✔️
E-mail
✔️
✔️
✔️
Allegato file
✔️
✔️
✔️
Elenco dei file allegati
✔️
Piè di pagina
✔️
✔️
✔️
Segnaposto Nota a piè di pagina
✔️
Contenitore modulo
✔️
✔️
✔️
Per i componenti di base, utilizza il componente Pannello principale.
Titolo modulo
✔️
✔️
Per i componenti di base, utilizza il componente Titolo.
hCaptcha
✔️
✔️
Intestazione
✔️
✔️
✔️
Schede orizzontali
✔️
✔️
Per i componenti base, puoi configurare le schede con il layout in alto (schede orizzontali) nelle proprietà dei componenti del pannello.
Immagine
✔️
✔️
✔️
Scelta immagine
✔️
Pulsante Avanti
✔️
✔️
Utilizza il componente procedura guidata per i pulsanti Avanti e Indietro per spostarti tra più pannelli.
Casella numerica
✔️
✔️
✔️
Stepper numerico
✔️
Pannello
✔️
✔️
✔️
Casella password
✔️
✔️
Telefono
✔️
✔️
✔️
Pulsante Indietro
✔️
✔️
Utilizza il componente procedura guidata per i pulsanti Avanti e Indietro per spostarti tra più pannelli.
Gruppo pulsanti di scelta
✔️
✔️
✔️
Pulsante Ripristina
✔️
✔️
✔️
Firma a mano
✔️
Separatore
✔️
Usa componente WCM Separatore
Pulsante Invia
✔️
✔️
✔️
Passaggio di riepilogo
✔️
Interruttore
✔️
✔️
Tabella
✔️
Termini e condizioni
✔️
✔️
Testo
✔️
✔️
✔️
Casella di testo
✔️
✔️
✔️
Captcha Turnstile
✔️
Captcha Turnstile è disponibile solo per i componenti di base.
Schede verticali
✔️
✔️
Per i componenti di base, puoi configurare le schede con layout a di sinistra (schede verticali) nelle proprietà dei componenti del pannello
Procedura guidata
✔️
✔️
✔️
Per i componenti base, puoi configurare il layout della procedura guidata nelle proprietà dei componenti del pannello
NOTE
  • Oltre ai componenti elencati sopra, il Blocco moduli supporta come componenti tutti i tipi di input HTML5 e aree testo validi.
  • Hai bisogno di un componente non elencato sopra? Richiedilo inviando un’e-mail a aem-forms-ea@adobe.com dall’indirizzo ufficiale.

Editor moduli di facile utilizzo

L’editor per moduli adattivi basati su Componenti core è simile a quello già utilizzato per la creazione di pagine AEM Sites. Ecco cosa ottieni:

  • Elementi e impostazioni familiari dell’interfaccia utente: quando configuri le proprietà per i componenti modulo, la finestra di dialogo delle proprietà ha l’aspetto di quella utilizzata per i componenti core WCM. Questo consente di trovare più rapidamente le opzioni necessarie. Come i componenti core WCM, per i componenti modulo la finestra di dialogo delle proprietà viene visualizzata al centro dell’editor con schede chiare che separano le opzioni di base e avanzate, il testo guida e le informazioni di accessibilità, il tutto in un formato a schede di facile navigazione.

  • Editor regole: è possibile aggiungere funzionalità logiche e dinamiche ai moduli senza la scrittura di codice. Puoi utilizzare l’editor di regole integrato per:

    • Mostrare o nascondere i campi in base alle scelte dell’utente
    • Attivare o disattivare un oggetto
    • Impostare un valore per un oggetto
    • Eseguire calcoli
    • Impostare la proprietà di un oggetto
    • Convalidare l’immissione di dati
    • Richiamare un servizio (richiamare funzionalità esterna)
    • Utilizzare funzioni integrate (funzioni predefinite per le attività comuni)
    • Utilizzare funzioni personalizzate (codice personalizzato per esigenze specifiche)
    • Convalidare campi e pannelli (verificare che i dati soddisfino i requisiti)
    • Convalidare il valore di un oggetto
    • Eseguire funzioni per calcolare il valore di un oggetto
    • Richiamare un modello dati del modulo (FDM) ed eseguire un’operazione
    • Aggiungere in modo dinamico stili (modificare l’aspetto in base alle condizioni)
    • Creare altre regole (azioni a catena e logica)
    • e altro ancora!

    L’editor di regole non dispone dell’editor di codice. Puoi utilizzare funzioni personalizzate per aggiungere un codice personale all’editor di regole per esigenze specifiche.

  • Moduli precompilati: puoi compilare automaticamente alcuni campi in un modulo con i dati esistenti quando un utente lo apre. In questo modo gli utenti possono risparmiare tempo e fatica in quanto non è necessario immettere manualmente informazioni che potrebbero essere già disponibili. L’editor dei Componenti core fornisce un servizio di precompilazione OOTB per compilare i campi del modulo con l’aiuto di un modello dati del modulo. Puoi anche creare servizi di precompilazione personalizzati per scenari più complessi.

  • Documento di record (DoR): un documento di record (DoR) fa riferimento a una rappresentazione formale e stampabile dei dati inviati tramite il modulo. Funge da record permanente delle informazioni immesse da un utente, fornendo un’istantanea dei dati inviati in un formato semplice, in genere un documento PDF. Puoi utilizzare l’editor per configurare facilmente un modello personalizzato o utilizzare un modello OOTB per generare un documento di record.

  • Modello dati modulo: un modello dati di moduli adattivi (FDM) funge da ponte tra i moduli adattivi e le origini dati. In sostanza, definisce la struttura e l’organizzazione dei dati che i moduli raccolgono e con cui interagiscono. Puoi utilizzare l’editor per collegare facilmente il modulo a un modello dati modulo (FDM).

  • Invio dei moduli: l’invio di un modulo si riferisce al processo con cui gli utenti completano e inviano i moduli compilati. Questo attiva una serie di azioni definite nella configurazione del modulo, che determinano l’archiviazione o l’elaborazione dei dati inviati. L’editor dei moduli adattivi offre diverse opzioni per la configurazione dell’invio dei moduli. Alcune delle azioni di invio più comuni sono:

  • Componenti core per moduli adattivi nell’Editor pagina di Sites: puoi abilitare e utilizzare i componenti core per moduli adattivi nell’Editor pagina di AEM e nei frammenti di esperienza di AEM per creare direttamente un’esperienza di acquisizione dati e una pagina Sites.

    embed

    https://video.tv.adobe.com/v/3419284?quality=12&learn=on

Abilitare i componenti core per moduli adattivi

Abilitando i componenti core dei moduli adattivi su AEM Forms as a Cloud Service, è possibile iniziare a creare, pubblicare e distribuire componenti core basati su moduli adattivi e moduli headless utilizzando le istanze del Cloud Service di AEM Forms su più canali. Per istruzioni dettagliate sull’abilitazione dei componenti core dei moduli adattivi, consulta Abilita i componenti core dei moduli adattivi nell’ambiente di sviluppo locale di AEM Forms as a Cloud Service.

Di seguito sono riportati i requisiti dei componenti core dei moduli adattivi.

Versione di AEM
Componente aggiuntivo per AEM Forms
Componenti core dei moduli adattivi
AEM as a Cloud Service
Forms: registrazione digitale
Versione 2.0.10+
AEM 6.5
Componente aggiuntivo Forms
Versione 1.1.12+

Se la versione dell’SDK del Cloud Service di AEM è precedente alla versione 2023.02.0, assicurati di aver abilitato il flag prerelease nel tuo ambiente, poiché i componenti core dei moduli adattivi facevano parte della versione prerelease precedente alla versione 2023.02.0.

Creare componenti core basati sul modulo adattivo

Puoi eseguire le seguenti azioni in entrambi gli ambienti AEM Forms as a Cloud Service o AEM 6.5 Forms:

Azione
Versione AEM Forms
Creare un modulo adattivo indipendente
AEM Forms as Cloud Service
Creare un modulo adattivo nella pagina AEM Sites
AEM 6.5 Forms, AEM Forms as Cloud Service
Creare un modulo adattivo in Frammento di esperienza AEM
AEM 6.5 Forms, AEM Forms as Cloud Service
Convertire un modulo adattivo in un Frammento di esperienza
AEM 6.5 Forms, AEM Forms as Cloud Service
recommendation-more-help
d2be9096-a81e-404b-9952-d8925af7219c