Skip to content

Update firebase version #11

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
MariyaDemy wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Update firebase version #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d9381bd
[update] proxy code to be compatible with Firebase 12.6
MariyaDemy Nov 23, 2025
35fbf6d
[update] README
MariyaDemy Nov 23, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 0 additions & 1 deletion .gitignore
View file
Open in desktop

This file was deleted.

112 changes: 53 additions & 59 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,6 @@
Firebase adapter for Webix UI
=============================

[![npm version](https://badge.fury.io/js/webix-firebase.svg)](https://badge.fury.io/js/webix-firebase)

Library allows using [Webix](http://webix.com) components with [FireBase](https://firebase.google.com/)

Latest version will work with Webix 6.2+, if you are using an older version of Webix, you need to use version 0.5 of this package.
Expand All @@ -21,66 +19,63 @@ Include Webix and Firebase files on the page

```html
<!-- Webix -->
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
<!-- Webix-Firebase adapter -->
<script type="text/javascript" src="../codebase/webix-firestore.js"></script>
<!-- FireBase -->
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-firestore.js"></script>
<script type="module" src="../codebase/webix-firestore.js"></script>
<!-- FireBase from the CDN -->
<body>
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.6.0/firebase-app.js";
import { getFirestore, collection } from "https://www.gstatic.com/firebasejs/12.6.0/firebase-firestore.js";
</body>
```

Create main firebase connection
Create a main firebase connection

```js
firebase.initializeApp({
const app = initializeApp({
apiKey: "YOU API KEY HERE",
projectId: "webix-demo"
});

// create firebase connection, and assign it to webix
var db = firebase.firestore();
db.settings({ timestampsInSnapshots:true });

webix.firestore = db;
// create a firebase connection, and assign it to webix
webix.firestore = getFirestore(app);
```

Init webix component, using "firebase->{reference}" as data url
Init webix component, using "firebase->{reference}" as a data url

```js
webix.ui({
id:"dtable",
view:"datatable",
autoConfig:true,

// load data from "books" collection
url: "firestore->books",
// save data to "books" collection
save:"firestore->books"
}
```
```

That is it.

Adding "url" property will enable data loading and automatic updates of component when data changed in the firebase.
Adding "url" property will enable data loading and automatic updates of component when data changed in the firebase.

Adding "save" property ensures that all changes in the datatable will be saved to the Firebase
Adding "save" property ensures that all changes in the datatable will be saved to the Firebase.

### Using FireBase references

Instead of using text url you can use firestore collections directly
Instead of using a text url you can use firestore collections directly

```js
firebase.initializeApp({
const app = initializeApp({
apiKey: "YOU API KEY HERE",
projectId: "webix-demo"
});

// create firebase connection, and assign it to webix
var db = firebase.firestore();
db.settings({ timestampsInSnapshots:true });
// create a firebase connection, and assign it to webix
const db = getFirestore(app);

var proxy = webix.proxy("firestore", db.collection("books"));
const proxy = webix.proxy("firestore", collection(db, "books"));

webix.ui({
view:"list",
Expand All @@ -92,7 +87,7 @@ webix.ui({

### Dynamic data loading

You can use "load" command to (re)load data in the component.
You can use "load" command to (re)load data in the component.

```js
$$("dtable").clearAll();
Expand All @@ -114,27 +109,29 @@ Include Webix and Firebase files on the page

```html
<!-- Webix -->
<script type="text/javascript" src="http://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="http://cdn.webix.com/edge/webix.css">
<script type="text/javascript" src="https://cdn.webix.com/edge/webix.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.webix.com/edge/webix.css">
<!-- Webix-Firebase adapter -->
<script type="text/javascript" src="../codebase/webix-firebase.js"></script>
<!-- FireBase -->
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/5.0.4/firebase-database.js"></script>
<script type="module" src="../codebase/webix-firebase.js"></script>
<!-- FireBase from the CDN -->
<body>
import { initializeApp } from "https://www.gstatic.com/firebasejs/12.6.0/firebase-app.js";
import { getDatabase, ref } from "https://www.gstatic.com/firebasejs/12.6.0/firebase-database.js";
</body>
```

Create main firebase connection

```js
firebase.initializeApp({
databaseURL: "https://webix-demo.firebaseio.com/"
const app = initializeApp({
databaseURL: "https://webix-demo.firebaseio.com/"
});

// create firebase connection, and assign it to webix
webix.firebase = firebase.database();
// create a firebase connection, and assign it to webix
webix.firebase = getDatabase(app);
```

Init webix component, using "firebase->{reference}" as data url
Init webix component, using "firebase->{reference}" as a data url

```js
webix.ui({
Expand All @@ -146,32 +143,31 @@ webix.ui({
},{
id:"author", editor:"text", fillspace:1
}],

// load data from /books
url: "firebase->books",
// save data to /books
save:"firebase->books"
}
```
})
```

That is it.

Adding "url" property will enable data loading and automatic updates of component when data changed in the firebase.
Adding a "url" property will enable data loading and automatic updates of component when data changed in the firebase.

Adding "save" property ensures that all changes in the datatable will be saved to the Firebase
Adding "save" property ensures that all changes in the datatable will be saved to the Firebase.



### Using FireBase references

Instead of using text url you can use firebase references directly
Instead of using a text url you can use firebase references directly

```js
firebase.initializeApp({
const app = initializeApp({
databaseURL: "https://webix-demo.firebaseio.com/"
});
var db = firebase.database();
var proxy = webix.proxy("firebase", db.ref("books"));
const db = getDatabase(app);
const proxy = webix.proxy("firebase", ref(db, "books"));

webix.ui({
view:"list",
Expand All @@ -183,7 +179,7 @@ webix.ui({

### Dynamic data loading

You can use "load" command to (re)load data in the component.
You can use "load" command to (re)load data in the component.

```js
$$("dtable").clearAll();
Expand All @@ -198,20 +194,18 @@ $$("dtable").load( webix.proxy("firebase", ref) );
```




### Sync api

Webix components have native [sync](http://docs.webix.com/api__link__ui.proto_sync.html) api to [sync data between components](http://docs.webix.com/desktop__data_binding.html). The same api can be used with firebase
Webix components have native [sync](http://docs.webix.com/api__link__ui.proto_sync.html) api to [sync data between components](http://docs.webix.com/desktop__data_binding.html). The same api can be used with firebase:

```js
firebase.initializeApp({
const app = initializeApp({
databaseURL: "https://webix-demo.firebaseio.com/"
});
webix.firebase = firebase.database();
var ref = webix.firebase.ref("books");
webix.firebase = getDatabase(app);
const source = ref(webix.firebase, "books");

$$("dtable").sync(ref);
$$("dtable").sync(source);
```

### Working with Forms and Templates
Expand All @@ -232,13 +226,13 @@ $$("template").load("books/4")
In some cases, it has sense to not load data correctly but bind form ( template ) to some other view or data collection

```js
var data = new webix.DataCollection({
const data = new webix.DataCollection({
url:"firebase->books",
save:"firebase->books"
})
form.bind(data);
data.waitData.then(function(){
//you need to use setCursor API to load some record from collection into a form
// you need to use a setCursor API to load some record from a collection into a form
data.setCursor("4");
})
```
Expand All @@ -251,7 +245,7 @@ webix.ui({
url:"firebase->books",
save:"firebase->books"
});
form.bind("d1"); //selected row will be shown in a form
form.bind("d1"); // a selected row will be shown in a form
```

Samples
Expand All @@ -269,7 +263,7 @@ License

The MIT License

Copyright (c) 2015 Maksim Kozhukh
Copyright (c) 2025 Maksim Kozhukh

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
Expand Down
22 changes: 0 additions & 22 deletions bower.json
View file
Open in desktop

This file was deleted.

Loading