Snapshot Overview

Wijmo's Snapshot class extends the CollectionView class to provide real time support with Firebase collections and queries. Used in conjunction with the Firestore web client library, the Snapshot class allows you to provide real time updates and implement advanced features within your Firestore database.

Creating a Snapshot

First, we'll need to load in the Snapshot class:

import { Snapshot } from '@grapecity/wijmo.cloud';

Now that the Snapshot class has been loaded, you may create and use a Snapshot object as follows:

// initialize Firestore web client library
const firebaseConfig = {
    apiKey: …
    authDomain: …,
};
firebase.initializeApp(firebaseConfig);

// get a snapshot of the "restaurants" collection
const db = firebase.firestore();
let restaurants = db.collection('restaurants');
let snapshot = new Snapshot(restaurants, {
    query: restaurants.where('type', 'in', ['Japanese', 'Italian' ])
});

// bind the snapshot to a FlexGrid
new FlexGrid('#theGrid', {
    itemsSource: snapshot
});

We start by initializing the web client library, then build a Snapshot based on the requested data. Here, we're using the "restaurants" collection and building the Snapshot where the restaurant type is either "Japanese" or "Italian".

The query property can be changed at any time, but it should always be based on the collection that the Snapshot is initialized with (in this case, the "restaurants" collection).

Finally, the code uses the Snapshot as a data source for the FlexGrid. Now, whenever a user updates a value in FlexGrid, any other user that is currently viewing that data in a different browser will have their FlexGrid updated with the new value.