Abilitare i componenti core per moduli adattivi :headding-anchor:enable-headless-adaptive-forms-on-aem-forms-cloud-service

Versione
Collegamento articolo
AEM 6.5
Fai clic qui
AEM as a Cloud Service
Questo articolo

Abilitando i componenti core Adaptive Forms su AEM Forms as a Cloud Service, puoi iniziare a creare, pubblicare e distribuire componenti core basati su Adaptive Forms e Headless Forms utilizzando le istanze del Cloud Service AEM Forms su più canali. Per utilizzare Headless Adaptive Forms è necessario un ambiente abilitato per i Componenti core Forms adattivi.

Considerazioni

Abilitare i componenti core Forms adattivi e i Forms adattativi headless :headding-anchor:enable-headless-forms

Per abilitare i componenti core Adaptive Forms e Headless Adaptive Forms per un ambiente AEM Forms as a Cloud Service, effettua le seguenti operazioni, nell’ordine elencato

Abilita componenti core e moduli adattivi headless

1. Clonare l’archivio as a Cloud Service Git di AEM Forms :headding-anchor:clone-git-repository

  1. Accedi a Cloud Manager e seleziona la tua organizzazione e il tuo programma.

  2. Passa alla scheda Pipeline dalla pagina Panoramica del programma, quindi fai clic sul pulsante Accedi a dati archivio per accedere e gestire il tuo archivio Git. La pagina include le seguenti informazioni:

    • URL dell’archivio Git di Cloud Manager.
    • Credenziali dell’archivio Git (nome utente e password), nome utente Git.

    Fare clic su Genera password per visualizzare o generare la password.

  3. Aprire il terminale o il prompt dei comandi sul computer locale ed eseguire il comando seguente:

    code language-shell
    git clone [Git Repository URL]
    

    Quando richiesto, immettere le credenziali. L'archivio viene clonato nel computer locale.

