How to Add Custom Components to your App

Qodly Studio for 4D is a powerful tool for creating full-featured, complex business applications. While its pre-built components are versatile, custom solutions are sometimes essential.

Custom components allow you to build a custom solution for your own project – and to benefit from many components built by 4D or the community to enrich your user interface.

This blog post, complemented by a video tutorial, will walk you through the process of integrating custom components into your Qodly Studio for the 4D project.

Benefits Of Using Custom Components

Custom components allow the enrichment of the user interface of Qodly Studio for 4D applications, similar to 4D components or 4D Plugins used in 4D forms.

Here are some publicly available examples of custom components:

• Date picker

  

• Rating widgets
  
  

• Color Picker
  
  

• Calendar (monthly, weekly, daily)
  
  

• Charts
  
  

• Map

  

• Timeline

  

• And more!

Custom components are crafted using React, providing a flexible and powerful foundation for developers.

How To Install Qodly Custom Components

1. Choose the Component: Browse the Qodly custom components repository on GitHub and select the component you want to use.
2. Download the Latest Version: Click on the component, navigate to the Releases section, and ensure you download the latest version. Click on the zip to download it. Make sure you are in the Release section to download, which downloads a pre-build component, not the source itself.
   
   

3. From the Qodly Studio for 4D Side:
   1. In the Components section, click on the button Upload component.
   2. Browse to the component you just downloaded or drag and drop it.
   3. Click Install Component, then Reload.
   4. The component should appear in the list of Custom under the Components section.

   

4. You are Good to Go: The component is now ready for your project.