SPFx – Office UI Fabric react DetailsList and PropertyFieldCodeEditor to show the JSON data

Hi Friends, this is a series of the post explains different capabilities of the web part using SPFx.
In this post, I am gonna show you how we can use DetailsList from UI Fabric and PropertyFieldCodeEditor property pane control from PnP on the SPFx web parts. The code walkthrough shown below will display the ‘JSON‘ data in the DetailsList.
Regarding the creation of the basic project stuff, please refer to the blog post.
I hope those who are familiar with SPFx would know how to create the project and add the dependent npm packages. The following are some of the pre-requisites for the solution to work.
  • Used SharePoint Yeoman generator version 1.10.0
  • Used @pnp/spfx-property-controls for the property controls
Below is the final outcome of the web part.
Let us walk through the code to achieve the above result.
  • Once the project is created with all the dependencies, add the following imports to the webpart.ts file to use the controls.
  • The output of the PropertyFieldCodeEditor will be stored as a string, so lets create a new property to hold the value of the PropertyFieldCodeEditor.
  • The above screenshot shows that we had removed the default property ‘description’ and have added the property named ‘jsonData‘. Do not forget to return the property in the render method of the web part.
The above property declaration and other codes are on the webpart.ts file. Now we will see how we can render the properties passed from webpart to the component.tsx file.
  • Import the references related to the DetailsList from Office UI Fabric.
  • Declare the properties and state interface for the component.
  • For the properties, just declare ‘jsonData‘ so that the web part will return the data from the web part property.
  • For the state interface, we have to declare the following to display the detailslist.
    • items: any – Items to be displayed in the DetailsList
    • columns: IColumn[] – Columns to bind to DetailsList based on the JSON data provided.
  • Since we have created the state interface, the state has to be initialized in the constructor of the component.
  • We have to display the data when the web part loads on the page and also when the json data is changed from the web part properties. So in order to do that we have to use the below two inbuilt methods
    • componentDidMount – It will be fired when the component loads
    • componentDidUpdate – It will be fired when the web part properties are modified.
  • Since on both the methods we have to build the columns for the detailslist based on the json data and then we have to pass the items to the detailslist.
  • _buildDataList method will do the following functionality
    • parsing the json data received from the web part property this.props.jsonData
    • Get all the keys from json object first data, based on the keys defined in the first item of the json data, the columns of the detaillist will be designed.
    • Once the above is done, assign the values to the state variable. Based on the change in the state variable, the detailslist is automatically updated.
  • _buildColumns method will built the columns for the DetailsList based on the keys derived from the json data. The main properties of IColumn is defined for each column of the detailslist.
  • Update the code in the render method to display the detailslist.
  • There are many properties available for the DetailsList. Here we have used a set of properties and you can always try out the other properties based on the documentation provided in the UI Fabric site.
  • The two state values items and columns are declared as cont in the render method and are directly assigned to the DetailsList properties. This will make the web part component to update whenever the state is changed.
That’s it friends, please follow the steps mentioned above to use date control in the collection property pane control. Click here to refer to the actual source code.
Happy coding. Cheers 😀

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s