Creating custom components

What are custom components?

Custom components are one of the most important aspects of low-code development because they allow for code reuse. You can create custom components that can be used inside your pages in addition to the system components provided by Kissflow out of the box. Custom components allow developers to create high-quality app components and share them with others, shortening application development time.

Creating custom components

You can import custom components into the application builder by:

• Uploading a zipped file containing the component entities.
• Entering the URL of the component's hosting location.

Importing a ZIP package

Open the app builder, click Components on the left navigation bar and click Create a component. Choose the Import a ZIP file radio button to upload a ZIP package from your local machine. You can additionally define Text, Number, or drop-down parameters and also specify the layout for your component.

Once the file is imported, you can click Preview to instantly see your imported component in runtime mode. Click Publish to access the component inside your pages. The published components are listed under Custom components inside your page.

Note:

The imported ZIP file must always include an index.html file. Here's a sample ZIP file for you to experiment with.

Using an external URL

You can also import your component hosted on an external URL. First copy the URL of the component. Select the Import from URL radio button. Then paste your component address in the field. Click Preview to render the component in runtime mode. Click Publish to use them inside your pages.

Building custom components using Kissflow SDK

You can access Kissflow's JavaScript SDK bundle to develop custom components over the Low-code platform. Checkout out the SDK documentation to see the different client and server functions offered by Kissflow.