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 app development time.
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.
Three basic steps to create and use a custom component
Design and build the required component. Use Kissflow's SDK methods to make it interactive and usable alongside other system components.
Upload the component, create input parameters, and publish it.
- Add the custom component to a page and set up values for your input parameters. These values can be static or you can add a global/local variable.
Creating custom components
You can import custom components into the app builder by:
- Uploading a .zip 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.
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.
Uploading using an external URL
You can also import your component hosted on an external URL. First copy the URL of the component. Click the Import from URL option. Then paste your component address in the field. Click Preview to render the component in runtime mode.
Setting up input parameters
You can create three types of input parameters for your custom component: Text, Number, Static drop-down parameters and define values for them in the app builder.
To map the input parameters to your custom component, use the watch params method in your custom component's code.
Click Publish to publish the component. Now, it is ready to use in your pages.
Using the custom component in a page
To use the custom component in a page, drag and drop Custom component onto the page, select the required component from the Select custom component dropdown and save.
Note: You can add a custom component in addition to other system component in a page. However, the configuration settings in the page builder will apply only to the system components.
