Filament•2y ago

How to show results of an API in custom page table builder.

I've created a custom page in which I request to a URL with cURL to get an API and I want to show the results in the table builder on my custom page. How can I do that?

22 Replies

BKF Dev•2y ago

You can use this awesome plugin https://filamentphp.com/plugins/drop-in-action

Filament

Drop-In Action by Adam Weston - Plugins - Filament

A form component for Filament to integrate actions into forms.

Atena.DOP•2y ago

I don't want to have any form on my custom page I just want to have a table from the API result.

krekas•2y ago

On mount get data from api and fill the form

BKF Dev•2y ago

Could you show us your code ?

Atena.DOP•2y ago

I think I found an article that might help me https://filamentphp.com/blog/how-to-consume-an-external-api-with-filament-tables

Filament

How to consume an external API with Filament Tables by Leandro C. F...

Filament is a collection of tools for rapidly building beautiful TALL stack apps, designed for humans.

krekas•2y ago

it's just a basic livewire + laravel code to get your data from api

Atena.DOP•2y ago

Yes but the problem is in a custom page that implements HasTable I should return a Builder type object from getTableQuery method to show that in a table, that means it should be read from a database although I don't have any database for it and as a result it throws an error saying the result from that URL isn't of type Builder

toeknee•2y ago

return an empty query IIRC, or 'products' as an example... But Sushi should work fine.

benzo•2y ago

Great article! The call used in the example get all records. Do you know the best way to retreive external records from an API with records limit / pagination? I have an API with 10k records with a limit of 100 records max.

toeknee•2y ago

Just keep a counter and loop through? You can even use a throttle to limit the amount of calls per minute if the api is that restrictive

benzo•2y ago

The goal will be to match the filament table pagination and offset and trigger API call like this one: https://pokeapi.co/api/v2/pokemon/?limit=100&offset=300 I have the total records and the total pages from the API as well

toeknee•2y ago

So you don't want to consume, you want to integrate right?

benzo•2y ago

this is only to consume, read only but the data is changing and growing, like an order list I have the lead of a filament resource + sushi but not sure if I should start with this or make a custom page with table

toeknee•2y ago

That should suffice, just disable the edit/delete links and the create action in the list page

benzo•2y ago

Thanks, but I am no sure to understand how to get the filament page and pass it to the external api 🤷🏼‍♂️

toeknee•2y ago

So you are wanting to render this outside of filament? If so then a custom page with tables and sushi is needed

benzo•2y ago

@toeknee_iom thanks for your support, I made some progress but not sure if is the right way to achieve it: To resume, I would like the same behaviour of the article. But the external API I am using limits the max records I can get on a call. So what I have done so far is a Sushi Model with a static method params which allows me to setup two static properties ( $page and $recordsPerPage ) and return an eloquent builder. I overrided the getTableQuerymethod to setup those params by returning: return static::getResource()::getModel()::params($this->page, $this->tableRecordsPerPage); then the getRows()method of the model make a call with those params

 public function getRows()
    {
        $limit = self::$recordsPerPage;
        $offset = self::$page === 1 ? 0 : self::$page * self::$recordsPerPage;

        $url = "https://pokeapi.co/api/v2/pokemon?limit={$limit}&offset={$offset}";

        //....

 public function getRows()
    {
        $limit = self::$recordsPerPage;
        $offset = self::$page === 1 ? 0 : self::$page * self::$recordsPerPage;

        $url = "https://pokeapi.co/api/v2/pokemon?limit={$limit}&offset={$offset}";

        //....

now I can maybe add fake records to simulate the total number of records Then, and this is the final step, I would need to override how the filament pagination works but I do not know how to do and if it makes senses or if there is another way.

toeknee•2y ago

I’m not too sure myself tbh, does the sushi model not allow passing in a limit/page param

benzo•2y ago

Not by default but you can:

class Product extends Model
{
    use Sushi;

    protected static $recordsPerPage;

    protected static $page;

    public static function params($page, $recordsPerPage)
    {
        self::$page = $page;
        self::$recordsPerPage = $recordsPerPage;

        return self::query();
    }
//...

class Product extends Model
{
    use Sushi;

    protected static $recordsPerPage;

    protected static $page;

    public static function params($page, $recordsPerPage)
    {
        self::$page = $page;
        self::$recordsPerPage = $recordsPerPage;

        return self::query();
    }
//...

` I am making progress, I found a way to put the API result and display it on the selected filament page Now I will play with filters and scopes Thanks for your support!

toeknee•2y ago

Welcomes

fagner•3mo ago

@benzo Did you succeed in sending the resource pagination to the model? I'm trying to do this here in the resource and I'm not succeeding. I wanted to try a method that updates the query every time the pagination changes im using filament v3

toeknee•3mo ago

how urgent is it? V4 allows data from static data https://github.com/filamentphp/filament/issues/7105

GitHub

Static tables · Issue #7105 · filamentphp/filament

Move table's Blade components to support and document their usage.

Gaming

Programming

How to show results of an API in custom page table builder.