# Google Sheets Overview

Learn how to use Google sheets with Wijmo in this documentation topic

## Content

Google Sheets can serve as a simple database that allows you the ability to edit the data quickly and straightforwardly. After creating your Google Sheet and setting the read/write access, you'll need to generate an __API key__.

## Accessing the Sheet from the Application
To access the Google Sheet from our application, we'll first need to generate an __API key__. API keys for Google applications can be generated at the [Google API Console](https://console.developers.google.com/apis/credentials).

Now that access to the sheet has been set and the API key has been generated, we can start using the data in our application.

First, we'll need to import the __GoogleSheet__ class:

```Javascript
import { GoogleSheet } from '@mescius/wijmo.cloud';
```

Then, we'll create a __GoogleSheet__ object connected to Google Sheets by using our API key:

```Javascript
const API_KEY = 'AIzaSyCvuXEzP57I5CQ9ifZDG2_K8M3nDa1LOPE';
const SHEET_ID_NW = '1qnf-FCONZj_AmOlyNkpIA3mKvP8FQtVOr7K8Awpo360';
let gsNWind = new GoogleSheet(SHEET_ID_NW, API_KEY, {
    sheets: [ 'Products', 'Categories', 'Suppliers' ]
});
```

We use the constructor to specify which sheets we want to load. If none are specified, it would load all of the sheets.

Finally, we'll add a __ComboBox__ to allow users to see and select product catagories, a __FlexGrid__ to display the data of the catagory that the user selected, and a __FlexChart__ to show the unit price for the products in the database.

__ComboBox__
```JavaScript
let categoryCombo = new ComboBox('#categoryCombo', {
    placeholder: '(All Categories)',
    isRequired: false,
    displayMemberPath: 'CategoryName',
    itemsSource: gsNWind.getSheet('Categories'),
    selectedIndexChanged: (s, e) => {
        let cat = s.selectedItem;
        gsNWind.getSheet('Products').filter = (item => {
            return cat == null || cat.CategoryID == item.CategoryID;
        });
    }
});
```

__FlexGrid__
```JavaScript
let supplierMap = new DataMap(gsNWind.getSheet('Suppliers'), 'SupplierID', 'CompanyName');
let productGrid = new FlexGrid('#productGrid', {
    ...gridOptions,
    autoGenerateColumns: false,
    columns: [
        { binding: 'ProductName', header: 'Product Name' },
        { binding: 'UnitPrice', header: 'Unit Price', format: 'n2' },
        { binding: 'QuantityPerUnit', header: 'Quantity Per Unit' },
        { binding: 'SupplierID', header: 'Supplier', dataMap: supplierMap },
        { binding: 'UnitsInStock', header: 'In Stock', format: 'n0' },
        { binding: 'UnitsOnOrder', header: 'On Order', format: 'n0' },
    ],
    itemsSource: gsNWind.getSheet('Products')
});
```

__FlexChart__
```JavaScript
let productChart = new FlexChart('#productChart', {
    chartType: 'Bar',
    axisX: { majorGrid: true, axisLine: false },
    axisY: { majorGrid: false, axisLine: false, reversed: true },
    legend: { position: 'Bottom' },
    bindingX: 'ProductName',
    series: [
        { binding: 'UnitPrice', name: 'Product Unit Prices (US$)' }
    ],
    itemsSource: gsNWind.getSheet('Products')
});
```

When the user selects a category or sorts the data, the grid and the chart update automatically.