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
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());

Click Execute action and check the Result tab - the data should be there.
Add a record
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,
},
});

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.
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,
});
Click Execute action and check the Result tab - the requested records should be updated with the new values.
Delete a record
Create a new action of the JavaScript Code type and add the following code:
const recordRef = firebase.database().ref("list/record");
recordRef.remove();

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 & transformingBind data to UIFirestore operations
List data
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;

Click Execute action and check the Result tab - your collection data should be displayed.
Read a document
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();

Click Execute action and check the Result tab - document data should be displayed.
Create a new record
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;

Click Execute action and check the Result tab - the new record should be there.
Delete a record
Create a new action of the JavaScript Code type and add the following code:
await firebase.firestore().collection('collectionName').doc('docID').delete();
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.
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
});
update()
const doc = await firebase.firestore().collection('collectionName').doc('docID').update({
docField: newFieldValue
});
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 & transformingBind data to UILast updated
Was this helpful?