Custom Actions and Data Binding
/

Create Custom Actions with API

Create Custom Actions with API

When developing applications with Kuika, you can use Rest Swagger API as a data source.

API Data Source Connection with Rest Swagger

To make data source connection with Rest Swagger API, go to Datasources view mode in the project you are working on in Kuika.

Datasources Ekranı

Through the left menu in the Datasources view mode, 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.

“Create Datasource” Butonu

To add a new data source to the application you are developing, click the + icon opposite the Datasources heading.

Rest Swagger Seçimi Ekranı

To add Rest Swagger API as a data source to the application you developed, select Rest Swagger API as Datasource type on the screen that opens and name it. We named it as Rest within the scope of this training content. After completing the naming process, click the CREATE button.

Rest Swagger API Ekranı

Enter the Swagger URL and Service Base URL information on the screen that opens.

Rest Swagger API ekleme ekranı ekran görüntüsü

This tutorial will link to the Kuika Swagger API source created as an example.

First, enter the URL https://builder3.kuika.com//KuikaSwaggerAPI/swagger/docs/v1 located at https://builder3.kuika.com/KuikaSwaggerAPI/swagger/ui/index as Swagger URL information. Then enter the URL https://builder3.kuika.com/KuikaSwaggerAPI on the same site, which is the Base URL information.

Then select No Auth from the No Auth, Kuika Auth and API Key authentication types in the drop-down menu titled Authentication Type.

Then create the Datasources link by clicking the CREATE button.

The connection you create automatically pulls the queries in Kuika Swagger API as action.

Rest Swagger API aksiyon menüsü ekran görüntüsü

The actions in KuikaSwaggerAPI are listed under the related data source link in the left menu in the Custom Actions panel in the Datasources view mode and in the UI Design view mode.

You can connect the actions you capture through KuikaSwaggerAPI data source to the application screens you develop.

Let's proceed with the scenario in which the stocks of the products in the data source are listed on a sample list screen.

Örnek liste ekranı ekran görüntüsü

In order to bind the related action on the list screen to pull the stocks of the products in the KuikaSwaggerAPI data source, first create a list screen. For this, drag and drop a Table element from DataRepeater elements to the screen. Then name the columns of the table. To change the column titles, select any Table Column under the title you want to change and enter the title you want to add in the title property in the properties. Then drag and drop Label elements into the columns of the table. After creating a simple listing screen, you can start working with actions.

You must add an Initial Action to pull the stock information of the products each time the Product Stock screen is opened.

Initial aksiyon ekleme ekran görüntüsü

To add an Initial Action, click the ADD ACTION button in Screen Properties.

In the menu that opens, hover over Initial Actions > Custom > Datasource. When you hover over the Datasource item titled Rest, the custom actions created with Rest Swagger will be listed. From this list, click on the Stock Get Product List From Rest custom action.

Then you need to determine the data source of the table to ensure the connection of the table that will perform the listing function with the stock information list of the products. Select the Table element on the screen to determine the data source of the table.

Tabloya veri kaynağı ekleme ekran görüntüsü

Open the Datasource menu via Properties on the right.

Click on the drop-down menu under the Action heading in the menu that opens. In the menu, select the Stock Get Product List From Rest custom action that will list the stock information. Now you have provided the data source connection of the table.

Now start to dynamically pull the value of the Label elements in the table where the ID information will be written from the data source to which the table is connected. To do this, first click on one of the Label elements in the ID column.

Then open the Value menu via Properties on the right.

In the menu that opens, click on the drop-down menu under Field to Display.

Select ID in the menu.

Start the process of dynamically pulling the value of the Label elements in the table where the Stock Code information will be written from the data source to which the table is connected. To perform this operation, first click on one of the Label elements in the Stock Code column.

Dinamik Stok Kod değeri çekme ekran görüntüsü

Then open the Value menu via Properties on the right.

In the menu that opens, click on the drop-down menu under Field to Display.

Select Stock Code in the menu.

Start the process of dynamically pulling the value of the Label elements in the table where the product names will be written from the data source to which the table is connected. To do this, first click on one of the Label elements in the Name column.

Dinamik Stok Adı değeri çekme ekran görüntüsü

Then open the value menu via Properties on the right.

In the menu that opens, click on the drop-down menu under Field to Display.

Select Stock Name in the menu.

Finally, start the process of dynamically pulling the value of the Label elements in the table where the barcode information will be written from the data source to which the table is connected. To perform this operation, first click on one of the Label elements in the Barcode column.

Dinamik Stok Barkod değeri çekme ekran görüntüsü

Then open the value menu via Properties on the right.

In the menu that opens, click on the drop-down menu under Field to Display.

Select Stock Barcode in the menu.

Click the Preview button to test the work you have developed.

Örnek uygulama ekran görüntüsü
No items found.

İlişkili diğer içerikler

No items found.

Sözlük

No items found.

Alt Başlıklar