Firestore Limited-Data

If your Firestore collections contain a lot of documents, you may want to limit what your application shows your users based on what they're interested in. Narrowing down and getting only the data that you need more user-friendly, it will also make it more efficient and less expensive (cloud services are not always free).

There are three simple ways to limit the amount of data loaded into a Collection object:

1. Use the fields property to specify the fields you want to load. This option can be useful when your collections contain many fields and you are interested in only a few. Getting only a subset of the fields is a feature available in SQL databases, OData sources, and graphQL.
2. Set the pageSize property to a reasonable number of records (say 10 or 20) and make sure the pageOnServer property is set to true. This way the Collection will load only a few records at a time, and you can use the pageIndex property to navigate thourgh the data one page at a time.
3. Use the where method to apply a server-side filter. For example, you may want to see customers in one or two countries only.

The three options above can be combined and used simultaniously.

For example, the code below loads a collection with customers. Only a few selected fields are retrieved, and only six customers are loaded at a time. To use the Collection object, you'll need to import the Collection class along with the Firestore class:

import { Firestore, Collection } from '@mescius/wijmo.cloud';

// load the Customers collection
let customers = new Collection(fsNWind, 'Customers', {
    sortDescriptions: ['CustomerID'],
    fields: ['CustomerID', 'CompanyName', 'ContactName', 'City', 'Country'],
    pageOnServer: true,
    pageSize: 6 // load only six customers per page
});

We will allow users to filter the data by country. We will use a ComboBox to allow users to select the country they are interested in:

let cmbCountries = new ComboBox('#cmbCountries', {  
    placeholder: '(Select a Country)',  
    itemsSource: 'Brazil,France,Germany,UK,USA'.split(','),  
    isRequired: false,  
    text: '',  
    textChanged: (s, e) => {  
        customers.where('Country', '==', s.text);  
    }  
});

When the user selects a country, the ComboBox fires the textChanged event and the code updates the queryFilter property to show all customers in the selected country.

To show the data, we will use a CollectionViewPager and a FlexGrid:

let fsCustomerPager = new CollectionViewNavigator('#fsCustomerPager', {  
    cv: customers,  
    byPage: true,  
    headerFormat: 'Page {current:n0}'  
});  
let fsCustomerGrid = new FlexGrid('#fsCustomerGrid', {  
    showMarquee: true,  
    formatItem: addRowHeaderIndex,  
    autoGenerateColumns: false,  
    columns: customers.fields.map(fld => {  
        return { binding: fld }  
    }),  
    itemsSource: customers  
});