Contact us Create app

Directory

← Back

firebase-fillform

Automatic Form to fill firebase path

Author

Rating

Links

Popularity

<100

[ 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>

Compatibility

(Loading compatibility data...)

Last updated: 2017-08-30

Was this helpful? Need more help?
Leave a comment or a question below. You can also join the chat on Discord or ask questions on StackOverflow.

Version

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
Released
2017-08-30
Maturity
IMPORTED
License
Other

Compatibility

Framework
Polymer 2.0+
Browser
Browser Independent

firebase-fillform - Vaadin Add-on Directory

Automatic Form to fill firebase path firebase-fillform - Vaadin Add-on Directory
**[ This description is mirrored from README.md at [github.com/manufosela/firebase-fillform](https://github.com//manufosela/firebase-fillform/blob/1.1.5/README.md) on 2019-05-10 ]** # firebase-fillform [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/manufosela/firebase-fillform) 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: ```json { "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: ```json { "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 ```html

Basic firebase-fillform demo

Simple

Complex

```
Online