On this page
Installation
Install Lara Zeus Qr by running the following commands in your Laravel project directory.
1composer require lara-zeus/qr
Migration
Make sure to edit your resource migration to add the required columns.
The main one will be the same as your component; in the example below, it is set as qr_code
.
If you want to store the personalization, another column is required; in the example, it is options
.
1 Schema::create('ticket_replies', function (Blueprint $table) {2 // other columns3 $table->string('qr_code');4 $table->text('options');5 // other columns6});
Cast
The personalization's are stored as string but the component will use it as array so you need to tell to your model to cast it as array.
1class QrCode extends Model2{3 use HasFactory;4 5 protected $casts = [6 'options' => 'array'7 ];8}
Usage:
use it in your resource
1\LaraZeus\Qr\Components\Qr::make('qr_code') 2 // to open the designer as slide over instead of a modal. 3 // Comment it out if you prefer the modal. 4 ->asSlideOver() 5 6 // you can set the column you want to save the QR design options, you must cast it to array in your model 7 ->optionsColumn('options') 8 9 // set the icon for the QR action10 ->actionIcon('heroicon-s-building-library')11 12 // more options soon13 ,
Render the QR Code.
you can render the QR code in any component that accept HTML using the QR Facade:
1\LaraZeus\Qr\Facades\Qr::render(data:'dataOrUrl')
and it's accept these options:
1?string $data = null,2?array $options = null,3string $statePath = 'url',4string $optionsStatePath = 'options',5bool $downloadable = true
Usage with Table and Infolist
to insert the QR code in any FilamentPHP table or infolist, it's better to be displayed in a popover or modal,
and you can use our plugin Popover:
1PopoverEntry::make('name')2 ->trigger('click')3 ->placement('right')4 ->offset([0, 10])5 ->popOverMaxWidth('none')6 ->icon('heroicon-o-chevron-right')7 ->content(\LaraZeus\Qr\Facades\Qr::render(data:'dataOrUrl')),
If you just want to print the QrCode in the InfoList you can use TextEntry with formatStateUsing
method and pass the state and the $record as params.
1TextEntry::make('qr_code')2 ->formatStateUsing(function (string $state, $record) {3 return \LaraZeus\Qr\Facades\Qr::render(4 data: $state,5 options: $record->options // This is your model. We are passing the personalizations. If you want the default just comment it out.6 );7 }),
Usage with any action
to use the QR code as an action in anywhere you want:
1Action::make('qr-action')2 ->fillForm(fn(Model $record) => [3 'qr-options' => \LaraZeus\Qr\Facades\Qr::getDefaultOptions(),// or $record->qr-options4 'qr-data' => 'https://',// or $record->url5 ])6 ->form(\LaraZeus\Qr\Facades\Qr::getFormSchema('qr-data', 'qr-options'))7 ->action(fn($data) => dd($data)),
upload configuration:
to customize the upload disk and directory pass the param:
1\LaraZeus\Qr\Facades\Qr::getFormSchema('qr-data', 'qr-options', uploadOptions: ['disk','/qr-code-logos'])