How to Create a custom field select (1-n relationship) with livewire #580

christmex · 2023-07-19T12:09:25Z

christmex
Jul 19, 2023

*note :

I’m sorry about my english, english its not my first language.
If you get an error or get confused feel free to comment.

Hi there, in this tutorial, I'm about to share with you guys how to make a "Custom field select (1-n relationship) with livewire" in backpackforlaravel, actually backpack already provides select2 with their backpack pro 🤩, but let's just assume that we don't have backpack pro for now, and we really love to use livewire, here's what I did, without any further ado let's begin.

Steps

Step 0. Preparation

Let's install the livewire, open your terminal and slap this command

composer require livewire/livewire

Step 1. Create our custom create and edit blade

create a new file placed in resources/views/vendor/backpack/crud/create.blade.php and put this code

//this is create.blade.php in resources/views/vendor/backpack/crud/
@extends(backpack_view('blank'))

@once
  @push('befor_styles')
  <livewire:styles/>
  @endpush
@endonce

@php
  $defaultBreadcrumbs = [
    trans('backpack::crud.admin') => url(config('backpack.base.route_prefix'), 'dashboard'),
    $crud->entity_name_plural => url($crud->route),
    trans('backpack::crud.add') => false,
  ];

  // if breadcrumbs aren't defined in the CrudController, use the default breadcrumbs
  $breadcrumbs = $breadcrumbs ?? $defaultBreadcrumbs;
@endphp

@section('header')
    <section class="header-operation container-fluid animated fadeIn d-flex mb-2 align-items-end d-print-none">
        <h3 class="text-capitalize mb-0" style="line-height: 30px;">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</h3>
        <p class="ms-2 ml-2 mb-0">{!! $crud->getSubheading() ?? trans('backpack::crud.add').' '.$crud->entity_name !!}.</p>
        @if ($crud->hasAccess('list'))
            <p class="mb-0 ms-2 ml-2">
                <small><a href="{{ url($crud->route) }}" class="d-print-none font-sm"><i class="la la-angle-double-{{ config('backpack.base.html_direction') == 'rtl' ? 'right' : 'left' }}"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
            </p>
        @endif
    </section>
@endsection

@section('content')

<div class="row">
	<div class="{{ $crud->getCreateContentClass() }}">
		{{-- Default box --}}

		@include('crud::inc.grouped_errors')

		  <form method="post"
		  		action="{{ url($crud->route) }}"
				@if ($crud->hasUploadFields('create'))
				enctype="multipart/form-data"
				@endif
		  		>
			  {!! csrf_field() !!}
		      {{-- load the view from the application if it exists, otherwise load the one in the package --}}
		      @if(view()->exists('vendor.backpack.crud.form_content'))
		      	@include('vendor.backpack.crud.form_content', [ 'fields' => $crud->fields(), 'action' => 'create' ])
		      @else
		      	@include('crud::form_content', [ 'fields' => $crud->fields(), 'action' => 'create' ])
		      @endif
                {{-- This makes sure that all field assets are loaded. --}}
                <div class="d-none" id="parentLoadedAssets">{{ json_encode(Basset::loaded()) }}</div>
	          @include('crud::inc.form_save_buttons')
		  </form>
	</div>
</div>

@endsection


@once
  @push('after_scripts')
    <livewire:scripts/>
  @endpush
@endonce

the point is, we want to add the livewire assets, anyways, livewire v3, will launch very soon, so maybe we don't need to do this anymore, also what I know backpack will support livewire in this V6, so let's see how it goes, cant wait for it.

okay next we create a new file placed in resources/views/vendor/backpack/crud/edit.blade.php and put this code

//this is edit.blade.php in resources/views/vendor/backpack/crud/
@extends(backpack_view('blank'))

@once
  @push('befor_styles')
  <livewire:styles/>
  @endpush
@endonce

@php
  $defaultBreadcrumbs = [
    trans('backpack::crud.admin') => backpack_url('dashboard'),
    $crud->entity_name_plural => url($crud->route),
    trans('backpack::crud.edit') => false,
  ];

  // if breadcrumbs aren't defined in the CrudController, use the default breadcrumbs
  $breadcrumbs = $breadcrumbs ?? $defaultBreadcrumbs;
