The HTTP component

Connect your app to an API using the HTTP component. 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.

Connect to the API

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

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.

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.
Cache and network

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

You can make data available offline with the Offline mode of the HTTP component.

Method

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

Other parameters

The HTTP component provides you with additional parameters to connect to the API:

Auto-start: This property allows the HTTP component to automatically launch the request as soon as the application or page is started. This means that the user doesn't need to perform a specific action to initialize or start the request.
Offline mode: Offline mode allows requests to be queued when the component detects that it doesn't have an Internet connection. When the connection is restored, it will automatically send the requests from this queue. This is useful, for example, for a sales presentation used at a trade show (offline). If the salesperson enters data, it is automatically sent as soon as the device reconnects to the network.
Proxy mode: Proxy mode is useful for bypassing API security restrictions and not exposing sensitive data locally (only the proxy knows about it). Proxy mode is mandatory as soon as Authorization is enabled,
Authorization: This is secure API authorization management (see proxy mode), either through an API key (HTTP header) or through HTTP Basic.

Test the request

Display the request results

Click on the HTTP component to open the configuration mode.

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

If you haven't activated Auto Start or if you are using a POST, don't forget to add the action to initiate the API request. For example, automatically on the screen display.

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

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