How to submit a form and display the content from database to the Placeholder component in filament

[emeroid]

Package

Panel builder

Package Version

v3

How can we help you?

I have a form, when i submit the form, it dispatches an event, which sends an external api request and then stores the response in the database. I have created an endpoint that can be used to check if the response has been stored in the database. I would like to use the Placeholder component to poll this endpoint, and display the content, without page refresh.
See the image bellow.

I want as the form is submitted, the event is dispatched and the Placeholder component, poll the db and waits for the response, before displaying it in the component. ( this will be done without page refresh).

I am new to Filament, what is the possible solution to this?

[ShaungBhone]

https://filamentphp.com/docs/3.x/infolists/entries/getting-started

[emeroid]

Hi @ShaungBhone
Thanks for your feedback.
I have a question, do you have idea how the TextEntry components will get triggered when the form is submitted, so it can start polling the url like so:

TextEntry::make('title')
->url(fn (Post $record): string => route('posts.create', ['post' => $record]))

Lastly the infolists seems to work well with the edit page rather than the create page. Can this still work with the create page also?

[ShaungBhone]

Yeah. Not sure you can test with the docs.

[leandrocfe]

CreateLearningContent.php

protected function handleRecordCreation(array $data): Model
{
    $request = '...';
    $data['json_response'] = $request->json();

    $record = LearningContent::create($data);

    $this->form->fill($record->attributesToArray());

    $this->halt();
}

LearningContentResource.php

...
ViewField::make('json_response')
    ->view('custom-view'),

<!-- resources/views/custom-view.blade.php -->
<div>
    <h2>Response</h2>
    <code>
        <pre>
            {{ $getState() }}
        </pre>
    </code>
</div>

[emeroid]

@leandrocfe
Thanks for your response.

Here is my code:

 protected function handleRecordCreation(array $data): Model
  {
    $this->currentData = static::getModel()::create($data);
    ReplicateModelRequestCreated::dispatch($this->currentData);

    $timeout = 10; // Total timeout in seconds
    $interval = 1; // Polling interval in seconds
    $startTime = time();
    
    $response = null;

    while (time() - $startTime < $timeout) {
        // Query the database for the response
        $response = static::getModel()::find($this->currentData->id);
        
        if ($response && $response->response_data !== null) {
            // Response found, update the form and exit the loop
            $this->form->fill($this->currentData->attributesToArray());
            return $this->currentData ;
        }

        // Wait for the next polling interval
        sleep($interval);
    }

    $this->halt();

    return $this->currentData;
}

After using the suggested custome view, I tried the above to see if the response from the request will display in the component, it not displaying, it only display on edit.

Do you have idea how I can poll it? or a better way to make it work?

[leandrocfe]

Use a wire:poll

<code wire:poll.2s="refreshFormData">
    <pre>
        {{ $getState() }}
    </pre>
</code>

public ?Model $record = null;

protected function handleRecordCreation(array $data): Model
{
    $this->record = static::getModel()::create($data);
    ReplicateModelRequestCreated::dispatch($this->record);

    $this->form->fill($this->record->attributesToArray());
    $this->halt();
}

public function refreshFormData(): void
{
    if ($this->record) {
        $this->data['json_response'] = $this->record->json_response;
    }
}