HTTP component

The HTTP component allows you to connect your app to other apps or services using APIs. For example, you can connect to Airtable to display an external collection (registration list), to Mailchimp to send an email or to OpenWeatherMap to display the weather of the day in your application.

An API makes data or functionality from an existing application available for use by other applications. By connecting to the APIs, it is possible to use existing functionalities within your PandaSuite application.

Each PLC has its own operating mode. The connection to an API is done using the HTTP component.

Prepare the API connection

Get the URL of the API

Insert the HTTP component in your project, where it will be used. If requests to the API are used throughout the application or if it controls the behavior of your application, we recommend that you put this component in the Foreground.

Open the Component Properties window.

You need the reference URL of the API. This can be found in the technical documentation for the service you choose.

For example, here is the URL of the OpenWeatherMap API:

https://api.openweathermap.org/data/2.5/weather?q={city name}&appid={API key}

In the URL field, copy and paste everything from the "https:" to the "?" without including the "?". The rest of the information corresponds to the Query String that will be specified below.

Define API parameters

The API also provides you with parameters to customize the request.

Customize API calls using the Headers and Query String properties.

In some cases you will be asked for a Username and Password to use the API.

Cache management

Caching allows you to efficiently reuse previously retrieved or processed API data. Future requests are processed more quickly by accessing the primary data storage location and without using the network.

Depending on your use of API data, choose how your application behaves with respect to caching :

No cache: the application will make a network call and will not read the cache.
Cache first: the application looks for the result in the cache before making a request to the network.
Network and cache: the application will return the content of the cache but will still make the request to update it. This option allows you to have a quick response.

The Persistent Cache option allows you to keep the cache even after closing the application.

Set the actions

The HTTP component allows you to send or receive data using different available methods. It all depends on what you want to do with the data:

GET = request data from a specific resource. This is one of the most common methods.
PUT or PATCH = update a resource.
DELETE = delete a resource.
POST = create a resource.

Choose the content

This option is only required if you choose the method POST, PUT, PATCH etc... Choose the type of content that will be the subject of your request:

Text
JSON
XML
HTML

Test the connexion

Display the request results

Click the Edit button of the HTTP component (or double-click the visible field of the HTTP component).

Information appears.

Click the Test Request button.

View the results of your request: if the raw data matches your request, the API has been correctly configured.

Choose pagination

If your query uses a database, you will get more results than you can display on a single page or in a single set of query results. There are several types of pagination in the APIs: Offset pagination and Cursor pagination.

In PandaSuite, you can use Offset pagination, by adding two additional parameters in the query: an offset and a limit.

Start request

Now you have to launch the API query, for example automatically when the screen is displayed.

In this case, select the screen and click on Actions.

Select Current Screen > Interact with a Component > HTTP Component > Start Request.

Get the identifier

The identifier is essential to connect your component and therefore your API to another PandaSuite component, for example a collection.

To retrieve the identifier, double-click on the name. Paste in a text field and retrieve the identifier.

For example:

HTTP -> 5f903e615ccbd73fda000453

5f903e615ccbd73fda000453 is the identifier of this component.