Tutorial: Publicar un formulario adaptable

Última actualización: 2023-12-07

Hero-image

Este tutorial es un paso en la serie Crear su primer formulario adaptable. Se recomienda seguir la serie en orden cronológico para comprender, realizar y mostrar el caso de uso del tutorial completo.

Una vez que el formulario adaptable esté listo, puede publicarlo para que los usuarios finales puedan acceder a él. Los usuarios finales pueden abrir el formulario publicado en cualquier dispositivo y explorador de Internet. Cuando se publica un formulario adaptable, el formulario y el contenido relacionado se copian de una instancia de autor de AEM a una instancia de publicación. El formulario está disponible para el usuario final a través de la instancia de publicación.

Puede utilizar los siguientes métodos para publicar un formulario adaptable:

Antes de comenzar

  • Configuración de una instancia de publicación de AEM Forms: la instancia de publicación es una instancia pública de AEM Forms se ejecuta en el modo Publicación. En entornos de producción, la instancia de publicación está fuera del cortafuegos de la organización.
  • Configurar la replicación y la replicación inversa: la replicación copia el contenido de la instancia de autor en una instancia de publicación y devuelve los datos introducidos por el usuario (por ejemplo, los datos de entrada de formulario) desde la instancia de publicación a la instancia de autor.

Publicar el formulario adaptable como una página de AEM

Cuando el formulario adaptable se publica como una página de AEM, toda la página web contiene únicamente un formulario publicado. Puede utilizar la URL del formulario adaptable para vincularlo desde otra página web. Para publicar el formulario adaptable Formulario-actualizar-agregar-dirección-envío como una página de AEM:

  1. Inicie sesión en la instancia de autor de AEM Forms y busque el formulario adaptable Formulario-actualizar-agregar-dirección-envío en la interfaz de usuario de AEM Forms.
    https://localhost:4502/aem/forms.html/content/dam/formsanddocuments
  2. Seleccione el formulario adaptable Formulario-actualizar-agregar-dirección-envío y seleccione Publish. Se muestra un cuadro de diálogo que contiene recursos relacionados con el formulario adaptable. Seleccionar Publish. El formulario adaptable se publica y aparece un cuadro de diálogo con un mensaje de éxito.
  3. Abra el formulario en la instancia de publicación. El formulario está disponible para que el usuario final lo rellene y lo envíe.
    https://localhost:4503/content/forms/af/shipping-address-add-update-form.html

Incrustar el formulario adaptable en una página de AEM Sites

AEM Forms permite a los desarrolladores de formularios incrustar fácilmente formularios adaptables en una página de AEM Sites. El formulario adaptable incrustado es completamente funcional, y los usuarios pueden rellenarlo y enviarlo sin abandonar la página. Esto permite al usuario mantenerse en el contexto de otros elementos de la página web e interactuar simultáneamente con el formulario.

AEM Forms proporciona un componente, el Contenedor de AEM Forms, para incrustar un formulario adaptable en una página de AEM Sites. De forma predeterminada, el componente no está visible en el contenedor de AEM Sites. Siga estos pasos para habilitar el componente Contenedor de AEM Forms e incrustar el formulario adaptable en una página de AEM Sites:

  1. Cree y abra una página en el sitio de We.Retail para editarla. Por ejemplo, https://localhost:4502/editor.html/content/we-retail/us/en/user/shipping-and-billing-address.html. El formulario adaptable se incrusta en la página de Sites.

    También puede incrustar el formulario adaptable en una página de We.Retail de Site’s existente; por ejemplo, la página ABOUT US https://localhost:4502/editor.html/content/we-retail/us/en/about-us.html. Esto le permite ahorrar tiempo a la hora de crear una página. Los pasos siguientes utilizan la página recién creada.

    El sitio de We.Retail se proporciona junto con AEM. Si no ha instalado el sitio de We.Retail, consulte Implementación de referencia de We.Retail para instalarlo.

  2. Seleccionar propiedades y seleccione la opción Editar plantilla en la página de sitio de We.Retail recién creada. La plantilla de la página se abre en una nueva pestaña del explorador.

  3. Seleccione dentro de contenedor de diseño y seleccione administración de fuentes. En el Componentes permitidos , expanda la pestaña General acordeón, seleccione la AEM Formulario de y seleccione. icono_guardar. El componente Contenedor de AEM Formsestá habilitado para la página.

  4. Abra la pestaña del explorador que contiene la página de AEM Sites que abrió en el paso 1. Seleccione el Arrastre los componentes aquí y seleccione +. En el Insertar nuevo componente , seleccione AEM Formulario de. El componente Contenedor de AEM Forms se añade a la página.

  5. Seleccione el contenedor de AEM Forms Componente y seleccione configure-icon. Aparece un cuadro de diálogo con las propiedades del contenedor de AEM Forms. En el campo Ruta del recurso, busque y seleccione el formulario adaptable Formulario-actualizar-agregar-dirección-envío. Seleccionar icono_guardar. El formulario adaptable se incrusta en la página.

  6. Publique el formulario adaptable y la página de Sites. Tenga en cuenta lo siguiente:

    • Si publica la página de AEM Sites por primera vez y esta incluye un formulario incrustado, publique la página de Sites y el formulario incrustado.

    • Si ha modificado únicamente el formulario incrustado en una página de Sites ya publicada, publique el formulario original, y los cambios se reflejarán en la página de Sites publicada. La página de Sites publicada contiene una referencia al formulario, y no es necesario que vuelva a publicarla.

    • Si modifica la página de Sites y el formulario incrustado, vuelva a publicar la página de Sites y el formulario.

      incrustado-en-aem-sites

    Formulario Cambio de la dirección de envío y facturación añadido a una página de AEM Sites.

Incrustar el formulario adaptable en una página web externa

Puede incrustar un formulario adaptable en una página web externa (una página web que no pertenezca a AEM y que esté alojada fuera de este) insertando unas líneas de JavaScript en la página web externa. El código JavaScript envía una solicitud HTTP al servidor de AEM Forms para el formulario adaptable y los recursos relacionados, y agrega el formulario adaptable a la página web. Para ver los pasos detallados, consulte Incrustar formulario adaptable en una página web externa.

En esta página