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.
- Click the "Auto Fill"
button
component to open its inspect page. UnderEvent handler
, click**+ New**
. - In the Edit event handler, select
Control component
in action, and select theinput
component that you want to update as the target of the event. - 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.
- Under
Event handler
, click**+ New**
. - In the Edit event handler, select
Control component
in action, and select thenumber input
component that you want to update as the target of the event. - 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
- Click the
button
component to open its inspect page. UnderEvent handler
, click**+ New**
. - In the Edit event handler, select
Control component
in action, and select theform
component that you want to update as the target of the event. - Choose the
submit
method