Twill: Custom Field Types

[noxify]

Hi,

is it currently possible to add custom field types?

Example:

• Alternative WYSIWYG Editor (e.g. tinymce )

I have checked the code and (for me) it seems it's currently not possible to create custom field types.

Thanks & Greets

[ifox]

Hi @noxify,

there are multiple ways to add custom fields actually. I'll expand with more details in a dedicated section of Twill's docs when I get more time but in the meantime, here are some hints:

• each module form view can welcome any custom html
• form values are stored using Vuex (in window.STORE.form.fields as objects containing a name and a value)

As long as your custom field is saving its value to Twill's Vuex store, it will be available for you to process in your module's repository, before or after saving. If your custom field directly maps to a fillable field in your Eloquent model, no custom code is needed there. Vuex store will need to be initialized on form load too. You can take inspiration from existing Twill fields.

if you need to use your custom fields in multiple forms you can create a dedicated custom fields view folder and include it from your form views. You could also leverage Twill and Laravel existing infrastructure around views (by adding new fields or overriding existing fields in your application views/admin/partials/form directory if you'd like to keep using Twill's @formField directive).

You could also potentially add Vue components to Twill's build. It is not documented, but if you know your way around Webpack, npm scripts and Laravel Mix, you should be able to merge in anything you want.

Flexibility is key and we know there are all sorts of ways to extend Twill's capabilities, but we can also feel you and recognize that our documentation is not thorough yet! Working on it :)

[zipavlin]

You could also potentially add Vue components to Twill's build. It is not documented, but if you know your way around Webpack, npm scripts and Laravel Mix, you should be able to merge in anything you want.

I am thinking what would be the most straightforward way to create custom fields, but I have some thoughts about it:

1. Would it be possible to use approach similar to building blocks?
2. Should npm script "twill-build" copy components to vendor/area17/twill/frontend/js/components/custom-components as it does with blocks and then just include this folder in building main-form.js?
3. What would be the most logical place to store custom Vue components?
   3.1. resources/assets/js/components (as blocks live there)
   3.2. resources/views/admin/partials/form/components (as custom fields would live in ../form)

[zipavlin]

If somebody else will need custom Vue components - I solved it by:

1. create new folder resources/assets/js/components that will store custom components
2. change npm scripts to (include cleaning and copying folder custom-components")

"twill-copy-blocks": "npm run twill-clean-blocks && mkdir -p resources/assets/js/blocks/ && mkdir -p vendor/area17/twill/frontend/js/components/blocks/customs/ && mkdir -p vendor/area17/twill/frontend/js/components/custom-components/ && cp -R resources/assets/js/blocks/* vendor/area17/twill/frontend/js/components/blocks/customs && cp -R resources/assets/js/components/* vendor/area17/twill/frontend/js/components/custom-components",
"twill-clean-blocks": "rm -rf vendor/area17/twill/frontend/js/components/blocks/customs/* && rm -rf vendor/area17/twill/frontend/js/components/custom-components/*",

1. add to vendor/area17/twill/frontend/js/main-form.js:

// Custom components
const customComponents = require.context('@/components/custom-components/', true, /\.(js|vue)$/i)
customComponents.keys().map(component => {
  const componentName = component.match(/\w+/)[0].replace(/([a-z])([A-Z])/g, '$1-$2').replace(/\s+/g, '-').toLowerCase()
  return Vue.component('custom-' + componentName, customComponents(component))
})

1. use custom component (fe. resources/assets/js/components/TestComponent.vue)

<custom-test-component></custom-test-component>

---

There are a few issues with this approach as I see it:

1. npm scripts will fail if resources/assets/js/components doesn't exist
2. it includes changing package file (vendor/area17/twill/frontend/js/main-form.js), which is not ideal

Is there any way around this?

---

Sort of unrelated question: why is "npm ci" required in "twill-build" command? It takes forever to run.

[ifox]

Hi @zipavlin,

We are working on new build scripts and providing the ability to add custom component is definitely on our list, so you won't have to modify Twill's source, of course.

npm ci is required to install the Javascript dependencies needed to build the front end assets in use by Twill's admin views. We use ci instead of install to make sure that the package-lock.json file that we share is in use while installing, in order to ensure reproducible builds. If we were to use install a developer using Twill could end up with a different version of a package that we use.

Now, during development, you shouldn't have to run npm ci each time you want to build, which is why we also provide development scripts with HMR, but you can totally create your own build script that's not running npm ci each time, as long as you make sure to re-install with npm ci when updating Twill.