@endphp

@section('header')
    <section class="header-operation container-fluid animated fadeIn d-flex mb-2 align-items-end d-print-none">
        <h3 class="text-capitalize mb-0" style="line-height: 30px;">{!! $crud->getHeading() ?? $crud->entity_name_plural !!}</h3>
        <p class="ms-2 ml-2 mb-0">{!! $crud->getSubheading() ?? trans('backpack::crud.edit').' '.$crud->entity_name !!}.</p>
        @if ($crud->hasAccess('list'))
            <p class="mb-0 ms-2 ml-2">
                <small><a href="{{ url($crud->route) }}" class="d-print-none font-sm"><i class="la la-angle-double-{{ config('backpack.base.html_direction') == 'rtl' ? 'right' : 'left' }}"></i> {{ trans('backpack::crud.back_to_all') }} <span>{{ $crud->entity_name_plural }}</span></a></small>
            </p>
        @endif
    </section>
@endsection

@section('content')
<div class="row">
	<div class="{{ $crud->getEditContentClass() }}">
		{{-- Default box --}}

		@include('crud::inc.grouped_errors')

		  <form method="post"
		  		action="{{ url($crud->route.'/'.$entry->getKey()) }}"
				@if ($crud->hasUploadFields('update', $entry->getKey()))
				enctype="multipart/form-data"
				@endif
		  		>
		  {!! csrf_field() !!}
		  {!! method_field('PUT') !!}

		  	@if ($crud->model->translationEnabled())
		    <div class="mb-2 text-right">
		    	{{-- Single button --}}
				<div class="btn-group">
				  <button type="button" class="btn btn-sm btn-primary dropdown-toggle" data-toggle="dropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
				    {{trans('backpack::crud.language')}}: {{ $crud->model->getAvailableLocales()[request()->input('_locale')?request()->input('_locale'):App::getLocale()] }} &nbsp; <span class="caret"></span>
				  </button>
				  <ul class="dropdown-menu">
				  	@foreach ($crud->model->getAvailableLocales() as $key => $locale)
					  	<a class="dropdown-item" href="{{ url($crud->route.'/'.$entry->getKey().'/edit') }}?_locale={{ $key }}">{{ $locale }}</a>
				  	@endforeach
				  </ul>
				</div>
		    </div>
		    @endif
		      {{-- load the view from the application if it exists, otherwise load the one in the package --}}
		      @if(view()->exists('vendor.backpack.crud.form_content'))
		      	@include('vendor.backpack.crud.form_content', ['fields' => $crud->fields(), 'action' => 'edit'])
		      @else
		      	@include('crud::form_content', ['fields' => $crud->fields(), 'action' => 'edit'])
              @endif
              {{-- This makes sure that all field assets are loaded. --}}
            <div class="d-none" id="parentLoadedAssets">{{ json_encode(Basset::loaded()) }}</div>
            @include('crud::inc.form_save_buttons')
		  </form>
	</div>
</div>
@endsection

@once
  @push('after_scripts')
    <livewire:scripts/>
  @endpush
@endonce

Step 2. Create our livewire component

Use this command

php artisan make:livewire Fields/LivewireSelect

then let's open the blade file resources/views/livewire/fields/livewire-select.blade.php, and put this code

<div>
    {{-- Do your work, then step back. --}}
    <div class="form-group position-relative">
        <input type="hidden" name="{{ $field['name'] }}" wire:model="field_value">
        <input type="text"
            wire:model.debounce.500ms="form_search"
            placeholder="Search {{$field['label']}}"
            @include('crud::fields.inc.attributes') 
        >
        @if(!empty($form_search) && !empty($search_result))
            <ul class="list-group" style="z-index:999; width:100%; box-shadow:0 1px 2px 0 rgba(0, 0, 0, 0.05)">
                @if(!empty($search_result))
                    @foreach($search_result as $item)
                        <li class="list-group-item"style="cursor:pointer" wire:click="setValue({{$item->id}},'{{ $item->{$field["attribute"]} }}')">{{ $item->{$field['attribute']} }}</li>
                    @endforeach
                @endif
                <li class="list-group-item disabled">{{$field['hint']}}</li>
            </ul>
        @endif
    </div>
</div>

