Amplíe su aplicación Qodly con componentes personalizados

4D Qodly Pro ya ofrece una amplia gama de componentes nativos para ayudarle a diseñar sus aplicaciones. Pero ¿sabía que puede ir aún más lejos? Gracias a los componentes personalizados desarrollados por la comunidad, ¡puede mejorar sus proyectos con funcionalidades a medida!

Estos componentes personalizados le permiten extender las capacidades de 4D Qodly Pro añadiendo funcionalidades personalizadas, muy parecido a los plugins y componentes en 4D.

En este blog, exploraremos cómo utilizar e integrar estos componentes, junto con varios casos de uso reales de nuestra aplicación Performance Review.

Aplicación de evaluación de rendimiento

¿Qué es un componente personalizado?

Los componentes personalizados son bloques de construcción creados por los usuarios para satisfacer necesidades específicas o agregar funcionalidades no cubiertas por los componentes integrados de 4D Qodly Pro. Desarrollados en React, ofrecen una base poderosa y flexible para los desarrolladores.

La integración de Custom Components en Qodly Studio ofrece varias ventajas:

• Extensibilidad: personalice sus páginas para que se ajusten con precisión a los requisitos de su proyecto.
• Reutilización: comparta sus componentes a través de diferentes proyectos o con la comunidad Qodly.
• Eficacia: ahorre tiempo utilizando componentes preconstruidos en lugar de empezar desde cero.

¿Cómo utilizar un componente personalizado?

1. Elija el componente
   • Navegue por el repositorio GitHub de componentes personalizados y seleccione el que necesite.
2. Descargue la última versión
   • Haga clic en el componente elegido.
   • Vaya a la sección Releases.
   • Descargue la última versión (archivo ZIP). Asegúrese de que está en la sección Releases para obtener la versión precompilada, no el código fuente.
3. Instalar en Qodly Studio
   • En la sección Components, haga clic en Upload component.
   • Arrastre y suelte o seleccione el archivo ZIP descargado.
   • Haga clic en Instalar el componente y, a continuación, en Recargar.
   • El componente aparecerá ahora en la sección Custom de los componentes disponibles.
   • Ahora puede arrastrarlo y soltarlo directamente en una página.

 

Para más información, consulte la documentación oficial: Descargar Componente personalizado.

¿Cómo crear su propio componente personalizado?

Si no puede encontrar un componente que satisfaga sus necesidades, puede crear el suyo propio.

La API de 4D Qodly Pro simplifica la creación de Custom Components en React con su herramienta CLI dedicada, @qodly/cli. Esta herramienta agiliza la inicialización de un proyecto React, permitiendo a los desarrolladores diseñar y compartir componentes reutilizables. Una vez integrados, estos componentes pueden añadirse a las páginas con un simple arrastrar y soltar.

Consulte la documentación oficial para más detalles.

¿Cómo pueden los componentes personalizados mejorar Su aplicación?

En la aplicación Performance Review, hemos integrado varios componentes personalizados para mejorar la experiencia del usuario. He aquí algunos ejemplos concretos:

• Visualizar un documento PDF con el componente pdfViewer.
• Descargar un archivo con el componente fileDownload.
• Crear un menú dinámico con el componente Popover.
• Construir un selector de año combinando los componentes Popover y DatePicker.

 

Visualización de documentos: Integrar un PDF con pdfViewer

Utilizamos el componente pdfViewer.

Pasos para integrar un visor de PDF:

• Descargue e instale el componente pdfViewer como se describe en la sección anterior.
• Arrastre el componente a su página y vincúlelo a la fuente de datos «selectedReview.DocumentPDF», que contiene el PDF.

 

• El documento se mostrará dinámicamente en la página.

Este componente es particularmente útil para mostrar documentos generados dinámicamente a partir de una plantilla 4D Write Pro y datos de una base de datos.

Descargar un archivo PDF con el componente fileDownload

El componente fileDownload permite descargar documentos.

Pasos para crear una opción de descarga de archivos:

• Instale el componente fileDownload.
• Arrastre el componente a su página y vincule el origen de datos que contiene el archivo PDF que desea descargar. En este caso, la fuente de datos es «selectedReview.DocumentPDF».

 

• Una vez configurado, un simple clic permite a los usuarios descargar el archivo.

 

Crear un menú interactivo con popover

En nuestra aplicación de evaluación de rendimiento, hemos integrado un menú en la parte superior de la página, situado arriba de un widget Page Loader. Este menú determina dinámicamente la página a cargar dentro del componente Page Loader. Creamos el menú con el componente popover.

Pasos para crear el menú:

• Instale el componente popover.
• Arrastre y suelte el componente popover en su página.
• En la sección menú, inserte un texto estático llamado Recursos Humanos.
• En la sección superior, inserte tres botones denominados Colaborador, Revisiones y Formación.

 

 

Con unos pocos ajustes de estilo, obtenemos un menú funcional y ergonómico:

Afinando el diseño, ajustando el espaciado, los colores y los efectos hover, puede crear una experiencia de navegación fluida y fácil de usar en su aplicación Qodly.

Crear un DatePicker personalizado con Popover y DatePicker

4D Qodly Pro ofrece un componente nativo para la selección de fechas. Sin embargo, en la aplicación Performance Review, optamos por utilizar el componente DatePicker personalizado, ya que su diseño se adaptaba mejor a nuestras necesidades. Esto también nos permitió demostrar la combinación de componentes personalizados.

Pasos para crear una entrada de año personalizada:

• Arrastre y suelte una caja de estilo en su página.
• Añada un texto de entrada con formato numérico dentro de la caja de estilo.
• Inserte un componente popover dentro de la caja de estilo.
• En la sección menú del popover, inserte un icono para abrir el selector de fecha.
• En la sección over, inserte el componente DatePicker.
• Añada la fuente de datos al texto de entrada y al DatePicker.

Con unos pocos ajustes de estilo (bordes, colores, etc.), este es el resultado:

Este enfoque combina flexibilidad y un diseño personalizado, mejorando la experiencia del usuario.

Próximos pasos

Los componentes personalizados son una poderosa solución para mejorar sus aplicaciones Qodly y satisfacer necesidades específicas sin un desarrollo complejo. Explore el repositorio GitHub de componentes para descubrir aún más posibilidades.

Si ha creado su propio componente, ¡compártalo con la comunidad Qodly!

Para ir más lejos, de un vistazo a este vídeo tutorial: Cómo añadir componentes personalizados a su aplicación Qodly.