phyce Posts - Answer Overflow

phyce

•Created by phyce on 3/8/2025 in #👊support

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?

2 replies

Gaming

Programming