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.

Select REST API from the database 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.

• 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.

Properties	Required	Description
Name	required	The name for resource when creating actions in the ILLA.
Base URL	required	The URL or IP address for your database
URL Parameters	optional	provide additional information or modify the behavior of API requests
Headers	optional	additional metadata about the API request or response
Cookies	optional	small pieces of data that are stored on the client-side and sent with each API request
Authentication	optional	verifying 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.

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

Configure REST API

Properties	Description
Action Type	GET, POST, PUT, HEAD, PATCH, DELETE, OPTIONS
URL Parameter	provide additional information or modify the behavior of API requests if not specified in connection setting
Headers	additional metadata about the API request or response if not specified in connection setting
Transformer	transforming 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.

HEAD

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.

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.

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.

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"]}}

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"]}}

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

Step 4 Test