Attention! Alpha version. We do not recommend using eZeeBase for live projects. But you can test it and give us feedback.

Getting Started

Install Script

To install eZeeBase add this script to your website's code inside <head> tag.

Make sure to put your actual project id inside the code.

Authentication

To use Firebase Authentication through eZeeBase you will need to activate auth module in your project settings.

Forms

You can setup forms to sing up or sing in your users through website. To do so, you will need to add a cstom attribute to the <form> element.

Name:

Value is different for every form type. Refer to the paragraphs below for details of each type's value.

The main fields for authentification are going to be Email and Password. Make sure to set proper names for these fields in your form:

For Email field:

For Password field:

Sing up

To Sign up a user through a form, add the following value to <form> element's custom attribute:

Value:

HTML example:

	
<!-- Sign-up form -->
<form data-eb:auth-form="signup">
 <input type="email" name="email"/>
 <input type="password" name="password"/>

 <button type="submit">Sign Up</button>
</form>

Sign In

To Sign in a user through a form, add the following value to <form> element's custom attribute:

Value:

HTML example:

	
<!-- Sign-in form -->
<form data-eb:auth-form="signin">
 <input type="email" name="email"/>
 <input type="password" name="password"/>

 <button type="submit">Sign In</button>
</form>

Update

To update member through website add the following value to <form> element's custom attribute:

Value:

HTML example:

	
<!-- Update form -->
<form data-eb:auth-form="update">
 <input type="text" name="displayName"/>
 <input type="text" name="photoURL"/>

 <input type="email" name="email"/>
 <input type="password" name="password"/>

 <button type="submit">Sign In</button>
</form>

Additional Update Fields

For update form you can setup additional fields to add user information. You can add Photo URL and Name. Set text input name attributes' value as the following:

For Name field:

For Photo URL field:

Buttons

You can set custom attributes to buttons and links, which will open sign up/sign in modals or singn out user. To setup that, add custom attribute with the following name:

Name:

Sign up button

Add the following value to sing up button's cutom data attribute:

Value:

HTML example:

	
<!-- Sign-up button -->
<button data-eb:auth-btn="signup">Sign Up</button>


<!-- Sign-up link -->
<a href="#" data-eb:auth-btn="signup">Sign Up</a>

Sign in button

Add the following value to sign in button's custom data attribute

Value:

HTML example:

	
<!-- Sign-in button -->
<button data-eb:auth-btn="signin">Sign In</button>


<!-- Sign-in link -->
<a href="#" data-eb:auth-btn="signin">Sign In</a>

Logout

Add the following value to sign out button's custom data attriubute

Value:

HTML example:

	
<!-- Sign-out button -->
<button data-eb:auth-btn="signout">Sign Out</button>


<!-- Sign-out link -->
<a href="#" data-eb:auth-btn="signout">Sign Out</a>

Fields

You can display user data from auth module fields by adding custom attributes to elements on your website. Data can be displayed as an inner text or as a html attribute value.

Do display data add an attribute with the following name:

Name:

Then add a value based on what data you want to display. Look at the following section to find a right attribute.

Inner text

To display user's data as an element's inner text, add the following value to the element's custom attribute:

Uid

It will display user's unique ID as the element's inner text.

Email

It will display user's email as the element's inner text.

Display Name

It will display user's Display Name as the element's inner text.

Photo URL

It will display user's Photo URL as the element's inner text.

HTML example:

	
<!-- Fields like inner text -->
<span data-eb:auth="uid"></span>
<span data-eb:auth="email"></span>
<span data-eb:auth="displayName"></span>
<span data-eb:auth="photoURL"></span>

HTML attribute

To display user's data as an element's html attribute, add the following value to the element's custom attribute:

uid

It will display user's unique ID as the element's value to HTML "value" attribute.

Email

It will display user's email as the element's value to HTML "value" attribute.

Display Name

It will display user's Display Name as the element's value to HTML "value" attribute.

Photo URL

It will display user's Photo URL as the element's value to HTML "src" attribute.

