Exploring Qodly Custom Components

Exploring Qodly Custom Components

Qodly 07/17/2024

<p><br>Qodly introduces the concept of <a href="https://github.com/qodly/custom-components">Custom Components</a>, empowering developers to extend the platform's capabilities and tailor webforms to their specific needs.&nbsp;</p><p>Custom Components are user-created building blocks developed to address unique requirements or introduce specific features not covered by the default set of Qodly built-in components.&nbsp;</p><p>These components are crafted using React, providing a flexible and robust foundation for developers.</p><h2>Benefits of Using Qodly Custom Components</h2><p>The integration of Custom Components into Qodly offers a range of advantages:</p><ol><li><strong>Extensibility</strong>: Tailor webforms precisely to meet specific project requirements, providing a flexible and customizable solution.</li><li><strong>Reusability</strong>: Share Custom Components across diverse projects or within the Qodly community. This fosters collective enhancement and collaboration among developers.</li><li><strong>Efficiency</strong>: Enhance development efficiency by utilizing pre-built Custom Components. This approach speeds up the development process, reducing the time and costs associated with building components from scratch.</li><li><strong>Customization</strong>: Tailor your application components to fit your exact needs.</li><li><strong>Consistency</strong>: Ensure a consistent look and feel across your application by using standardized custom components.</li></ol><h2>Qodly Custom Components Repository</h2><p>This <a href="https://github.com/qodly/custom-components">repository</a> is a collection of custom components created by the community. It serves as a central location for developers to share and discover new components for their projects. Contributions are welcome and encouraged!&nbsp;</p><h2>How to Install Qodly Custom Components</h2><ol><li><strong>Choose the Component</strong>: Browse the Qodly Custom Components <a href="https://github.com/qodly/custom-components">repository on GitHub</a> and select the component you want to use.</li><li><p><strong>Download the Latest Version</strong>: Click on the component, navigate to the Releases section, and ensure you download the latest version. Click on the zip to download it.<br>&nbsp;</p><p><img src="/sites/default/files/install_component.gif" data-entity-uuid="8e8b7ce5-240e-44e9-9a10-f0f82bdf09c9" data-entity-type="file" alt="" width="1679" height="871"></p></li><li><p><strong>From the Qodly Side</strong>:</p><ol><li>In the Components section, click on the button <strong>Upload component</strong>.</li><li>Browse to the component you just downloaded or drag and drop it.</li><li>Click <strong>Install Component</strong>, then <strong>Reload</strong>.</li><li>The component should appear in the list of <strong>Custom</strong> under the Components section.</li></ol><p><img src="/sites/default/files/customCompQodlySide.gif" data-entity-uuid="207797cb-0668-4b7c-9f43-b33f24e5d105" data-entity-type="file" alt="" width="640" height="480"></p></li><li><strong>You are Good to Go</strong>: The component is now ready for your project.<br>&nbsp;</li></ol><h2>Example: Using a Qodly Custom Component</h2><p>To demonstrate the power of Qodly custom components, consider a scenario where you need to integrate a&nbsp;<a href="https://github.com/AyaBengherifa/Qodly-pdfViewer"> PDF viewer</a> into your application. Instead of creating this component from scratch, you can download an existing PDF viewer custom component from the Qodly Custom Components repository on GitHub and use it in your project.</p><p>&nbsp;</p><p width="855" height="481" src="https://www.youtube.com/embed/XfJmevGmpsg" title="Qodly Custom Component: Grid Layout" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen="">&nbsp;<iframe width="853" height="480" src="https://www.youtube.com/embed/e7CCBfcv2iw?list=PLcUzCPYm5QO9w8hIoc6CC-85NXK5tVjDM" title="" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></p><p>&nbsp;</p><p>What about a super-flexible dashboard? We have <a href="https://github.com/metayoub/qodly-grid-layout">Qodly Grid Layout</a>, a custom component that lets your users drag, resize, and rearrange elements on their screen, creating a custom dashboard that perfectly fits their needs.</p><p><iframe width="855" height="481" src="https://www.youtube.com/embed/XfJmevGmpsg" title="Qodly Custom Component: Grid Layout" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen=""></iframe></p><h2>Conclusion</h2><p>Qodly custom components offer a powerful way to enhance your web applications with tailored, reusable elements. By leveraging these components, you can create more efficient, consistent, and engaging applications that stand out. Whether you're a seasoned developer or just getting started, exploring Qodly custom components is a step towards more flexible and dynamic software development.</p><p>Stay tuned for more tutorials and examples of how to make the most of Qodly's capabilities!</p>

By Intissar Elmezrouai, Product Marketing Manager

Share this on :


Qodly introduces the concept of Custom Components, empowering developers to extend the platform's capabilities and tailor webforms to their specific needs. 

Custom Components are user-created building blocks developed to address unique requirements or introduce specific features not covered by the default set of Qodly built-in components. 

These components are crafted using React, providing a flexible and robust foundation for developers.

Benefits of Using Qodly Custom Components

The integration of Custom Components into Qodly offers a range of advantages:

  1. Extensibility: Tailor webforms precisely to meet specific project requirements, providing a flexible and customizable solution.
  2. Reusability: Share Custom Components across diverse projects or within the Qodly community. This fosters collective enhancement and collaboration among developers.
  3. Efficiency: Enhance development efficiency by utilizing pre-built Custom Components. This approach speeds up the development process, reducing the time and costs associated with building components from scratch.
  4. Customization: Tailor your application components to fit your exact needs.
  5. Consistency: Ensure a consistent look and feel across your application by using standardized custom components.

Qodly Custom Components Repository

This repository is a collection of custom components created by the community. It serves as a central location for developers to share and discover new components for their projects. Contributions are welcome and encouraged! 

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.
     

  3. From the Qodly 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.
     

Example: Using a Qodly Custom Component

To demonstrate the power of Qodly custom components, consider a scenario where you need to integrate a  PDF viewer into your application. Instead of creating this component from scratch, you can download an existing PDF viewer custom component from the Qodly Custom Components repository on GitHub and use it in your project.

 

 

 

What about a super-flexible dashboard? We have Qodly Grid Layout, a custom component that lets your users drag, resize, and rearrange elements on their screen, creating a custom dashboard that perfectly fits their needs.

Conclusion

Qodly custom components offer a powerful way to enhance your web applications with tailored, reusable elements. By leveraging these components, you can create more efficient, consistent, and engaging applications that stand out. Whether you're a seasoned developer or just getting started, exploring Qodly custom components is a step towards more flexible and dynamic software development.

Stay tuned for more tutorials and examples of how to make the most of Qodly's capabilities!

Subscribe to Qodly Blog 
 

Your source for awesome content and news related to Low Code/No Code trends and challenges, how-to’s, tips and tricks.

By submitting this form, I agree to Qodly's Privacy Policy

Hybrid Low-code Platform For Your Business Apps

Have freedom of customization while avoiding the constraints of No-Code limitations. Try Qodly for Free!

Discover Qodly