Managing database data

Now that you've added your Firebase database as the data source, you can start managing its data. Here, you'll learn how to perform CRUD operations with Firebase Realtime DB and Firestore.

Firebase Realtime DB operations

Read data

1. Create a new action of the JavaScript Code type and add the following code:

const userId = firebase.auth().currentUser.uid;
return firebase
  .database()
  .ref('/users/' + userId)
  .once('value')
  .then(snapshot => snapshot.val());

1. Click Execute action and check the Result tab - the data should be there.

Add a record

1. Create a new action of the JavaScript Code type and add the following code:

const listRef = firebase.database().ref("list/");

listRef.set({
   record1: {
      field1: newValue1,
      field2: newValue2,
   },
});

1. Click Execute action and check the Result tab - the new record should be created.

Update a record

Updates can be executed using two methods - set() and update(). Below you'll find an example of both methods.

1. Create a new action of the JavaScript Code type and add the following code depending on the selected method:

• set()

const listRef = firebase.database().ref("list/record");

listRef.set({
      field1: newValue1,
      field2: newValue2,
});

Please note that set() can overwrite your data, while update() only updates the required fields.

• update()

const recordRef = firebase.database().ref("list/record");

recordRef.update({
   field1: newValue1,
});

1. Click Execute action and check the Result tab - the requested records should be updated with the new values.

Delete a record

1. Create a new action of the JavaScript Code type and add the following code:

const recordRef = firebase.database().ref("list/record");
recordRef.remove();

1. Click Execute action and check the Result tab - the specific record should be removed.

All other operations with the Realtime Database data like Filter, Order, etc. can be done via the Firestore API. You can find the API reference here.

---

You can also check out more useful articles on how to further manage your data in UI Bakery👇

Data mapping & transforming

Bind data to UI

Firestore operations

List data

1. Create a new action of the JavaScript Code type and add the following code to load your Firestore collection:

const collection = await firebase.firestore().collection("collectionName").get();
const result = [];
collection.forEach(doc => {
    const data = doc.data();
    result.push({ id: doc.id, ...data });
});
return result;

1. Click Execute action and check the Result tab - your collection data should be displayed.

Read a document

1. Create a new action of the JavaScript Code type and add the following code to fetch data about a specific document:

const doc = await firebase.firestore().collection('collectionName').doc('docID').get();
return doc.data();

1. Click Execute action and check the Result tab - document data should be displayed.

Create a new record

1. Create a new action of the JavaScript Code type and add the following code:

const newUser = { name: "Nik" };
const doc = await firebase.firestore().collection("collectionName").add(newUser);
return doc.id;

1. Click Execute action and check the Result tab - the new record should be there.

Delete a record

1. Create a new action of the JavaScript Code type and add the following code:

await firebase.firestore().collection('collectionName').doc('docID').delete(); 

1. Click Execute action and check the Result tab - the record should be deleted.

Update a record

Updates can be executed using two methods - set() and update(). The difference between them is that set() will overwrite the whole document while update()will update only specific fields that need to be updated. Below you'll find an example of both methods.

1. Create a new action of the JavaScript Code type and add the following code depending on the selected method:

• set()

const doc = await firebase.firestore().collection('collectionName').doc('docID').set({
    docField: newFieldValue
});

If you don't want to overwrite your data, you can add merge: true to your code so that only the required fields will be updated.

• update()

const doc = await firebase.firestore().collection('collectionName').doc('docID').update({
    docField: newFieldValue
});

1. Click Execute action and check the Result tab - the requested records should be updated with the new values.

All other operations with the Firestore collections like Filter, Order, etc. can be done via the Firestore API. You can find the API reference here.

---

You can also check out more useful articles on how to further manage your data in UI Bakery👇

Data mapping & transforming

Bind data to UI