Is there any method that can fetch data from external API ? Basically i have created a grid in admin page & in that grid i want to display the data from External API.
2 Answers
Should use uiComponent and provide a DataProvider which implements \Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface or extends \Magento\Ui\DataProvider\AbstractDataProvider.
There are example on the documentation: https://developer.adobe.com/commerce/frontend-core/ui-components/concepts/data-source/
- Create a Custom Module If you don’t have a custom module, create one.
Vendor/Module/registration.php:
<?php
\Magento\Framework\Component\ComponentRegistrar::register(
\Magento\Framework\Component\ComponentRegistrar::MODULE,
'Vendor_Module',
__DIR__
);
etc/module.xml:
<?xml version="1.0"?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
<module name="Vendor_Module" setup_version="1.0.0"/>
</config>
view/adminhtml/ui_component/vendor_list.xml
<?xml version="1.0" encoding="UTF-8"?>
<listing xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="provider" xsi:type="string">vendor_list.vendor_list_data_source</item>
<item name="deps" xsi:type="string">vendor_list.vendor_list_data_source</item>
</item>
<item name="spinner" xsi:type="string">vendor_list_records_columns</item>
</argument>
<dataSource name="vendor_list_data_source">
<argument name="dataProvider" xsi:type="configurableObject">
<argument name="class" xsi:type="string">Vendor\Module\Model\DataProvider</argument>
<argument name="name" xsi:type="string">vendor_list_data_source</argument>
<argument name="primaryFieldName" xsi:type="string">id</argument>
<argument name="requestFieldName" xsi:type="string">id</argument>
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">
Magento_Ui/js/grid/provider
</item>
<item name="update_url" xsi:type="url" path="mui/index/render" />
<item name="storageConfig" xsi:type="array">
<item name="indexField" xsi:type="string">
id
</item>
</item>
</item>
</argument>
</argument>
<argument name="data" xsi:type="array">
<item name="js_config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/provider</item>
</item>
</argument>
</dataSource>
<listingToolbar name="listing_top">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="template" xsi:type="string">ui/grid/toolbar</item>
<item name="stickyTmpl" xsi:type="string">ui/grid/sticky/toolbar</item>
</item>
</argument>
<bookmark name="bookmarks">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="namespace" xsi:type="string">vendor_list</item>
</item>
</item>
</argument>
</bookmark>
<component name="columns_controls">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsData" xsi:type="array">
<item name="provider" xsi:type="string">
vendor_list.vendor_list.vendor_list_records_columns
</item>
</item>
<item name="component" xsi:type="string">Magento_Ui/js/grid/controls/columns</item>
<item name="displayArea" xsi:type="string">dataGridActions</item>
</item>
</argument>
</component>
<filters name="listing_filters">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="columnsProvider" xsi:type="string">
vendor_list.vendor_list.vendor_list_records_columns
</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">
vendor_list.vendor_list.listing_top.bookmarks
</item>
<item name="namespace" xsi:type="string">current.filters</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="provider" xsi:type="string">
vendor_list.vendor_list.listing_top.listing_filters
</item>
<item name="imports" xsi:type="array">
<item name="visible" xsi:type="string">
vendor_list.vendor_list.vendor_list_records_columns.${ $.index }:visible
</item>
</item>
</item>
</item>
<item name="observers" xsi:type="array">
<item name="column" xsi:type="string">column</item>
</item>
</argument>
</filters>
<paging name="listing_paging">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">
vendor_list.vendor_list.listing_top.bookmarks
</item>
<item name="namespace" xsi:type="string">current.paging</item>
</item>
<item name="selectProvider" xsi:type="string">
vendor_list.vendor_list.vendor_list_records_columns.ids
</item>
</item>
</argument>
</paging>
</listingToolbar>
<columns name="vendor_list_records_columns">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">
vendor_list.vendor_list.listing_top.bookmarks
</item>
<item name="namespace" xsi:type="string">current</item>
</item>
<item name="editorConfig" xsi:type="array">
<item name="selectProvider" xsi:type="string">
vendor_list.vendor_list.vendor_list_records_columns.ids
</item>
<item name="enabled" xsi:type="boolean">true</item>
<item name="indexField" xsi:type="string">id</item>
<item name="clientConfig" xsi:type="array">
<item name="saveUrl" xsi:type="url" path="pbvreview/productreview/inlineEdit" />
<item name="validateBeforeSave" xsi:type="boolean">false</item>
</item>
</item>
<item name="childDefaults" xsi:type="array">
<item name="fieldAction" xsi:type="array">
<item name="provider" xsi:type="string">
vendor_list.vendor_list.dm_product_review_columns_editor
</item>
<item name="target" xsi:type="string">startEdit</item>
<item name="params" xsi:type="array">
<item name="0" xsi:type="string">${ $.$data.rowIndex }</item>
<item name="1" xsi:type="boolean">true</item>
</item>
</item>
<item name="storageConfig" xsi:type="array">
<item name="provider" xsi:type="string">
vendor_list.vendor_list.listing_top.bookmarks
</item>
<item name="root" xsi:type="string">columns.${ $.index }</item>
<item name="namespace" xsi:type="string">current.${ $.storageConfig.root}</item>
</item>
</item>
</item>
</argument>
<selectionsColumn name="ids">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="resizeEnabled" xsi:type="boolean">true</item>
<item name="resizeDefaultWidth" xsi:type="string">1</item>
<item name="indexField" xsi:type="string">id</item>
<item name="sortOrder" xsi:type="string">10</item>
</item>
</argument>
</selectionsColumn>
<column name="id">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="label" xsi:type="string" translate="true">Consent ID</item>
<item name="sortOrder" xsi:type="number">20</item>
</item>
</argument>
</column>
<column name="email">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="filter" xsi:type="string">text</item>
<item name="label" xsi:type="string" translate="true">Email</item>
<item name="sortOrder" xsi:type="number">30</item>
</item>
</argument>
</column>
</columns>
<container name="sticky">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="component" xsi:type="string">Magento_Ui/js/grid/sticky/sticky</item>
<item name="toolbarProvider" xsi:type="string">
vendor_list.vendor_list.listing_top
</item>
<item name="listingProvider" xsi:type="string">
vendor_list.vendor_list.vendor_list_records_columns
</item>
</item>
</argument>
</container>
</listing>
Vendor\Module\Model\DataProvider.php
<?php
namespace Vendor\Module\Model;
use Magento\Framework\App\RequestInterface;
use Magento\Framework\App\Request\DataPersistorInterface;
use Magento\Framework\HTTP\Client\Curl;
class DataProvider extends \Magento\Ui\DataProvider\AbstractDataProvider
{
protected $loadedData;
protected $request;
protected $dataPersistor;
protected $curl;
public function __construct(
$name,
$primaryFieldName,
$requestFieldName,
RequestInterface $request,
DataPersistorInterface $dataPersistor,
Curl $curl,
array $meta = [],
array $data = []
) {
$this->request = $request;
$this->dataPersistor = $dataPersistor;
$this->curl = $curl;
parent::__construct($name, $primaryFieldName, $requestFieldName, $meta, $data);
}
public function getData()
{
$id = $this->request->getParam('id');
$this->dataPersistor->set('id', $id);
if (isset($this->loadedData)) {
return $this->loadedData;
}
//filter and pagination logic
$pagesize = isset($this->request->getParam('paging')['pageSize']) ? $this->request->getParam('paging')['pageSize'] : 20;
$pageCurrent = isset($this->request->getParam('paging')['current']) ? $this->request->getParam('paging')['current'] : 1;
$filters = $this->request->getParam('filters', []);
$emailFieldValue = "";
if (isset($filters['email'])) {
$emailFieldValue = $filters['email'];
}
//call your external api endpoint here rest or graphql
$url = 'https://externalurl.com';
// GraphQL query
$query = <<<GRAPHQL
query usersHistory {
usersHistory(p: $pageCurrent, l: $pagesize, email: "$emailFieldValue") {
status
message
total_size
items {
id
email
}
}
}
GRAPHQL;
try {
$payload = json_encode(['query' => $query]);
// Set headers
$headers = [
'Content-Type' => 'application/json',
];
// Send request
$this->curl->setHeaders($headers);
$this->curl->post($url, $payload);
// Get response
$response = $this->curl->getBody();
$responseData = json_decode($response, true);
if ($responseData['data']['usersHistory']['status'] == 200) {
$this->loadedData['items'] = $responseData['data']['usersHistory']['items'] ?? [];
$this->loadedData['totalRecords'] = $responseData['data']['usersHistory']['total_size'];
}
} catch (\Exception $e) {
}
return $this->loadedData;
}
public function setLimit($offset, $size)
{
}
public function addOrder($field, $direction)
{
}
public function addFilter(\Magento\Framework\Api\Filter $filter)
{
}
}
Add required files to create the UI component grid only check my files of UI grid XML file and DataProvider how I integrated API and pass to grid collection.
I hope that will work for you
