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

Automatic Form to fill firebase path
https://github.com/manufosela/firebase-fillform

Last synced: 4 days ago
JSON representation

Automatic Form to fill firebase path

• Host: GitHub
• URL: https://github.com/manufosela/firebase-fillform
• Owner: manufosela
• License: mit
• Created: 2017-07-09T20:39:11.000Z (over 7 years ago)
• Default Branch: master
• Last Pushed: 2017-08-30T18:23:47.000Z (about 7 years ago)
• Last Synced: 2023-07-07T11:10:33.829Z (over 1 year ago)
• Language: HTML
• Size: 4.2 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# 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


```