APIs

APIs can be imported, configured and tested via the APIs tab on the left-hand side of any application page. APIs allow you to connect your applications to your backend data sources in a secure manner.

API Pane

The API pane allows you to create and modify your existing APIs. APIs are created and managed specific to a page so that widgets can only talk to APIs on their page. APIs can easily be moved or duplicated across pages using the overflow menu next to the API name or by dragging the API to the new page.

Name your APIs the way you would name a function i.e camel case. This makes it easier to bind it to your UI using{{ apiName.data }}

HTTP Method

This field takes in the method (GET, POST, PUT, DELETE) of the API and can be set using the dropdown.

Data Source

This field takes in the base url of the API. The base url is configured separately so that we can pre-fill the common headers and configurations for all APIs with the same data source.

Path

Path is the part of your API URL after the base URL. This part may include path and query params. Dynamic params can be configured inside the mustache syntax.

https://appsmith.com/v1/fetchUsers?name={{searchBox.text}}

In the above example,https://appsmith.comis part of the data source while /v1/fetchUsers?name={{searchbox.text}}is part of the path.

Query Params

Query params can be entered separately and they will be appended to the path in the URL encoded format.

Headers

The headers of an API can be configured for each API request.

Body

The body of the request can be configured in JSON / Form Data formats. Any part of the body can be dynamically bound using the mustache syntax. If the key of the body to be bound is a string, the mustache syntax must be wrapped in quotes.