I'm trying to build a wizard form in Filament. It has 2 steps:
And now I don't understand how to display the image in this form. It's not a file uploader. It's just an image.
As I understand, it can be done via ViewField. But don't understand how to specify that it should be some Image component and how to pass an url there in afterValidation on the first step. Please, help.
public function getSteps(): array
{
return [
Step::make('Product ID')
->description('Write a product id you want')
->schema([
TextInput::make('product_id')
->required()
->reactive()
])
->afterValidation(function(Get $get, Set $set){
$id = $get('product_id');
$product_image_url = Product::get_image_url($id);
$set('product_image', $product_image_url);
}),
Step::make('Confirmation')
->description('Check a product one more time and confirm you want it')
->schema([
ViewField::make('product_image')
...............
...............
]),
After messing about for a while, I needed a similar functionality. You can simply display the image in a Placeholder:
Placeholder::make('Image')
->content(function ($record): HtmlString {
return new HtmlString("<img src= '" . $record->URL . "')>");
})