2. Aggiungere all’archivio Git le dipendenze dei Componenti core adattivi di Forms :headding-anchor:add-adaptive-forms-core-components-dependencies

  1. Apri la cartella dell’archivio Git in un editor di codice di testo normale. Ad esempio, Codice VS.

  2. Apri il file [AEM Repository Folder]\pom.xml per la modifica.

  3. Sostituire le versioni dei componenti core.forms.components.version, core.forms.components.af.version e core.wcm.components.version con le versioni specificate nella documentazione dei componenti core. Se il componente non esiste, aggiungi questi componenti.

    code language-xml
    <!-- Replace the version with the latest released version at https://github.com/adobe/aem-core-forms-components/tags -->
    
    <properties>
        <core.wcm.components.version>2.22.10</core.wcm.components.version>
        <core.forms.components.version>2.0.18</core.forms.components.version>
        <core.forms.components.af.version>2.0.18</core.forms.components.af.version>
    </properties>
    

    Menzionare la versione più recente dei componenti core di Forms

  4. Nella sezione delle dipendenze del file [AEM Repository Folder]\pom.xml, aggiungere le dipendenze seguenti e salvare il file.

    code language-xml
        <!-- WCM Core Component Examples Dependencies -->
            <dependency>
                <groupId>com.adobe.cq</groupId>
                <artifactId>core.wcm.components.examples.ui.apps</artifactId>
                <type>zip</type>
                <version>${core.wcm.components.version}</version>
            </dependency>
            <dependency>
                <groupId>com.adobe.cq</groupId>
                <artifactId>core.wcm.components.examples.ui.content</artifactId>
                <type>zip</type>
                <version>${core.wcm.components.version}</version>
            </dependency>
            <dependency>
                <groupId>com.adobe.cq</groupId>
                <artifactId>core.wcm.components.examples.ui.config</artifactId>
                <version>${core.wcm.components.version}</version>
                <type>zip</type>
            </dependency>
            <!-- End of WCM Core Component Examples Dependencies -->
            <!-- Forms Core Component Dependencies -->
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-core</artifactId>
                <version>${core.forms.components.version}</version>
            </dependency>
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-apps</artifactId>
                <version>${core.forms.components.version}</version>
                <type>zip</type>
            </dependency>
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-af-core</artifactId>
                <version>${core.forms.components.version}</version>
            </dependency>
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-af-apps</artifactId>
                <version>${core.forms.components.version}</version>
                <type>zip</type>
            </dependency>
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-examples-apps</artifactId>
                <type>zip</type>
                <version>${core.forms.components.version}</version>
            </dependency>
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-examples-content</artifactId>
                <type>zip</type>
                <version>${core.forms.components.version}</version>
            </dependency>
    <!-- End of AEM Forms Core Component Dependencies -->
    
  5. Apri il file [AEM Repository Folder]/all/pom.xml per la modifica. Aggiungere le dipendenze seguenti nella sezione <embeddeds> e salvare il file.

    code language-xml
    <!-- WCM Core Component Examples Dependencies -->
    
    <!-- inside plugin config of filevault-package-maven-plugin -->
    <!-- embed wcm core components examples artifacts -->
    
    <embedded>
        <groupId>com.adobe.cq</groupId>
        <artifactId>core.wcm.components.examples.ui.apps</artifactId>
        <type>zip</type>
        <target>/apps/${appId}-vendor-packages/content/install</target>
    </embedded>
    <embedded>
        <groupId>com.adobe.cq</groupId>
        <artifactId>core.wcm.components.examples.ui.content</artifactId>
        <type>zip</type>
        <target>/apps/${appId}-vendor-packages/content/install</target>
    </embedded>
    <embedded>
        <groupId>com.adobe.cq</groupId>
        <artifactId>core.wcm.components.examples.ui.config</artifactId>
        <type>zip</type>
        <target>/apps/${appId}-vendor-packages/content/install</target>
    </embedded>
    <!-- embed forms core components artifacts -->
    <embedded>
        <groupId>com.adobe.aem</groupId>
        <artifactId>core-forms-components-af-apps</artifactId>
        <type>zip</type>
        <target>/apps/${appId}-vendor-packages/application/install</target>
    </embedded>
    <embedded>
        <groupId>com.adobe.aem</groupId>
        <artifactId>core-forms-components-af-core</artifactId>
        <target>/apps/${appId}-vendor-packages/application/install</target>
    </embedded>
    <embedded>
        <groupId>com.adobe.aem</groupId>
        <artifactId>core-forms-components-examples-apps</artifactId>
        <type>zip</type>
        <target>/apps/${appId}-vendor-packages/content/install</target>
    </embedded>
    <embedded>
        <groupId>com.adobe.aem</groupId>
        <artifactId>core-forms-components-examples-content</artifactId>
        <type>zip</type>
        <target>/apps/${appId}-vendor-packages/content/install</target>
    </embedded>
    
    note note
    NOTE
    Sostituisci ${appId} con il tuo appId.
    Per trovare ${appId}, nel file [AEM Repository Folder]/all/pom.xml, cerca il termine -packages/application/install. Il testo prima del termine -packages/application/install è ${appId}. Il codice seguente, ad esempio, myheadlessform è ${appId}.
    code language-none
    
    
    
    
    com.myheadlessform
    
    myheadlessform.ui.apps
    
    zip
    
    /apps/myheadlessform-packages/application install
    
  6. Nella sezione <dependencies> del file [AEM Repository Folder]/all/pom.xml, aggiungere le dipendenze seguenti e salvare il file:

    code language-xml
            <!-- Other existing dependencies -->
            <!-- wcm core components examples dependencies -->
            <dependency>
                <groupId>com.adobe.cq</groupId>
                <artifactId>core.wcm.components.examples.ui.apps</artifactId>
                <type>zip</type>
            </dependency>
            <dependency>
                <groupId>com.adobe.cq</groupId>
                <artifactId>core.wcm.components.examples.ui.config</artifactId>
                <type>zip</type>
                </dependency>
            <dependency>
                <groupId>com.adobe.cq</groupId>
                <artifactId>core.wcm.components.examples.ui.content</artifactId>
                <type>zip</type>
            </dependency>
                <!-- forms core components dependencies -->
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-af-apps</artifactId>
                <type>zip</type>
            </dependency>
            <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-examples-apps</artifactId>
                <type>zip</type>
            </dependency>
                <dependency>
                <groupId>com.adobe.aem</groupId>
                <artifactId>core-forms-components-examples-content</artifactId>
                <type>zip</type>
            </dependency>
    
  7. Apri [AEM Repository Folder]/ui.apps/pom.xml per la modifica. Aggiungere la dipendenza af-core bundle e salvare il file.

    code language-xml
        <dependency>
        <groupId>com.adobe.aem</groupId>
        <artifactId>core-forms-components-af-core</artifactId>
        </dependency>
    
    note note
    NOTE
    Assicurati che i seguenti artefatti dei Componenti core adattivi di Forms non siano inclusi nel progetto.
    <dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>core-forms-components-apps</artifactId>
    </dependency>
    e
    <dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>core-forms-components-core</artifactId>
    </dependency>
  8. Salva e chiudi il file.

