TC
Twill CMS•2mo ago
phyce

Using custom form inputs in a TwillBlockComponent

I'm trying to figure out how to add a custom form field inside a custom block. I have managed to get the vue component to render correctly, however it is not saving the input. CustomBlock.php: 
    public function getForm(): Form
    {
        return Form::make([
            BladePartial::make()->view('twill.partials.form._text_area')
                ->withAdditionalParams([
                    'label' => 'Text area',
                    'name'  => 'text_area',
                ]),
        ]);
    }
    public function getForm(): Form
    {
        return Form::make([
            BladePartial::make()->view('twill.partials.form._text_area')
                ->withAdditionalParams([
                    'label' => 'Text area',
                    'name'  => 'text_area',
                ]),
        ]);
    }
in resources/views/admin/pages/form.blade.php I've added: 
    @formField('text_area', [
        'name'    => 'text_area',
        'label'    => 'Text Area',
    ])
    @formField('text_area', [
        'name'    => 'text_area',
        'label'    => 'Text Area',
    ])
resources/views/twill/partials/form/_text_area.blade.php: 
<a17-text-area
    label="{{ $label }}"
    @include('twill::partials.form.utils._field_name')
    in-store="value"
></a17-text-area>

@unless($renderForBlocks || $renderForModal || (!isset($item->$name) && is_null($formFieldsValue = getFormFieldsValue($form_fields, $name))))
    @push('vuexStore')
        window['{{ config('twill.js_namespace') }}'].STORE.form.fields.push({
            name: '{{ $name }}',
            value: {!! json_encode($item->$name ?? $formFieldsValue) !!}
        })
    @endpush
@endunless
<a17-text-area
    label="{{ $label }}"
    @include('twill::partials.form.utils._field_name')
    in-store="value"
></a17-text-area>

@unless($renderForBlocks || $renderForModal || (!isset($item->$name) && is_null($formFieldsValue = getFormFieldsValue($form_fields, $name))))
    @push('vuexStore')
        window['{{ config('twill.js_namespace') }}'].STORE.form.fields.push({
            name: '{{ $name }}',
            value: {!! json_encode($item->$name ?? $formFieldsValue) !!}
        })
    @endpush
@endunless
From what I can see the push to vuexStore never happens, my guess is that using BladePartial to add a form input is not the right way. What am I missing, or what's the right way to achieve this?
1 Reply
phyce
phyceOP•2mo ago
I managed to figure it out. Just had to create a class extending BaseFormField and another one extending TwillFormComponent in order to be able to use the field in getForm(). I followed the implementation for a basic input and got it to work. However it appears that there is no need anymore to add any logic in the blade template to push to vuexStore. is that right? _text_area.blade.php works just by having 
<a17-text-area
    label="{{ $label }}"
    @include('twill::partials.form.utils._field_name')
    in-store="value"
></a17-text-area>
<a17-text-area
    label="{{ $label }}"
    @include('twill::partials.form.utils._field_name')
    in-store="value"
></a17-text-area>
and nothing else. when is additional logic to push to vuexStore needed? I would like to understand

Did you find this page helpful?