Extend url field

I need a slightly modified url field but I am stuck at extending it like written in the docs on Field Plugins.

All I want is a field to input DOIs. The clickable icon should resolve the DOI to let editors check if the identifier is correct. This should by done by opening “https://doi.org/” + the saved DOI on click on the icon.

Everything I got is an empty field …

Thank you so much for any hints!

Looks as if the input field itself is missing, there are two UI parts for the URL field it seems, the field and the input.

So which field from the UI Kit is the correct one to extend from when it seems that two fields are nested (field + input)?

In index.js I simply used extends: "k-url-field" so far but, I think I need to do more to get it right. extends: "k-url-field" only shows the saved data but without the field around.

Do I better set template in index.js? And how to nest fields here?

Have you been able to sort this out?

If not, I’ve written a draft recipe with this example: https://github.com/getkirby/getkirby.com/pull/859

1 Like

Hey @texnixe, wow, thanks!
I did not manage to go on here. I watched the two videos some time ago and thought that I might build the field without the parcel and vue.js setup etc.
But now, with your cookbook recipe, I will try it that way!

The recipe has been published in the meantime:

1 Like