How to Add Custom Components to your App



Tips

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

    blank

  • Color Picker

    blank

  • Calendar (monthly, weekly, daily)

    blank

  • Charts

    blank

  • Map

    blank

  • Timeline

    blank

  • 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.

    blank

  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.

    blank

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

 

Discuss

Tags , ,

Avatar
- Product Marketing Manager – Intissar joined 4D in 2017 as a Product Marketing Manager. She works closely with the product, marketing, engineering, and technical support teams to highlight the “why,” “how,” and “what” of new features and updates to various audiences. This close collaboration enables her to craft messaging frameworks and create in-depth content and code samples for the 4D blog and website. After earning a degree in Computer Engineering from VINCI University, Intissar worked at several startups as a software engineer. Her hands-on experience includes software specification, design, and development, user training and support, as well as team management.