When developing applications with Kuika, creating custom actions with the API provides a powerful way to extend the functionality of your application and make data operations more dynamic. You can create various data source connections and actions in your application using Swagger API via Kuika's Datasource module. In this content, you will learn how to create custom actions with the API, how to configure them and why they are important in your application development process.

This training content consists of the following topics:

Establishing a data source connection with the Swagger API,
Using Swagger API actions on application screens,
Displaying dynamic data in a table,
Testing and previewing the work.

1. Connecting a Data Source with Swagger API

After logging into the Kuika platform, open the project you will work on from the “Apps” screen.
Go to the “Data Sources” (1) module. In the Data Sources module, you can view the data sources, actions and tables in the application you have developed, add a new data source, a new action and a new table.

To add a new data source to your application, click the “+” (2) icon next to the “Sources” heading on the left side of the Data Sources module.

Select “Swagger API” (1) as the Data Sources data source type and enter a name (2) (For example, “KuikaSwaggerAPI”).
Then click on the “CREATE” (3) button.
In the next step you need to enter the URL required to connect to the API.

Swagger URL: Use the address https://builder3.kuika.com//KuikaSwaggerAPI/swagger/docs/v1.
Base URL: Enter https://builder3.kuika.com/KuikaSwaggerAPI.

Select No Auth as the authentication type. If the API needs to be authenticated, you can consider Kuika Auth or API Key options. In this example, the No Auth option is sufficient.
After entering the required information, click the CREATE button to create the data source connection. Once you complete this process, all actions within the Kuika Swagger API are automatically integrated into your data source.

2. Using Swagger API Actions on the Application Screen

Now you can add the actions defined in Kuika Swagger API to your application and use them in various screens. In this example, we will create a table screen where product stocks are listed.

Creating a List Screen: Prepare a list screen to show product stocks.

Add a Table element from the Elements panel in the UI Design module and drag and drop it to the screen.
Name the columns of the table in a meaningful way. For example: ID, Stock Code, Product Name, Barcode.

Adding an Action - Initial Action: Define an Initial Action for a Table element to automatically pull stock information from the API each time the product stock screen is opened.

Click the +ADD ACTION button from the Properties panel on the right side.
Follow the path Initial Actions > Custom > Datasource.

Select the Stock Get Product List From Rest action under the Rest heading. This action pulls product stock information from the API.

Linking Table Data Source: Select the table and set the data source to link the data pulled with the action to the table on the list screen.

To set the data source of the table, select the table and go to the Properties panel on the right.
Select the Stock Get Product List From Rest action under the Action heading from the Datasource menu.

3. Show Dynamic Data in a Table

Now let's define how each column in the table will be mapped to the data from the API:

Displaying ID Information:

Click on one of the Label elements in theID column.
Open the Properties > Value menu and select ID under Field to Display. Fills the ID column in the table with the ID data from the API.

Displaying Stock Code Information:

Click on one of the Label elements in the Stock Code column.
Select Stock Code from the Field to Display menu. Dynamically binds the stock code information to the relevant column of the table.

Displaying Product Name:

Click on one of the Label elements in the Name column.
Select Stock Name from the Field to Display menu. This will populate the product name column in the table with data pulled from the API.

Showing Barcode Information:

Click on one of the Label elements in the Barcode column.
Select Stock Barcode from the Field to Display menu. Links the barcode information to the corresponding column of the table.

4. Testing and Previewing Work

Once you have made all the adjustments, click Preview to test your application and check if the data from the API is correctly imported into the table.