HTML example:

	
<!-- Fields like HTML attribute -->
<input type="text" data-eb:auth="uid|value"/>
<input type="email" data-eb:auth="email|value"/>
<input type="email" data-eb:auth="displayName|value"/>
<img data-eb:auth="photoURL|src"/>

Content Visibility

You can hide and show elements on page based on wether user is authenticated or not. To do so, you need to add custom attributes with the following name to such elements.

Name:

Add the following value to Hide if the user is logged in, and show if not:

Value:

HTM: example:

	
<!-- Hide if the user is logged in, and show if not -->
<img src="default_user.png" data-eb:auth-display="false"/>

Add the following value to Show if the user is logged in, and hide if not:

Value:

HTM: example:

	
<!-- Show if the user is logged in, and hide if not -->
<img data-eb:auth="photoURL|src" data-eb:auth-display="true"/>

Preloader Screen

You can set a preloader screen, which will hide all of your page's content while Firebase is being initialized on your page.

To add the preloader screen, create an element of the screen and add the following custom attribute to that element:

Name:

Value:

eZeeBase script will be showing and hiding the preloader screen.

HTML example:

	
<div class="preloader" data-eb:auth-loading-screen></div>

Firestore

To use Firebase Firestore database on your website, you will need to activate Firestore module in your eZeeBase project settings.

Collection

To display Firestore collection, first you need to add a Colleection Wrapper <div> and claim a collection in custom attribute of that <div>:

Name:

There are several ways to display collection on a page.

Show as a list of document items

Set attribute's value to a name of your Firestore collection (e.g. "projects") to display all documents from that collection.

HTML example:

	
<!-- Show all documents from "users" collection -->
<div data-eb:db-collection="users">
 ...
</div>

Show specific document item

Set attribute's value to a name of your Firestore collection specified with document ID (e.g. "projects/{docId}").

HTML example:

  
<!-- Show special document from "users" collection -->
<div data-eb:db-collection="users/JEijcJVC3wOX9dqmjSQ">
	...
</div>

Show specific document with current user's ID

Set attribute's value to a name of your Firestore collection specified with user's uid (e.g. "users/{uid}").

HTML example:

  
<!-- Show document with current user's ID from "users" collection -->
<div data-eb:db-collection="users/{uid}">
 ...
</div>

Show specific document with ID got from URL parameter

Set attribute's value to a name of your Firestore collection specified with document ID (e.g. "projects/{project_id}").

HTML example:

  
<!-- Show document with special ID witch got from URL parameter -->
<div data-eb:db-collection="products/{product_id}">
 ...
</div>

Listenning to changes

To set real time listening to changes in collection, add the following custom attribute to Collection Wrapper <div>:

Name:

Value:

HTML example:

  
<!-- Listen changes from all documents from "users" collection -->
<div data-eb:db-collection="users" data-eb:db-watch="true">
 ...
</div>

Snapshot and no-snapshot

Inside of your Collection Wrapper you can create elements, which will be shown when collection has documents to show or when it is empty.

Snapshot

Snapshot element is shown when collection has elements to show at current filters and conditions. Snapshot nests documents inside.

To set Snapshot, add the following custom attribute to an element inside Collection Wrapper:

Name:

Value:

HTML example:

  
<div data-eb:db-collection="users">

 <!-- You will see your documents here -->
 <div data-eb:db-snapshot>
 ...
 <div>
 
</div>

No-snapshot

No-snapshot element is shown when collection has no elements to show at current filters and conditions. It is an empty state for your collection list.

To set No-snapshot, add the following custom attribute to an element inside Collection Wrapper:

Name:

Value:

HTML example:

  
<div data-eb:db-collection="users">

 <!-- If you don't have any documents at all you will see that section -->
 <div data-eb:db-no-snapshot>
  NO USERS
 </div>
 
</div>

Document

Documents are shown inside of the Snapshot. To show documents, you need to create an element inside snapshot, which will serve as a template for all documents in this collection.

To setup that, add the following custom attribute to an element inside of the Snapshot.

Name:

Value:

HTML example:

  
<div data-eb:db-collection="users">
 <div data-eb:db-snapshot>
 
  <!-- That element will be copied for each document in snapshot -->
  <div data-eb:db-doc>
  ...
  <div>
  
 <div>
