Personalización de plantillas para componentes del portal de formularios

Requisitos previos

Administración de metadatos de formulario

Conocimientos prácticos de HTML y CSS

Información general

La interfaz de usuario de AEM Forms permite agregar metadatos a cualquier formulario. Los metadatos personalizados pueden mejorar la experiencia del usuario al enumerar y buscar formularios de su organización.

Forms Portal permite utilizar metadatos personalizados en listas de formularios. Al crear plantillas personalizadas para los recursos, puede modificar su diseño y utilizar metadatos personalizados con el conjunto de estilos CSS.

Siga estos pasos para crear una plantilla personalizada para varios componentes de Forms Portal.

Creación de una plantilla personalizada

  1. Cree el nodo sling:Folder en */apps *

    Agregue la propiedad "fpContentType". Especifique los valores adecuados para la propiedad en función del componente para el que esté definiendo la plantilla personalizada.

    • Componente Búsqueda y listado: "/libs/fd/fp/formTemplate"

    • Componente Borradores y envíos:

      • Sección Borradores: /libs/fd/fp/reclutsTemplate
      • Sección de Envíos: /libs/fd/fp/submitTemplate

    • Componente de vínculo: /libs/fd/fp/linkTemplate

    Añada un título que desee que se muestre al seleccionar plantillas de diseño.

    *Nota: El título puede ser diferente del nombre de nodo de sling:Folder que ha creado. *
    La siguiente imagen muestra la configuración del componente Búsqueda y lista . Creación de una carpeta sling:Folder

  2. Cree un archivo template.html en esta carpeta para que sirva como plantilla personalizada.

  3. Escriba la plantilla personalizada y utilice metadatos personalizados como se describe a continuación.

Ejemplo práctico

A continuación se muestra una implementación de muestra de una plantilla personalizada en la que Forms Portal adquiere un diseño de tarjeta de gobierno personalizado para el componente Buscar y listar.

<div class="__FP_boxes-container __FP_single-color">
    <div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
 <div class="__FP_boxes-thumbnail">
     <img src ="${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png"/>
        </div>
        <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
        <p>${description}</p>
        <div class="boxes-icon-cont __FP_boxes-icon-cont">
            <div class="op-dow">
                <a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">${localize-Apply}</a>
                <a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">${localize-Download}</a>
            </div>
        </div>
    </div>
</div>

Especificaciones técnicas de las plantillas personalizadas

Una plantilla personalizada para cualquier componente de Forms Portal incluye entradas repetibles y no repetibles. Las entradas repetibles son entidades básicas para las listas. Ejemplos de entradas repetibles son los componentes Búsqueda y listado, Borradores y envíos y Vínculo .

Forms Portal proporciona una sintaxis para que los marcadores de posición muestren metadatos personalizados/OOTB. Los marcadores de posición se rellenan después de mostrar los resultados de los formularios, borradores o envíos.

Para incluir una entrada repetible, configure el valor del atributo repetible de datos a true.

*En el ejemplo analizado, hay dos elementos Div presentes en la parte superior de la plantilla personalizada. El primero, con la clase CSS "__FP_boxes-container", funciona como un elemento contenedor para los formularios que se enumeran. El segundo, con la clase CSS "__FP_boxes", es una plantilla para las entidades básicas, en este caso un Formulario. La variable repetible de datos atributo presente en el elemento Div tiene el valor true.

Cada marcador de posición tiene un conjunto de metadatos OOTB exclusivo. Para mostrar metadatos personalizados en un lugar determinado del formulario, agregue la variable $metadata_prop, propiedad en el lugar.

En el ejemplo, la propiedad metadata se utiliza en varias instancias. Por ejemplo, se utiliza en descripción,name,formUrl,htmlStyle,pdfUrl,pdfStyle​y ruta​de la manera prescrita.

Metadatos predeterminados

Varios componentes de Forms Portal proporcionan conjuntos exclusivos de metadatos OOTB que puede utilizar para incluirlos en la lista.

Componente Búsqueda y listado

  • Título: Título del formulario

  • name: Nombre del formulario (la mayoría es el mismo que el título)

  • descripción: Descripción del formulario

  • formUrl: URL para procesar el formulario como HTML

  • pdfUrl: URL para procesar el formulario como PDF

  • assetType: Tipo de recurso. Los valores válidos incluyen Formulario, Formulario de PDF, Imprimir formulario y Formulario adaptable

  • htmlStyle & pdfStyle: Estilo de visualización para los iconos de HTML y PDF utilizados respectivamente para la renderización. Los valores válidos son "__FP_display_none" o blank

    Nota: Recuerde utilizar la clase __FP_display_none en la hoja de estilo personalizada

  • downloadUrl: URL para descargar un recurso.

