DEV Community

Cover image for Generating beautiful HTML forms with FireDrill
Scott Lepper
Scott Lepper

Posted on

Generating beautiful HTML forms with FireDrill

In a previous Post I showed you how to use FireDrill to easily find data in your Firebase database. Now I'll show you how you can easily generate beautiful material design based html forms from your data.

Let's do this! Head over to FireDrill.

See here for how to Connect.

Once you're connected, click Forms. Enter your collection that you want to generate a form from, then click Generate Form. You will see the form generated below. Notice it will detect the datatypes based on your data and generate the appropriate input.

gen

So we see it's generated the appropriate inputs based on the data: checkboxes, text inputs and date pickers are generated. Now we want to move our fields around. Hover over a field to see it's drag indicator.

drag

So I've dragged available down to the bottom, and also moved created down a bit.

drop

Great, this is the form I want. Now let's Copy it so we can add it to an app we are developing.

copy

That's it! Now the HTML form is copied to your clipboard! Let's paste it into our favorite HTML editor (VS Code for me) and see what it looks like.

paste

Awesome! In a matter of seconds we've generated a complete HTML form. NOTE The form elements use components from Angular Material, so you'll need that included in your project.

If you like FireDrill show some love and give me a star on GitHub. Thanks for reading!

Top comments (1)

Collapse
 
thelazydogsback profile image
thelazydogsback • Edited

Hello...
Trying to connect to FD for the first time -- I've authorized the domain, etc.
I keep getting JSON parse errors:

ERROR SyntaxError: Unexpected string in JSON

However, my JSON appears fine and has been linted, etc. -- is there some particular format I need to be aware of?
thanks

Edit:

If I use the form to config instead, I can view, but:

  • "Clone" gives me

    main.6b918ce9aff61d5e6be7.js:1 ERROR TypeError: Converting circular structure to JSON

  • and Generate Form gives me:

main.6b918ce9aff61d5e6be7.js:1 ERROR TypeError: Cannot read property '0' of undefined
at Object.updateDirectives (main.6b918ce9aff61d5e6be7.js:1)