</div>

Filters

You can set a filter to your Collection list.

To do that, add the following custom attribute to Collection Wrapper:

Name:

Value for the attribute should include your filter condition written in Firestore syntaxis (e.g. [['price','>',500]]).

HTML example:

  
<div data-eb:db-collection="products" data-eb:db-filters="[['price','>',500]]">
	...
</div>

Order

You can set an order for your collection list. To do that, add the following custom attribute to your Collection Wrapper:

Name:

Order by one field

To set order by one field from document collection, set the attribute value to the field name in specific fromat (e.g. [['price']]).

HTML example:

  
```html
<!-- Order by one field -->
<div data-eb:db-collection="products" data-eb:db-order="[['price']]">
	...
</div>

Descending order

To set a descending order, add that parameter in attribute's value (e.g. [['price', 'desc']]).

HTML example:

  
<!-- Descending order -->
<div data-eb:db-collection="products" 
data-eb:db-order="[['price', 'desc']]">
	...
</div>

Order by two fields

To set an order by two fields, write a condition with multiple parameters (e.g. [['price', 'asc'],['discount','desc']]).

HTML example:

  
<!-- Order by two fields -->
<div data-eb:db-collection="products" 
data-eb:db-order="[['price', 'asc'],['discount','desc']]">
	...
</div>

Fields

Inside of a document you can display document's fields data as an inner text or HTML attributes ("src", "value", "href" etc).

To do that, set custom attributes to elements inside of the document template.

Add an attribute with the following Name:

Name:

Inner text

To display data as an inner text of the element, set value to field name (e.g. "projects").

HTML example:

  
<!-- Fields like inner text -->
<h3 data-eb:db-field="name"></h3>

HTML attribute

To display data as a HTML attribute ("src", "value", "href" etc), set value to field name and attribute name divided by "|" symbol (e.g. "picture_url|src").

HTML example:

  
<!-- Fields like HTML attribute -->
<img data-eb:db-field="picture_url|src"/>

HTML attribute with variable

You can add variables such as document ID ({docId}) inside of a value (e.g. "https://www.shop.com/products/{docId}|href").

HTML example:

  
<!-- Fields like HTML attribute with variable -->
 <a data-eb:db-field="https://www.shop.com/products/{docId}|href">Link</a>
<img data-eb:auth="photo_url|src"/>

Field value from map

To display data from map field, add the map field name before actual field name and divide them with "." (e.g. "name.first").

HTML example:

  
<!-- Field value from map -->
<h3 data-eb:db-field="name.first"></h3>
<h3 data-eb:db-field="name.second"></h3>

Field value from array

To display data from array field, specify array item number in attribute value (e.g. "photos[0]|src").

HTML example:

  
<!-- Field value from array -->
<img data-eb:auth="photos[0]|src"/>
<img data-eb:auth="photos[1]|src"/>

Arrays

To display arrays inside of a document, first you will need to create an Array Wrapper - an element with the following custom attribute:

Name:

Set attribute's value to the name of array field in your document (e.g. "items").

Inside of the Array Wrapper, create a template item for array items by adding the following custom attribute:

Name:

Set attribute's value to the name of array item in your document and the item index (e.g. "item, idx"). This element will be copied as a template for all items in the array.

HTML example:

  
<div data-eb:db-doc>
 <!-- Array wrapper -->
 <ol data-eb:db-array="items">

  <!-- Array item will be copied for each array item
  and defind name of loop variable -->
  <li data-eb:db-array-item="item">
    ...
  </li>

 </ol>

<div>

Display data from array item

You can display data from array item by setting the following attribute to elements inside of the array item template:

Name:

Set attribute's value to the name of a field inside of the array item (e.g. "item").

HTML example:

  
<ol data-eb:db-array="items">
 <li data-eb:db-array-item="item">
 
  <!-- Use an array item in HTML attribute -->
  <a data-eb:db-field="#{item}|href">
  
   <!-- Use an array item in inner text -->
   <span data-eb:db-field="item"></span>
  </a>
  
 </li>
</ol>

Display array item as a map

In case your array object has a map structure, you can display it's data setting attribute value to the name of the map + "." + field name (e.g. "object.name").

HTML example:

  
<ul data-eb:db-array="objects">
 <li data-eb:db-array-item="object">
 
  <!-- Also an array item can be a map -->
  <span data-eb:db-field="object.name"></span>-
  <span data-eb:db-field="object.value"></span>
 </li>
</ul>

Editing array

Here are several important things about working with arrays within document or create from:

Create array item

You can only create array items within a document create or update form.

Add the following custom attribute to the button inside of the array warapper:

Name:

Value:

HTML example:

  
<form data-eb:db-doc data-eb:db-form="update">
 <ol data-eb:db-array="items">
  <li data-eb:db-array-item="item, idx">
   <input type="text" data-eb:db-field="item.str|value">
  </li>
  
  <button data-eb:db-array-item-add type="button" name="button">Add</button>
 </ol>
 
 <button type="submit" name="button">Save</button>
</form>

Delete array item

To delete array item, you can add a delete button or link inside of the array item. It can only be done withing a document update or create form. Add the following custom attribute to this button/link:

Name:

Value:

HTML example:

  
<form data-eb:db-doc data-eb:db-form="update">
 <ol data-eb:db-array="items">
  <li data-eb:db-array-item="item, idx">
   <input type="text" data-eb:db-field="item.str|value">
   
   <a data-eb:db-array-item-delete href="#">X</a>
   
  </li>
 </ol>
 <button type="submit" name="button">Save</button>
</form>

Forms

You can setup forms inside of Collection Wrapper to create or update collection documents. To do that, add a from with the following custom attribute name:

Name:

Then set attribute's value as it is explained in the following paragraphs

Create

For Create form, add the following custom attribute value to the form

Value:

Create form should be outside of the Snapshop.

HTML example:

  
<div data-eb:db-collection="product">
 <!-- The create form shoud be outside of snapshot element -->
 <form data-eb:db-form="create">
  <input type="text" data-eb:db-field="name|value"/>
  <input type="number" data-eb:db-field="price|value"/>
	
  <button type="submit">Create</button>
 </form>
</div>

Update

For Update form, add the following custom attribute value to the form:

Value:

Create form should be inside of the document element.

HTML example:

  
<div data-eb:db-collection="product">
 <div data-eb:db-snapshot>
  <div data-eb:db-doc>
			
   <!-- The update form shoud be inside of snapshot element -->
   <form data-eb:db-form="update">
    <input type="text" data-eb:db-field="name|value"/>
    <input type="number" data-eb:db-field="price|value"/>
			
    <button type="submit">Update</button>
   </form>

  <div>
 <div>
</div>

Delete

To delete document, add a delete button or link inside of the document and set the following attribute to that button or link.

Name:

Value:

HTML example:

  
<div data-eb:db-collection="lists/1UKp0cP4NahXdqG1VTPu">
 <div data-eb:db-snapshot>
  <form data-eb:db-doc data-eb:db-form="update">
   <a href="#" data-eb:db-doc-delete>Delete</a>
  </form>
 </div>
</div>

Form handlers

You can create "before" and "after" handlers for your form, which can be used to call functions.

To create "before" handler, add the following attribute to the form:

Name:

Set attribute's value to the name of your handler (e.g. "addCreatedDate").

To create "after" handler, add the following attribute to the form:

Name:

Set attribute's value to the name of your handler (e.g. "success").

HTML example:

  
<!-- You can use "before" and "after" handlers -->
<form data-eb:db-form="create" data-eb:db-form-before="addCreatedDate" 
 data-eb:db-form-after="success">
 <input type="text" data-eb:db-field="name|value"/>
 <input type="number" data-eb:db-field="price|value"/>

 <button type="submit">Create</button>
</form>

<script>
 function addCreatedDate(doc) {
  doc.created = new Date();
  return doc;
 }

 function success() {
  alert('Document created!');
 }
</script>
Navigation
Getting Started
Auth
Firestore