Compatibilidad con la localización, clasificación y uso de propiedades de configuración en la interfaz de usuario (solo Search & Lister):

  1. Compatibilidad con localización: Para localizar cualquier texto estático, utilice el atributo ${localize-YOUR_TEXT​} y haga que el valor localizado esté disponible, si no existe todavía.

    En el ejemplo analizado, los atributos ${localize-Apply} y ${localize-Download} se utilizan para localizar el texto Aplicar y Descargar.

  2. Compatibilidad con la ordenación: Haga clic en el elemento HTML para ordenar los resultados de la búsqueda. Para implementar la ordenación en un diseño tabulado, añada el atributo "data-sortKey" en el encabezado de tabla concreto. Además, añada su valor como metadatos para los que desea ordenar.

    Por ejemplo, para el encabezado "Título" en la vista de cuadrícula, el valor del encabezado "data-sortKey" es "título". Haga clic en el encabezado para ordenar los valores de una columna en particular.

  3. Uso de las propiedades de configuración: El componente Búsqueda y lista tiene varias configuraciones que puede utilizar en la interfaz de usuario. Por ejemplo, para mostrar el texto de información del objeto del HTML guardado a través del cuadro de diálogo de edición, utilice el Atributo ${config-htmlLinkText}. Del mismo modo, para el texto de información del objeto del PDF, utilice la variable ${config-pdfLinkText} atributo.

  • Título: Título del formulario
  • formUrl: URL para procesar el formulario como HTML
  • target: Atributo de destino del vínculo. Los valores válidos son "_blank" y "_self".
  • linkText: Pie de ilustración del vínculo

Componente Borradores y envíos

  • Ruta: Ruta del nodo de metadatos de borradores/envíos. Utilícelo con la extensión .HTML como URL para abrir un borrador o un envío.
  • contextPath: Ruta de contexto de la instancia de AEM
  • firstLetter: Primera letra (mayúscula) del título del formulario adaptable, que se guardó como borrador o se presentó.
  • formName: Título del formulario adaptable, que se guardó como borrador o se envió.
  • DraftID: ID del borrador que aparece en la lista (utilice solamente en la plantilla de la sección Borrador).
  • submitID: ID del envío que aparece en la lista (utilice solamente en la plantilla de la sección Envío).
  • status: Estado del formulario enviado. (Se utiliza solo en la plantilla de la sección Envío ).
  • descripción: Descripción del formulario adaptable asociado al borrador o al envío.
  • diffTime: Diferencia entre la hora actual y la última acción de guardado del borrador. Alternativamente, la diferencia entre la hora actual y la última acción de envío para el envío.
  • iconClass: La clase CSS utilizada para mostrar la primera letra del borrador/envío. Forms Portal incluye las siguientes clases, que proporcionan distintos fondos de color.
  • propietario: Usuario que ha creado el borrador/envío.
  • Hoy: Fecha de creación del borrador o de la presentación en DD:MM:AAAA .
  • TimeNow: Momento de creación del borrador o de presentación en HH:MM:Formato SS de 24 horas

Nota:

  1. Para la opción de eliminación de la sección Borradores del componente Borradores y envíos , asigne a la clase CSS el nombre "__FP_deleteDraft". Además, incluya el atributo "DraftID" con el valor ${DraftID}, que es el id. borrador del borrador correspondiente.

  2. Al crear vínculos para abrir borradores y envíos, puede especificar $path.html como el valor de la variable href para la etiqueta de anclaje.

Nodo Borradores y envío

A. Elemento contenedor

B. metadatos de "ruta" con una jerarquía fija para obtener la miniatura almacenada para cada formulario.

C. Atributo repetible de datos utilizado en la sección de plantilla para cada formulario

D. Para localizar la cadena "Aplicar"

E. Uso de la propiedad de configuración pdfLinkText

F. Uso de los metadatos "pdfUrl"

Sugerencias, trucos y problemas conocidos

  1. No utilice comillas simples (') en ninguna plantilla personalizada.
  2. Para los metadatos personalizados, almacene esta propiedad en la variable jcr:content/metadata solo nodo. Si lo almacena en cualquier otro lugar, Forms Portal no puede mostrar los metadatos.
  3. Asegúrese de que el nombre de cualquier metadato personalizado o metadatos existentes no incluya dos puntos (:). Si es así, no puede mostrarlo en la interfaz de usuario.
  4. repetible de datos no tiene ningún significado para un Vínculo componente. Adobe recomienda evitar utilizar esta propiedad en la plantilla para un componente Vínculo .

Artículos relacionados

En esta página