then open the app/Http/Livewire/Fields/LivewireSelect.php and replace all code with this code

<?php

namespace App\Http\Livewire\Fields;

use Livewire\Component;

class LivewireSelect extends Component
{
    public $field;
    public $field_value;
    public $form_search;
    public $search_result;
    public $modelDefined;

    public function mount(){
        
        if($this->field['value']){
            $this->field_value = $this->field['value'];
        }
        if(old($this->field['name'])){
            $this->field_value = old($this->field['name']);
        }
        if($this->field['value'] || old($this->field['name'])){
            $this->form_search = $this->field['model']::where('id',$this->field_value)->first()->{$this->field['attribute']};
        }
        if(!empty($this->field['default'])){
            $this->field_value = $this->field['default'];
            $this->form_search = $this->field['model']::where('id',$this->field_value)->first()->{$this->field['attribute']};
        }
    }
    public function render()
    {
        return view('livewire.fields.livewire-select');
    }

    public function updatedFormSearch(){
        if(!empty($this->form_search)){
            $this->search_result = $this->field['model']::where($this->field['attribute'],'LIKE','%'.$this->form_search.'%')->paginate(5)->items();
            if(count($this->search_result) == 0){
                $this->field_value = NULL;
            }
        }else {
            $this->field_value = NULL;
        }
    }

    public function setValue($id,$value){
        $this->search_result = NULL;
        $this->field_value = $id;
        $this->form_search = $value;
    }
}

Step 3. Create our custom backpack field

Use this command

php artisan backpack:field LivewireSelect

After that let's open that file, usually placed in resources/views/vendor/backpack/crud/fields/ , and rewrite the code with this

{{-- livewire_select_field field --}}
@php
    $field['value'] = old_empty_or_null($field['name'], '') ?? ($field['value'] ?? ($field['default'] ?? ''));
@endphp

@include('crud::fields.inc.wrapper_start')
    <label class="@error($field['name']) text-danger @enderror">{!! $field['label'] !!}</label>
    @include('crud::fields.inc.translatable_icon')

    <livewire:fields.livewire-select :field="$field" />

    {{-- HINT --}}
    @if (isset($field['hint']))
        <p class="help-block">{!! $field['hint'] !!}</p>
    @endif
@include('crud::fields.inc.wrapper_end')

Step 4. Use this custom field in your CreateOperation and UpdateOperation

CRUD::addField([
    'name' => 'your_column_id',
    'type' => 'livewire_select',
    'label' => 'Some Label',
    'hint' => 'Write more for best result',
    'attribute' => 'relationship_column_name',
    'default' => request()->has('your_column_id') ? request('your_column_id') : NULL,
    'model' => \App\Models\SomeModel::class,
    'attributes' => [
        'autocomplete' => 'off'
    ],
]);

Step 5. Result

That's all guys, let me know what you think, also if you get any issues, let me know, thanks 🙏

tabacitu · 2023-07-24T16:24:03Z

tabacitu
Jul 24, 2023
Maintainer

I love it! Thanks a lot for sharing this @christmex . As you said, this can probably be improved quite a bit:

now that Livewire v3 is out, step 1 can go away entirely;
we can probably create a livewire_field field type, so that people can point to that field directly;

Then it's fewer steps. I'll ask @phpfour to take another look at this soon, when we develop some accessory Livewire components. We can improve it then 💪

Thanks again @christmex !

1 reply

christmex Jul 25, 2023
Author

Thank you @tabacitu 🙏

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

How to Create a custom field select (1-n relationship) with livewire #580

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

How to Create a custom field select (1-n relationship) with livewire #580

Uh oh!

Uh oh!

christmex Jul 19, 2023

Steps

Step 0. Preparation

Step 1. Create our custom create and edit blade

Step 2. Create our livewire component

Step 3. Create our custom backpack field

Step 4. Use this custom field in your CreateOperation and UpdateOperation

Step 5. Result

Replies: 1 comment · 1 reply

Uh oh!

tabacitu Jul 24, 2023 Maintainer

Uh oh!

christmex Jul 25, 2023 Author

christmex
Jul 19, 2023

Replies: 1 comment 1 reply

tabacitu
Jul 24, 2023
Maintainer

christmex Jul 25, 2023
Author