3. Genera e distribuisci il codice aggiornato

Distribuisci il codice aggiornato negli ambienti di sviluppo e Cloud Service locali per abilitare i Componenti core in entrambi gli ambienti:

Generare e distribuire il codice aggiornato in un ambiente di sviluppo locale :headding-anchor:core-components-on-aem-forms-local-sdk

  1. Apri il prompt dei comandi o il terminale.

  2. Passa alla directory principale del progetto dell’archivio Git.

  3. Esegui il seguente comando per generare il pacchetto per il tuo ambiente:

    code language-shell
        mvn clean install
    

    Una volta creato correttamente il pacchetto, puoi trovarlo nella [cartella dell'archivio Git]\all\target[appid].all-[versione].zip

  4. Utilizza Gestione pacchetti per distribuire il pacchetto [Cartella di progetto Archetipo AEM]\all\target[appid].all-[versione].zip nell'ambiente di sviluppo locale.

Generare e distribuire il codice aggiornato in un ambiente AEM Forms as a Cloud Service :headding-anchor:core-components-on-aem-forms-cs

  1. Aprire il terminale o il prompt dei comandi.

  2. Passa a [AEM Repository Folder] ed esegui i seguenti comandi nell'ordine elencato

    code language-shell
     git add pom.xml
     git add all/pom.xml
     git add ui.apps/pom.xml
     git commit -m "Added dependencies for Adaptive Forms Core Components"
     git push origin
    
  3. Dopo il commit dei file nell'archivio Git, Esegui la pipeline.

    Una volta completata l’esecuzione della pipeline, i componenti core Adaptive Forms vengono abilitati per l’ambiente corrispondente. All’ambiente Forms as a Cloud Service vengono inoltre aggiunti un modello Forms adattivo (Componenti core) e un tema Canvas 3.0, che offrono opzioni per personalizzare e creare componenti core basati su Adaptive Forms.

Domande frequenti :headding-anchor:faq

Cosa sono i Componenti core? :headding-anchor:core-components

I Componenti core sono un insieme di componenti WCM (Web Content Management) standardizzati per l'AEM che consentono di velocizzare i tempi di sviluppo e ridurre i costi di manutenzione dei siti Web.

Quali sono tutte le funzionalità aggiunte all’abilitazione dei componenti core? :headding-anchor:core-components-capabilities

Quando i componenti core Adaptive Forms sono abilitati per il tuo ambiente, all’ambiente vengono aggiunti un modello di modulo adattivo basato su Componenti core vuoto e un tema Canvas 3.0. Dopo aver abilitato i componenti core Forms adattivi per il tuo ambiente, puoi:

I componenti core Forms adattivi sono abilitati per il mio ambiente? :headding-anchor:enable-components

Per verificare che i componenti core Adaptive Forms siano abilitati per il tuo ambiente:

  1. Clona l'archivio as a Cloud Service di AEM Forms.

  2. Apri il file [AEM Repository Folder]/all/pom.xml dell'archivio Git del Cloud Service AEM Forms.

  3. Cerca le dipendenze seguenti:

    • core-forms-components-af-core
    • core-forms-components-core
    • core-forms-components-apps
    • core-forms-components-af-apps
    • core-forms-components-examples-apps
    • core-forms-components-examples-content

    individua lartefatto core-forms-components-af-core in all/pom.xml

    Se le dipendenze esistono, i componenti core Adaptive Forms sono abilitati per il tuo ambiente.

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