Filament•16mo 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?

20 Replies

BKF Dev•16mo 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.D•16mo 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•16mo ago

On mount get data from api and fill the form

BKF Dev•16mo ago

Could you show us your code ?

Atena.D•16mo 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•16mo ago

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

Atena.D•16mo 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•16mo ago

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

benzo•15mo 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•15mo 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•15mo 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•15mo ago

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

benzo•15mo 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•15mo ago

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

benzo•15mo ago

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

toeknee•15mo ago

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

benzo•15mo 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•15mo ago

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

benzo•15mo 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•15mo ago

Welcomes

Gaming

Programming

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