跳到主要内容

REST API

In ILLA Cloud, the REST API functionality empowers developers to interact with external systems, services, and data sources by utilizing the Representational State Transfer (REST) architectural style. With the REST API in ILLA Cloud, developers can seamlessly integrate their low-code applications with other applications, databases, or services.

The REST API in ILLA Cloud allows for creating custom endpoints that can handle HTTP requests, such as GET, POST, PUT, and DELETE. This enables developers to perform various operations, including retrieving data, submitting data, updating records, and deleting information.

Create REST API

There are two ways to create a resource in Illa after signing into your Illa account.

  • Create in Resources

Sign into your Illa account, select **Resources** on the top of the page, and click **Create New** button.

external_resource

Select REST API from the database list.

action_list

Connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

After creating a resource, the ready REST API will display as shown.

rest_ex_ready

  • Create in Builder

Sign into your Illa account, create a project in Illa Builder in the **App** page, and navigate to the Action List at the bottom of the page. Click **new**, then select REST API from the database list. Then, connect to the database with the required parameters described in Connection Settings below.

Click **Test Connection** to see if we can successfully connect to the database. If yes, click Save Resources, else, double check the hostname, port, username, and password is correct.

Connection Settings

Here we need to provide information for connecting to REST API database.

rest_config

PropertiesRequiredDescription
NamerequiredThe name for resource when creating actions in the ILLA.
Base URLrequiredThe URL or IP address for your database
URL Parametersoptionalprovide additional information or modify the behavior of API requests
Headersoptionaladditional metadata about the API request or response
Cookiesoptionalsmall pieces of data that are stored on the client-side and sent with each API request
Authenticationoptionalverifying the identity of the user or application making the API request

Create Actions

We have created a REST API resource; we can add the action by selecting REST API from the action list and choosing the Create action button.

rest_resource_list

Now we have added the REST API server as an action to our building page.

rest

Configure REST API

PropertiesDescription
Action TypeGET, POST, PUT, HEAD, PATCH, DELETE, OPTIONS
URL Parameterprovide additional information or modify the behavior of API requests if not specified in connection setting
Headersadditional metadata about the API request or response if not specified in connection setting
Transformertransforming data into the style you like using JavaScript

GET

retrieve or fetch data from a server. When making a GET request, the client specifies the URL of the resource it wants to access, and the server responds with the requested data.

POST

create a new resource on the server. It allows clients to submit data to the server to be processed and stored. When sending a POST request, the client includes the data in the body of the request.

PUT

updating or replacing an existing resource. It is typically used to modify the state or content of a resource identified by a specific URL.

similar to the GET method, but with one key difference: the HEAD method retrieves only the headers of the response, without the response body.

PATCH

update a specific resource. It is typically used to make partial modifications to an existing resource without replacing the entire resource.

DELETE

request the removal of a specific resource or data identified by a given URL

Use case

We will demonstrate how to auto fill the form information from REST API data.

Step 1 Add an action

Let us create a table in REST API with columns id, name, and age. The id 1 document is what we want to show in the form component.

rest_get_all

Then we can create a new action for REST API from the action list in the app we want to build, listing all the data in the bucket and named restapi1.

Select GET for **Action Type**. In URL Parameters, put id for key and 1 for value.

Click Save and Run to activate this action.

rest_get_1

Step 2 Add Components

Add a form component with the default text "Form" and a "Submit" button to canvas.

Add an input component, a number input component, and a button component from **Insert** into the form.

Label the input component to be "Name", the number input component to be "Age" and the button component to be "Auto Fill".

Set the placeholder of the input component to "Please put your name here" and the default value of the number input to 0 as shown below.

rest_layout

Step 3 Configure the component

For the "Auto Fill" button components, we can configure it to set the value in input component.

  1. Click the "Auto Fill" button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["name"]}}

rest_get_input

Similarly, for "Auto Fill" button components to set value in number input component.

  1. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the number input component that you want to update as the target of the event.
  3. Choose the setValue action and set the value as {{restapi1.data[0]["age"]}}

rest_get_num

For the "Submit" button component, we can configure it to submit the form if the form is completed

  1. Click the button component to open its inspect page. Under Event handler, click **+ New**.
  2. In the Edit event handler, select Control component in action, and select the form component that you want to update as the target of the event.
  3. Choose the submit method

rest_submit_config

Step 4 Test

rest_test