Create Custom Actions with API Connectivity

5/10/26

When developing applications on the Kuika platform, creating custom actions via the API is a powerful way to expand your app’s functionality and make data processing more dynamic. Through the Kuika Datasources module, you can use the Swagger API to add various data source connections and actions to your applications.

In this tutorial, you’ll learn how to create and configure custom actions using the API, as well as why they’re important in the app development process.

Connecting a Data Source with Swagger API

‍

Log in to the Kuika platform and open the project you’ll be working on from the Apps screen.
Go to the Datasources module from the top menu.
On the screen that opens, click the Create an API card. (Alternatively, you can use the + icon next to the Sources heading in the left panel.)
In the list that opens, select the Swagger API option under the APIs & Services heading.
Click the edit (pencil) icon at the top of the screen to name the data source (e.g., KuikaSwaggerAPI).

Endpoint section: Fill in the following fields:
- Swagger URL (required): https://builder3.kuika.com/KuikaSwaggerAPI/swagger/docs/v1
- Service base URL (required): https://builder3.kuika.com/KuikaSwaggerAPI
Authentication section: Set the Authentication type to No Auth. If the API requires authentication, you can use the appropriate option from Bearer, Basic, or API Key. If necessary, you can add Key and Value entries to the table below.
If you wish, add a note about the connection to the Description field in the right panel.
Click the CREATE button in the upper-right corner. The connection is saved and the page closes.

Using Swagger API Actions on the Application Screen

Create a list screen: Add a Table element to list product inventory.

Name the table columns: Specify headers such as ID, Stock Code, Product Name, and Barcode.
Add an Initial Action:
- Click the +ADD ACTION button in the Properties panel.
- Follow the path: Initial Actions > Custom > Datasource.
- Under the “Rest” heading, select the “Stok Get Product List From Rest” action.
Connect the table data source:
- Go to the Datasource menu in the Properties panel.
- Under the “Action” heading, select the “Stok Get Product List From Rest” action.

Show Dynamic Data in a Table

To connect data from the API to the table:

ID Information: Select the Label element, then from the Properties > Value menu, select the ID option under Field to Display.
Stock Code: Select the Label element, then from the Field to Display menu, select the Stock Code option.
Product Name: Select the Label element, then select the Product Name option from the Field to Display menu.
Barcode Information: Select the Label element, then select the Product Barcode option from the Field to Display menu.

Testing and Previewing Work

After making all the adjustments, click the Preview button.
Check whether the data from the API is being transferred correctly to the table.

You can make your Kuika apps more dynamic and data-driven by creating custom actions with the API. Thanks to Swagger API integration, you can provide a real-time data stream to your app and easily visualize the information coming from the API.