SharePoint Framework SPFx Client Side Web Part–Data Viewer

By

Lightning Tools have been busy building a Client Side Web Part under the new development model (SharePoint Framework SPFx). Apart from being extremely eager to get our hands dirty with the new SharePoint Framework, we were also looking forward to the Data Viewer being able to connect to Office 365 Tenant Scoped Business Connectivity Services (BCS) External Content Types. Ever since SharePoint Designer lost the Design view, our Data Viewer Web Part (FullTrust) offered users the ability to connect to multiple external data sources and SharePoint lists and to be able to style the data without the need for SharePoint Designer. This had the added benefit of not having to save your site within SharePoint Designer and thus detaching the site from its template.

Find out more on the SharePoint Framework SPFx from here: https://dev.office.com/blogs/sharepoint-framework-developer-preview-release

Unfortunately, we couldn’t make all of those data sources available for SharePoint Online users with the SharePoint Add-In model. The Data Viewer Add-In could only connect to External Content Types that were deployed as an app to a web using Visual Studio. This was extremely limiting, but due to the SharePoint Add-In Model restrictions, it was beyond our control.

The good news is that the SharePoint Framework removes this restriction! So, we got building and have come up with a Data Viewer Client Side Web Part. The Data Viewer Client Side Web Part will be available to add to a WorkBench in SharePoint Online or SharePoint 2016 On-Premises as soon as it is available.

Below, you can see the steps, and a video on how to configure the Data Viewer Client Side Web Part under the SharePoint Framework SPFx to connect to an External Content Type.

The first step after deployment of the CDN is to add the Data Viewer Client Side Web Part to the page.

SharePoint Framework SPFx Data View

The Data Viewer can then be configured by clicking the Edit button on the top left.

SharePoint Framework SPFx Configure Data View

The Connection Information is configured by walking through several steps. Click the Configure Data Viewer button to launch the configuration wizard.

SharePoint Framework SPFx Data Source

The Configuration Wizard has four tabs which include Web Part, Data Source, Columns, and Display. Under the Web Part tab, we can choose the type of connection. Currently in the beta version, the Data Viewer offers just OData and Business Connectivity Services. We will need to know the Namespace and External Content Type name of our External Content Type for the Data Source tab which can be found under BCS in our SharePoint Admin Centre.

BCS External Content Types

After entering the BCS Model Namespace and Name, we can select the Finder and Specific Finder methods or simply choose to discover the default methods. We will soon be able to offer write back via the Creator, Updater, and Deleter methods too.

SharePoint Framework SPFx BCS

Once the Data Source has been established, we can check the columns that we wish to display, and also set filters (currently filters only work with OData).

SharePoint Framework SPFx Data View Column Selection

The final Display tab allows for Column Aliases, Column Widths, Sorting, Grouping, and Styling to be configured on each column.

SharePoint Framework SPFx Data Viewer Styling

The data is then displayed on the workbench.aspx page as a Client Side Web Part.

SharePoint Framework SPFx Data Viewer

To see the Data Viewer in action, please see the below video:

The Data Viewer Client Side web part will be available on the 31st January as a beta.

See Andrew Connell live (31st January 20-17) with Lightning Tools demonstrating the new SharePoint Framework SPFx development model: https://lightningtools.com/introducing-sharepoint-framework