Twill CMSthelongestsigh

Custom form fields

I'm trying to make a custom form field to override the custom WYSIWYG form field. I've followed this guide https://twillcms.com/guides/creating_custom_components_form_fields_and_blocks.html I feel like there are some steps left out of there. For example where do i need to define the Vue component? Is there a config file for that. I've been snooping around in twill source and i see everything is stored in A17Config but how could i override this or solve this. Maybe there is another way to add custom css to a WYSIWYG form field or alter tiptap config?

Twill

thelongestsigh•365d ago

I'm also wondering do you use Quill or Tiptap?

ifox•365d ago

Hi @thelongestsigh sorry support has been a bit slow on discord in the past few days. In twill 3 Tiptap is the new default type we use for WYSIWYG fields. That guide specifies the location of Vue components:

File:

resources/assets/js/components/HelloWorld.vue

File:

resources/assets/js/components/HelloWorld.vue

thelongestsigh•365d ago

In the example you use this, but how do you define the component name "a17-custom-number" <a17-custom-number label="{{ $label }}" :precision="{{ $precision }}" currency="{{ $currency }}" decimal-separator="{{ $decimalSeparator }}" thousand-separator="{{ $thousandSeparator }}" @include('twill::partials.form.utils._field_name') in-store="value" ></a17-custom-number>

ifox•365d ago

the paths are also configurable, see https://github.com/area17/twill/blob/29db4a8c6ce25263c0c3f86ecdff568b0d815a12/config/twill.php#L192

GitHub

twill/twill.php at 29db4a8c6ce25263c0c3f86ecdff568b0d815a12 · area1...

Twill is an open source CMS toolkit for Laravel that helps developers rapidly create a custom admin console that is intuitive, powerful and flexible. Chat with us on Discord at https://discord.gg/c...

ifox•365d ago

It's automatically registered in the vue app for you from its path So having resources/assets/js/components/CustomNumber.vue would compile as a17-custom-number

thelongestsigh•359d ago

ohh right thanks for the tip i was already wondering how it was possible @ifox.dev I tried implementing this the way it's described in the documentation. But i keep getting the same error message.

thelongestsigh•359d ago

thelongestsigh•359d ago

This is my form

thelongestsigh•359d ago

this is my partials form

thelongestsigh•359d ago

my vue component is based on the default tiptap editor https://tiptap.dev/examples/default

Headless WYSIWYG Text Editor – Tiptap Editor

thelongestsigh•359d ago

ifox•359d ago

put it under views/twill not viewa/admin in Twill 3

thelongestsigh•359d ago

Tried it but still doesn't work

ifox•359d ago

with the same error?

thelongestsigh•359d ago

Yes. Do i need to run 'php artisan twill:build'?

ifox•359d ago

yes, but that won't fix this error. before creating a form field partial try to use the Vue component directly into your form

thelongestsigh•359d ago

the page gets loaded but i think the vue component is ignored since there is no change

thelongestsigh•359d ago

I tried both ways but no luck

ifox•359d ago

ran twill:build successfully? Do you find your code in the compiled form js file?

thelongestsigh•359d ago

Seems like an issue with tiptap Any ideas on this?

ifox•359d ago

I'm going to need to see your Vue component file

thelongestsigh•359d ago

i used tiptap's default editor from here https://tiptap.dev/examples/default

Headless WYSIWYG Text Editor – Tiptap Editor

ifox•359d ago

tiptap is already in twill, and I'm not sure how you're implementing it in your component

thelongestsigh•359d ago

i know .. but i'm trying to add an extra button to the tiptap editor the implementation is the same as on the link i sent you

thelongestsigh•359d ago

ifox•359d ago

Twill is on Vue 2 so you can't use the vue 3 version of tiptap

thelongestsigh•359d ago

thanks for the info i managed to build where are the dist files located?

ifox•359d ago

at the end of twill:build it is copying them to your public folder under assets

thelongestsigh•359d ago

No i still couldn't find it. I can't load the component in any way Maybe there is another way to add custom css to a WYSIWYG form field or alter tiptap config?

ifox•359d ago

css you can add through the extra_css blade stack, but altering tiptap config beyond the toolbar options that twill makes available also requires rebuilding the assets the fact that you ran into an issue with tiptap for vue3 means the build found your component can't find text-edit in any of the dist files?

thelongestsigh•359d ago

nope nowhere in there main-form, main-buckets and all others don't have it

thelongestsigh•359d ago

I've tried overriding the vendor WysiwgTiptap.vue which also didn't work.

ifox•359d ago

alright, I'll try to reproduce. What is your node version?

thelongestsigh•359d ago

v16.18.1

ifox•359d ago

Ok, on Twill 3 I'd recommend 18 but probably not related

thelongestsigh•359d ago

oh right did you reproduce?

ifox•359d ago

I can't focus on this right now sorry, but I will and get back to you, please be patient

thelongestsigh•359d ago

Any idea when, i have a project to deliver and this is the last step to finish it

ifox•359d ago

just tested the hello world example successfully: in resources/assets/js/components/HelloWorld.vue:

<template>
  <!-- eslint-disable -->
  <div>
    Hello {{ name }}
  </div>
</template>

<script>
  /* eslint-disable */

  export default {
    props: ['name']
  }
</script>

<template>
  <!-- eslint-disable -->
  <div>
    Hello {{ name }}
  </div>
</template>

<script>
  /* eslint-disable */

  export default {
    props: ['name']
  }
</script>

in resources/views/twill/partials/form/_hello-world.blade.php:

<a17-hello-world name="test"></a17-hello-world>

<a17-hello-world name="test"></a17-hello-world>

and in my form: @formField('hello-world') renders "Hello test" on my form all I did was php artisan twill:build after creating the vue file

