Office Fabric React List Example

This post will go over updates to my Office Fabric UI SharePoint Hosted Add-In using the React Framework blog post.

New List Example

Since we are working in SharePoint, it would be ideal to give an example of using the Office Fabric React Framework to display list data. Instead of giving a generic code example, I wanted to give an example for developing SharePoint 2013 Add-Ins more efficiently. Our main bottleneck in SharePoint development is the environment itself, which has been removed based on the configuration of the solution. Refer to a previous blog post for additional details. This section will go over the data source of the list, and how to configure it with test data.

Test vs SharePoint Data

The folder and file structure of the various demos in the project contain similar file names, listed below. The file we will target is the “data.tsx” file, which will contain the methods interacting with the list data source.

  • demo.tsx – This is the main file of the component
  • data.tsx – (Optional) This is the data source of the component

Data File

Detecting SharePoint Environment vs Localhost

The data file has a static “get” method which returns the list data. A property “IsSPOnline” is available to determine if the code is being executed online or not. I’m using my SP REST Framework, which is referenced in the default page of the SharePoint Hosted Add-In project only. Having this knowledge, we can determine if we are in the local development or SharePoint environment, as shown below in the code example.

private static get IsSPOnline(): boolean { return window.hasOwnProperty("$REST"); }
Test Data vs List Data

Now that we are able to detect which environment (SharePoint or Development) we are in, the get method will return the list or test data based on the “IsSPOnline” property.

static get(): PromiseLike<IData[]> {
        // Return a promise
        return new Promise((resolve, reject) => {
                // See if the $REST library exists
                if (this.IsSPOnline) {
                        // Get the list
                        (new $REST.List("Locations"))
                                // Get the items
                                .Items()
                                // Query the data
                                .query({
                                        GetAllItems: true,
                                        OrderBy: ["State", "County", "Title"],
                                        Top: 500
                                })
                                // Execute the request
                                .execute((items: $REST.Types.IListItems) => {
                                        let data: IData[] = [];

                                        // Parse the items
                                        for (let item of items.results) {
                                                // Add the item to the data array
                                                data.push({
                                                        Title: item["Title"],
                                                        County: item["County"],
                                                        State: item["State"]
                                                });
                                        }

                                        // Resolve the request
                                        resolve(data);
                                });
                } else {
                        // Resolve the request with test data
                        resolve(TestData);
                }
        });
}

Demo

Demo Page

List Demo

View Item Dialog

View Item Dialog

New Item Panel

New Item Panel

Leave a Reply

Your email address will not be published. Required fields are marked *