DocumentaciónFormularios adaptables sin encabezado de AEM

Habilitación de formularios adaptables sin encabezado en AEM Forms as a Cloud Service enable-headless-adaptive-forms-on-aem-forms-cloud-service

Last update: Wed Jul 30 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

Creado para:

  • Principiante
  • Intermedio
  • Administrador

Al habilitar formularios adaptables sin encabezado en AEM Forms as a Cloud Service, puede empezar a crear, publicar y suministrar formularios sin encabezado mediante las instancias de Cloud Service de AEM Forms en varios canales. Se necesita un entorno habilitado para los componentes principales de formularios adaptables para utilizar formularios adaptables sin encabezado.

Consideraciones

NOTE
Adobe proporciona un kit de inicio (aplicación React) de los formularios adaptables para ayudar a los desarrolladores a empezar rápidamente con el desarrollo de los formularios adaptables sin encabezado, sin habilitar los formularios adaptables sin encabezado en el entorno de AEM Forms as a Cloud Service. Puede habilitar los formularios adaptables sin encabezado en un entorno Forms as a Cloud Service más tarde después de un rápido tutorial práctico con el desarrollo de formularios sin encabezado.

Habilitación de formularios adaptables sin encabezado para un entorno AEM Forms as a Cloud Service

Realice los siguientes pasos, en el orden indicado, para habilitar los formularios adaptables sin encabezado para un entorno AEM Forms as a Cloud Service

​1. Clone su repositorio de Git de AEM Forms as a Cloud Service clone-git-repository

  1. Inicie sesión en Cloud Manager y seleccione su organización y programa.

  2. Vaya a la tarjeta de Canalizaciones desde la página Información general del programa.

  3. Haga clic en el botón Acceder a la información del repositorio para acceder y administrar su repositorio Git. La página incluye la siguiente información:

    • La dirección URL del repositorio de Git de Cloud Manager.
    • Credenciales del nombre de usuario del repositorio de Git (nombre de usuario y contraseña).

    Pulse en Generar contraseña para ver o generar la contraseña.

  4. Abra el terminal o el símbolo de comando en el equipo local de su ordenador y ejecute el siguiente comando:

    code language-shell 
    git clone [Git Repository URL]

    Cuando se le solicite, proporcione las credenciales. El repositorio se clona en su ordenador local.

​2. Añadir dependencias de componentes principales de formularios adaptables al repositorio de Git add-adaptive-forms-core-components-dependencies

  1. Abra la carpeta del repositorio de Git en un editor de código de texto sin formato. Por ejemplo, VS Code.

  2. Abra el archivo [AEM Repository Folder]\pom.xml para editarlo.

  3. Reemplazar versiones de core.forms.components.version, core.forms.components.af.version y core.wcm.components.version componentes con versiones especificadas en documentación de componentes principales. Si el componente no existe, añada estos componentes.

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

<properties>
    <core.forms.components.version>2.0.14</core.formscomponents.version>
    <core.forms.components.af.version>2.0.14</core.forms.components.af.version>
    <core.wcm.components.version>2.21.2</core.wcmcomponents.version>
</properties>

    Mencione la versión más reciente de los componentes principales de formularios

  4. En la sección de dependencias del archivo [AEM Repository Folder]\pom.xml, agregue las siguientes dependencias y guarde el archivo.

    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. Abra el archivo [AEM Repository Folder]/all/pom.xml para editarlo. Agregue las siguientes dependencias en la sección <embeddeds> y guarde el archivo.

    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
    Reemplace ${appId} con su appId.
    Para encontrar su ${appId}, en el archivo [AEM Repository Folder]/all/pom.xml, busque el término -packages/application/install. El texto antes del término -packages/application/install es su ${appId}. Por ejemplo, el siguiente código, myheadlessform es ${appId}.
    code language-none 
    



com.myheadlessform

myheadlessform.ui.apps

zip

/apps/myheadlessform-packages/application install

  6. En la <dependencies> sección del archivo [AEM Repository Folder]/all/pom.xml, agregue las siguientes dependencias y guarde el archivo:

    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. Abra [AEM Repository Folder]/ui.apps/pom.xml para editarlo. Añada la dependencia af-core bundle y guarde el archivo.

    code language-xml 
        <dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>core-forms-components-af-core</artifactId>
    </dependency>
    note note
    NOTE
    Asegúrese de que los siguientes artefactos de componentes principales de formularios adaptables no estén incluidos en el proyecto.
    <dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>core-forms-components-apps</artifactId>
    </dependency>
    y
    <dependency>
    <groupId>com.adobe.aem</groupId>
    <artifactId>core-forms-components-core</artifactId>
    </dependency>

  8. Guarde y cierre el archivo.

​3. Actualice el proyecto para incluir la versión más reciente de los componentes principales de formularios:

  1. Abra la [carpeta de proyecto de arquetipo de EAM]/pom.xml para su edición.

  2. Guarde y cierre el archivo.

​4. Confirme las actualizaciones en el repositorio Git y ejecute la canalización para desplegar el repositorio Commit-the-updates-to-your-git-repository

  1. Para confirmar el código en el repositorio de Git:

    1. Abra el terminal o el símbolo del comando.

    2. Navegue hasta su [AEM Repository Folder] y ejecute los siguientes comandos en el orden indicado

      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

  2. Una vez que los archivos se hayan confirmado en el repositorio de Git, Ejecute la canalización.

    Cuando la ejecución de la canalización se haya realizado correctamente, los componentes principales de formularios adaptables se habilitarán en el entorno correspondiente. Además, se añade una plantilla de formularios adaptables (componentes principales) y una temática de Canvas 3.0 al entorno as a Cloud Service de formularios, lo que le proporciona opciones para personalizar y crear componentes principales basados en formularios adaptables.

Preguntas frecuentes faq

¿Qué son los componentes principales? core-components

Los componentes principales son un conjunto de componentes estandarizados de la gestión de contenidos web (WCM) para AEM con el objetivo de acelerar el tiempo de desarrollo y reducir el coste de mantenimiento de sus sitios web.

¿Qué capacidades completas se añaden al habilitar los componentes principales? core-components-capabilities

Cuando los componentes principales de formularios adaptables se habilitan para su entorno, se agrega a este una plantilla de formulario adaptable basada en componentes principales en blanco y una temática de Lienzo 3.0. Tras habilitar los componentes principales de formularios adaptables para su entorno, puede:

  • Crear componentes principales basados en formularios adaptables.
  • Crear componentes principales basados en plantillas de formulario adaptable.
  • Crear temáticas personalizadas para componentes principales basadas en plantillas de formulario adaptable.
  • Proporcione representaciones JSON de un formulario adaptable basado en componentes principales a canales como móvil, web, apps nativas y servicios que requieren la representación sin encabezado de un formulario.

¿Los componentes principales de formularios adaptables están habilitados para mi entorno? enable-components

Para comprobar que los componentes principales de Formularios adaptables están habilitados para su entorno:

  1. Clone su repositorio as a Cloud Service de AEM Forms.

  2. Abra el archivo [AEM Repository Folder]/all/pom.xml del repositorio de Git del Cloud Service de AEM Forms.

  3. Busque las siguientes dependencias:

    • 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

    busque el artefacto de core-forms-components-af-core en all/pom.xml

    Si existen dependencias, los componentes principales de Formularios adaptables se habilitan para su entorno.

recommendation-more-help
ce8b2828-9203-402e-a565-7b758c99b2ba