firebase-fillform | Vaadin

Automatic Form to fill firebase path

[ This description is mirrored from README.md at github.com/manufosela/firebase-fillform on 2019-05-10 ]

firebase-fillform Published on webcomponents.org

It generate a form based in a firebase path to fill it easyly.

Works with an array of objects with a level of deep.

The fields can be simple fields or arrays.

For example:

{
  "movies" : [ {
    "classification" : ["science fiction", "adventure" ],
    "colección" : "Star Wars",
    "director" : "George Lucas",
    "formato" : "blue-ray",
    "titulo" : "The Phantom Menace",
    "valoracion" : 10
   } ]
 }

Is mandatory it exists in the path at least one entry because The component uses the first entry in the path to get the fields and generate the form.

You can use a firebase path to show a select option in a field. To do this the firebase path must have the same name of the field.

For example:

{
  "classification" : [ "science fiction", "adventure", "drama", "comedy", "horror", "psychological thriller", "crime", "romantic", "historical" ],
  "movies" : [ {
    "classification" : ["science fiction", "adventure" ],
    "colección" : "Star Wars",
    "director" : "George Lucas",
    "formato" : "blue-ray",
    "titulo" : "The Phantom Menace",
    "valoracion" : 10
   } ]
 }

Now the clasification field it is not a free field, it is shown like a select with the list values.

https://github.com/manufosela/firebase-fillform

Dependencies

  • polymerfire
  • web-animations-js

Use

Put the component in your polymer app.

  • path value of the path to get fields to fill
  • api-key value of the api-key of your firebase database
  • domain value of the domain of your firebase database.

IMPORTANT: If use 2 or more firebase-fillform components in the same page, only define path and api-key in the first component to avoid conflicts and firebase-app object redefinition.

Configure Firebase:

  • Enable google login method authentication
  • Add a domain if necessary
<h3>Basic firebase-fillform demo</h3>
<h4>Simple</h4>
<firebase-fillform name='simple-example' path="/categoria" api-key="AIzaSyBaehmgaklz_vaqsBVZhvBm0fsD7PF8PHQ" domain="coleccion-peliculas"></firebase-fillform>
<h3>Complex</h3>
<firebase-fillform name='complex-example' path="/peliculas" debug="true"></firebase-fillform>
</div>

Install

Link to this version
ImportedReleased 30 August 2017Other
Framework Support
Polymer 2.0+
Browser Independent
Install with
Release notes - Version 1.1.5

Dependencies

Polymer/polymer#^2.0.0

  • polymerfire#^2.1.0
  • paper-button#^2.0.0
  • polymerelements/paper-dropdown-menu#^2.0.0
  • polymerelements/iron-form#^2.0.0
  • polymerelements/paper-input#^2.0.1
  • polymerelements/paper-spinner#^2.0.0
  • polymerelements/paper-dialog#^2.0.0
  • polymerelements/paper-item#^2.0.0
  • polymerelements/paper-listbox#^2.0.0
  • polymerelements/neon-animation#^2.0.1
  • polymerelements/paper-dialog-scrollable#^2.1.0
  • paper-dropdown-menu-multi#^0.2.0