thelongestsigh•359d ago

I'll try Still no luck. Thinking there is a problem with my project so i'll try in another one

thelongestsigh•359d ago

Tried it in another project and i still get this. Would you mind sharing the project you tested in? So i can test it locally

ifox•359d ago

your form blade file should be under resources/views/twill/pages it's currently still under admin. Did you upgrade from twill 2? oh I guess you tried in a twill 2 project

thelongestsigh•359d ago

yep i tried in a twill 2 project

ifox•359d ago

where did you put the partial?

thelongestsigh•359d ago

i'm trying in a new fresh project right now to see the results

thelongestsigh•359d ago

ifox•359d ago

twill 2 doesn't know about a twill folder it should be under admin

thelongestsigh•359d ago

I still haven't been able to resolve it but i've made a repository with the new project i've created and copied your HelloWorld.vue component in. Maybe if you can have a look at it

thelongestsigh•359d ago

https://github.com/toonvank/Twill-form-test

GitHub

GitHub - toonvank/Twill-form-test: Twill form test

Twill form test. Contribute to toonvank/Twill-form-test development by creating an account on GitHub.

thelongestsigh•358d ago

I've created an issue on github https://github.com/area17/twill/issues/2260

GitHub

Not able to load a custom component · Issue #2260 · area17/twill

Description I am trying to make a custom component for adding custom buttons to a wysiwyg field in twill admin forms. I've created a project from scratch trying to implement the steps. This git...

thelongestsigh•355d ago

@ifox.dev could you please look into this?

ifox•354d ago

Hi @thelongestsigh I will this week.

thelongestsigh•346d ago

Thank you, appreciate it Any updates on this?

ifox•346d ago

Hi @thelongestsigh sorry for the delay, this is my next priority now that 3.0.2 is released

_crp87•345d ago

Hey 👋 how would you provide a custom form field like this wysiwyg editor from within a package? Can they also be registered from package path inside package Service Provider?

ifox•345d ago

https://github.com/area17/twill/blob/4ff9d9694adfe10842f7324ed9cc03e98f33146a/src/TwillPackageServiceProvider.php#L76

ifox•338d ago

@thelongestsigh I tested your repository and it worked without changing anything

ifox•338d ago

I did find a syntax error in your blade file that could explain it not working for you if you're using a browser that doesn't like it, but I have no problem with it in chrome:

seeni333•338d ago

How to create custom form filed becuase in Twill 3 all fields are render dynamically and also all view files are inside in vendor folder? how to create custom field in controller in getForm method?

thelongestsigh•337d ago

I tried both on chrome and firefox but i'm really baffled this is what i see

thelongestsigh•337d ago

ifox•337d ago

@thelongestsigh did you try with a simple string first, it doesn't seem like your form blade file is even loading on your end @seeni333 views can be published, like with any other Laravel package. and form fields OOP classes can be extended.

seeni333•337d ago

ok thank you @ifox.dev

thelongestsigh•337d ago

Yea i tried it

ifox•337d ago

I'm not sure how to help, at this point I would need you to screenshare to see the problem myself since I can't reproduce it even with your repository.

Twill CMS Join

1.4KMembers

View on Discord

Want results from more Discord servers?

Add your server

New Settings approachHey, a i have a small question - how build a settings page like in https://demo.twill.io/settings/se Render repeater in block blade fileI have made a block named "gallery" with a repeater containing medias named "gallery-item", please h Fetch all images in a blockHow do you fetch all the images in a block? For e.g i have this block <x-twill::medias name="sl Repeater without blocksHow do you add and render a repeater without including it in the block?Adding custom blocks to modulesHow do you add custom blocks to modules? Generally i add blocks to a module using $form->add(BlockEd $renderData returns null when trying to render nestedblocks@php /** @var \A17\Twill\Services\Blocks\RenderData $renderData */ dd($renderData) Fetch all models with field value of XSorry to ask such a basic question but I want to do the following.... I have a model called Work (an Displaying Block elements on the Front Pagehow do you display block elements on the frontpage? And i don't mean the preview file. I want to acc dashboard routeHello. I have a problem with dashboard config I have a Category and CategoryArticle Models I have a Twill Role based accessHow would i go about adding a Role based access to CMS Components and its entries. For e.g in an ima Twill assets errorHello to everyone i have an website in production builded in twill but some twill assets in there a Where to find block repositories?I've seen in the tutorial(https://www.youtube.com/watch?v=kAcJ5G2GhiA) some blocks like "paragraph &[3.0.0] Block class - getBlockTitle()Hi, I was trying to move Blade blocks to Class. When I wanted to move `@twillBlockTitleField` in cla [3.0.0] componentBlock overriding getBlockIcon doesn't seem to work?(Successfully changed the title by overriding it's static function) Checked twill:list:icon for the [3.0.0] Maintaining automated Permalink Generation when using getCreateForm to add fields.As soon as I add any fields, using the Formbuilder on this function, the automated permalink disappe multi select selected optionsI'm using the multi select as documented in https://twill.io/docs/form-fields/multi-select.html#mult [3.0.0-rc4] - How to show current value in a select form fieldCurrently I have my select field defined as: `@formField('select', [ 'name' => 'work_year', [3.0.0-rc4] Images not found on remote server - League\\Glide\\Filesystem\\FileNotFoundExceptionI just went from my local to my remote server and some images are showing up others are getting a 5 [Twill2] Do settings section support media and how?As title says, is it possible to inject media here or should I make a custom settings singleton to h [3.x.dev] Call to undefined method ReflectionUnionType::getName()Newbie to Twill here. Fresh install of Laravel 10.4.1 / PHP 8.2.4 / MYSQL 8.0.32 on Ubuntu Budgie 2

Gaming

Programming

Custom form fields