Working with custom page components

Mathangi
updated yesterday
3replies

Building custom components using Kissflow SDK

The custom page component feature lets you build an entire page from scratch using HTML elements, bypassing the default components entirely.

Use Kissflow's JavaScript SDK bundle to develop custom components over the low-code platform. The SDK methods can help you configure different client and server functions in your custom page component.

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 file

Open app builder, click Interface in the left navigation panel, then select Components.
Click the New component button.
Choose Page as the type of custom component. Enter a name and description and click Create.
In the Import component page, upload the .zip file.

Once the file is imported, you can click Preview to instantly see your imported component in runtime mode.

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.

Live preview

You can preview your component before uploading using the Live preview option. This allows you to see changes in real time as you build.

Setting up live preview

Use the click here option to open the Live preview window.
Enter your dev server URL (e.g., http://127.0.0.1:9000) and press enter.

Important note:

Before using your dev server URL in Live preview, you must resolve any SSL certificate errors:

Open your dev server URL in a browser window.

If you see a "Your connection is not private" message, click Advanced > Proceed to [your URL].

This step is only required once and prevents SSL errors in the live preview.

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.