Extend your Qodly application with custom components

4D Qodly Pro already offers a wide range of native components to help you design your applications. But did you know you can take it even further? Thanks to Custom Components developed by the community, you can enhance your projects with tailor-made features!

These custom components allow you to extend 4D Qodly Pro’s capabilities by adding personalized functionalities, much like plugins and components in 4D.

In this article, we’ll explore how to use and integrate these components, along with several real-world use cases from our Performance Review application.

Performance Review Application

What is a Custom Component?

Custom Components are building blocks created by users to meet specific needs or add functionalities not covered by 4D Qodly Pro’s built-in components. Developed in React, they provide a powerful and flexible foundation for developers.

Integrating Custom Components into Qodly Studio offers several advantages:

• Extensibility: Customize your pages to precisely match your project’s requirements.
• Reusability: Share your components across different projects or with the Qodly community.
• Efficiency: Save time by using pre-built components instead of starting from scratch.

How to Use a Custom Component?

1. Choose the Component
   • Browse the GitHub repository of Custom Components and select the one you need.
2. Download the Latest Version
   • Click on the chosen component.
   • Go to the Releases section.
   • Download the latest version (ZIP file). Make sure you are in the Releases section to get the precompiled version, not the source code.
3. Install in Qodly Studio
   • In the Components section, click Upload component.
   • Drag and drop or select the downloaded ZIP file.
   • Click Install Component, then Reload.
   • The component will now appear under the Custom section of the available components.
   • You can now drag and drop it directly onto a Page.

 

For more information, check out the official documentation: Upload Custom Component.

How to Create Your Own Custom Component?

If you can’t find a component that meets your needs, you can create your own.

4D Qodly Pro’s API simplifies the creation of Custom Components in React with its dedicated CLI tool, @qodly/cli. This tool streamlines the initialization of a React project, allowing developers to design and share reusable components. Once integrated, these components can be added to Pages with a simple drag-and-drop.

Check out the official documentation for more details.

How Can Custom Components Enhance Your Application?

In the Performance Review application, we integrated several Custom Components to enhance the user experience. Here are some concrete examples:

• Display a PDF document with the pdfViewer component.
• Download a file using the fileDownload component.
• Create a dynamic menu with the Popover component.
• Build a year picker by combining Popover and DatePicker components.

 

Displaying Documents: Integrate a PDF with pdfViewer

We use the pdfViewer component.

Steps to integrate a PDF viewer:

• Download and install the pdfViewer component as described in the previous section.
• Drag the component to your page and link it to the “selectedReview.DocumentPDF” datasource, which contains the PDF. 

 

• The document is then dynamically displayed on the page.

This component is particularly useful for displaying documents dynamically generated from a 4D Write Pro template and database data.

Download a PDF File with the fileDownload Component

The fileDownload component allows you to download documents.

Steps to create a file download option:

• Install the fileDownload component.
• Drag the component to your page and link the datasource, which contains the PDF file to download. In this case, the datasource is “selectedReview.DocumentPDF”.

 

• Once configured, a simple click allows users to download the file.

 

Create an Interactive Menu with Popover

In our Performance Review application, we integrated a menu at the top of the page, placed above a Page Loader widget. This menu dynamically determines the page to be loaded within the Page Loader component. We created the menu with the popover component.

Steps to create the menu:

• Install the popover component.
• Drag and drop the popover component onto your page.
• In the menu section, insert static text named Human Resources.
• In the over section, insert three buttons named Collaborator, Reviews, and Trainings.

 

 

With a few style adjustments, we get a functional and ergonomic menu:

By fine-tuning the design, adjusting spacing, colors, and hover effects, you can create a seamless and user-friendly navigation experience in your Qodly application.

Create a Custom DatePicker with Popover and DatePicker

4D Qodly Pro offers a native component for date selection. However, in the Performance Review application, we opted to use the custom DatePicker component, as its design better suited our needs. This also allowed us to demonstrate the combination of Custom Components.

Steps to create a custom year input:

• Drag and drop a Style Box onto your page.
• Add a number-formatted Input Text inside the Style Box.
• Insert a popover component inside the Style Box.
• In the menu section of the Popover, insert an icon to open the date selector.
• In the over section, insert the DatePicker component.
• Add the datasource to the input text and DatePicker.

With a few style adjustments (borders, colors, etc.), here’s the result:

This approach combines flexibility and a customized design, enhancing the user experience.

Next Steps

Custom Components are a powerful solution to enhance your Qodly applications and meet specific needs without complex development. Explore the GitHub repository for components to discover even more possibilities.

If you’ve created your own component, share it with the Qodly community!

To go further, check out this tutorial video: How to add custom components to your Qodly app.