Retrieving Data from Firebase

In this guide, we'll walk you through how to retrieve data from Firebase and incorporate it in your grid.

Connecting to the Database

If you want to populate your grid using data stored in Firebase, then you just need to set the src attribute to the Firebase URL that includes the path to the data. You can either set the src attribute for <zing-grid> or <zg-data>, like so:

<zing-grid src="https://<databaseName>.firebaseio.com/<path>/"></zing-grid>

or

<zing-grid>
  <zg-data src="https://<databaseName>.firebaseio.com/<path>/"></zg-data>
</zing-grid>

Firebase Grid

Here is our complete grid with data retrieved from Firebase:

CRUD Grid

By default, setting the source to a Firebase URL provides us with a simple CRUD grid. You can create new rows, read from the given source, update cells or rows, and delete rows from the grid. Any changes we make will automatically be reflected in the database.

In order to update cells/rows, you need to set the editor attribute for the grid. You can create/update/delete rows through the context menu which appears after setting the context-menu attribute for the grid (see HTML and demo below). You can also do this by setting specific column types.

<zing-grid
  src="https://zinggrid-examples.firebaseio.com/movies/"
  editor context-menu infinite>
</zing-grid>

Authentication

If you need to authenticate users to access your grid, you can do so in one of two ways: with queryString on <zg-param> or through the Firebase SDK adapter.

queryString Attribute

To authenticate users, you can set queryString on <zg-param> to be the auth=<ID_TOKEN> name/value pair according to Firebase specifications. Note: This assumes that you have authenticated the user and retrieved their token.

Firebase SDK Adapter

The easier way to handle authentication is to use the Firebase SDK adapter if you are using a Firestore database. This requires you to include the Firebase SDK JavaScript files (app, auth, and Firestore) and these Firebase SDK files must be included before the ZingGrid library.

Check out the example grid below which uses the Firebase SDK adapter to ensure that users can only access the grid's data if they are logged in:

Using Firebase Queries

To make it easier to use Firebase queries, set the data's adapter attribute to "firebase". This will then convert all of the appropriate parameters according to what Firebase expects.

<zing-grid>
  <zg-data
    src="https://zinggrid-examples.firebaseio.com/movies/"
    adapter="firebase"></zg-data>
</zing-grid>

For example, adapter="firebase" will convert:

• sortByKey: The query parameter that specifies the sort field. For Firebase, it is converted to "orderBy". (See the Firebase docs for orderBy here.)
• limitToKey: The query parameter that specifies how many records to limit to. It is used in infinite scroll and loadByPage. For Firebase, it is converted to "limitTo". (See the Firebase docs for limitTo here.)

Sorting

If you want to enable data sorting, then set the sortBy key to the property that you want to sort on. You also use queryString, which allows you to include additional query strings in the request, such as startAt=value (where "value" refers to the values of the data that you want to start sorting at).

In the example below, we sort based on the "title" key of our data, starting at the values that begin with "D".

recordPath

If you have multiple top-level objects stored in your database, you can select which object you want to use to populate the grid by setting recordPath equal to the path from the JSON object to the object with the grid data. This allows you to just change recordPath to easily switch between data.

In our courses object example below (given by the path: "https://zinggrid-examples.firebaseio.com/courses/"), we have two objects. If we wanted to display the first course's array of students as a grid, we would set recordPath equal to "0.students". If we wanted to do this for the second course, we would set it to "1.students".

[
  {
    "courseId": "A21",
    "courseName": "Astronomy",
    "students": [
      {
        "grade": "A",
        "id": "241",
        "name": "Brian"
      },
      {
        "grade": "A-",
        "id": "386",
        "name": "Jenny"
      },
      ...
    ]
  },
  {
    "courseId": "M15",
    "courseName": "Greek Mythology",
    "students": [...]
  }
]

Infinite Scroll

If you want to enable infinite scroll in your grid, follow the steps below:

1. Add height and page-size attributes to your <zing-grid> tag

   <zing-grid height="400" page-size=10>

2. Add adapter and src attributes to <zg-data>

   <zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">

3. Add [name="loadByScroll"] and [value="true"] attributes to <zg-param>

   <zg-param name="loadByScroll" value="true"></zg-param>

<zing-grid height="400" page-size=10>
  <zg-data adapter="firebase" src="https://zinggrid-examples.firebaseio.com/movies">
    <zg-param name="loadByScroll" value="true"></zg-param>
  </zg-data>
</zing-grid>

Another Version: <zg-param>

In the examples above, most of our configurations are set in the options object. Another way that you can write this is with the <zg-param> tag. <zg-param> is a child of <zg-data>, and it has two attributes: name and value. Using <zg-param> provides greater readability and allows us to focus on a more component-based approach.

For example,

<zg-data options='{"queryString": "limitToFirst=7&startAt=\"F\""}'></zg-data>

can be rewritten as:

<zg-data>
  <zg-param name="queryString" value='limitToFirst=7&startAt="F"}'></zg-param>
</zg-data>

Attributes on <zg-param> Grid

In this example, we use <zg-param> to set the adapter, sort the data, and then display the last 8 entries: