Automatically fill forms with this StimulusJS controller

You open a page in your app you just gloriously created with Sjabloon. It has a form and you notice a little button in the bottom right-hand corner. What is it? What does it do?

This button, reading “FillForm” is a simple and little developer convenience button. When you click it (or press f) it will fill the form on the page with a name, email and password (if they exists).

How does it work? As most Javascript within Sjabloon it’s a Stimulus controller which is located on frontend/controllers/fill_form_controller.js. On connect() it checks if there are any form elements on the page and if you are running your app in development.

If both functions return true it adds the button component (ie. returning the html from the buttonTag()) to the dom. When clicked (or when you press f), it will analyse the page to see if there’s only one form available. If there’s only one form, it will check its input fields for “name”, “email” and “password”. If found, it will fill these with the values coming from nameValueOptions(), emailValueOptions() and passwordValueOptions().

You can seed these value arrays with whatever value you like or need. Additionally you can extend the input lookups to things like address, credit card, etc.

That’s it. Just a small convenience for more developer happiness. ☀️