Craft3 + Local Environment: Day 2 with Custom Plugins for Sprout Form Fields

Now that I've got my site working locally and I can run composer it's time for plugin development. I love that there's all sorts of documentation available but I'm a 'learn by doing' type a gal so I started with the Sprout Forms US States plugin. My logic was that this plugin made a custom select field and my first custom field attempt would be a text field (but with extra stuff to add a calendar icon and date masking).

The first step was to add it to my local build so I could see what that's all about. I felt the github install instructions

Add the library to your project via composer

were a bit lacking. How do I add the library to the project? What do I do in/to composer? Where do these zipped files go? I found all my answers back in the craft3 Intro to Plugin Dev documentation, specifically the bit about path repositories.

See, by digging around the craft3 file structure I found all the code for plugins in the /vendor directory. I wasn't sure why I couldn't just add the files there (but I learned later) but dropping files and manually updating composer.json to require that directory didn't work.

Directly taken from the craft3 docs, the path repository tells Composer to symlink your plugin into the /vendor folder right alongside other dependencies. I can do what I want to the files in my plugin directory and not touch the engine of the cms. I'm ok with that.

Lower in the craft docs is an important warning about path repositories. Composer will ignore path-based dependencies when you run composer update. So any time you change anything in composer.json, such as your plugin’s dependency requirements or its plugin information, you will need to completely remove and re-require your plugin in your project for those changes to take effect.

The moment of truth was here! Hey composer, how about you require that barrelstrength/sprout-forms-us-states package? And... it failed. Instead of panicking and swearing (my go to move) I decided to move forward with the Sprout Forms Range Slider plugin. Maybe, fingers crossed, it wasn't me. And it wasn't.

Field slider field in the backend

Field slider field on my test form with all fields to make sure they're following the site design

I don't remember the exact error message or what lead me to craft-sprout-forms-us-states/src/integrations/sproutforms/fields/States.php but the class declaration

class States extends BaseFormField implements PreviewableFieldInterface

didn't match the range slider. Once I changed extends BaseFormField to extends FormField the US State field worked too.

To make my date field plugin I just copied the US State field and changed every us-state to date-field and usstate to datefield. Add all my extra stuff to sprout-forms-date-field/src/templates/_formtemplates/fields/date/input.html and voila!

Now, how the hell do I get all this stuff back on the dev server for the client to see?

Next: BitBucket, SourceTree and buddy.works