SPFx - Office UI Fabric react DetailsList & PropertyFieldCodeEditor to show the CSV 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 'CSV' 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 let's 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 'CSVData'. 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 'CSVData' 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 details list.
    • items: any - Items to be displayed in the DetailsList
    • columns: IColumn[] - Columns to bind to DetailsList based on the CSV 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 CSV 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 details list based on the CSV data and then we have to pass the items to the details list.

  • We have converted the CSV data to JSON data and then we build the dynamic columns. To convert the CSV to JSON, I had used a npm package named 'csvtojson'
  • _buildDataList method will do the following functionality
    • convert the csv data received to son from the web part property this.props.CSVData
    • parsing the JSON data
    • 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 😀

Comments

Post a Comment

Popular posts from this blog

PowerShell to update SharePoint Online User Profile property from Azure AD

Image
Hi Friends, in this post, I am gonna walk you through the steps to update the SharePoint Online User Profile property from Azure AD. You may think, why this is necessary since SharePoint online will sync automatically with Azure AD. The tricky part is the auto-sync may take up to 24 hrs to sync Azure AD to SharePoint UPS. The next tricky part is not all the AAD profile properties are synced to SharePoint UPS. Only a few of the properties are synced and below are the list of properties relevant to the profile that is synced to SharePoint UPS User Name First name Last name Name Office phone Department Job title Manager Office Office phone What about the other properties like 'Mobile Phone' that are relevant to the user??? What about if there is a drastic change in the Organization structure and you want the SharePoint UPS to reflect immediately??? To resolve all these obstacles and issues, we need to use PowerShell Now you understand why there i...
Read more

Using React Context API in SPFx

Image
Introduction   Hi friends, this blog post will guide you through the usage of  Context API  which is one of the new features introduced in the latest version of React   in SPFx projects .  What is React Context and When to use it In a normal React application, the properties are passed top-down from parent to child and then to the grandchild via props. It works great in simple react applications, but this will be very tedious for complex applications.  Context  provides us an easy way to share the props without having them pass through all the intermediate components.  Context  should be primarily used when the properties must be accessible by many components at different nesting levels. We must apply it with cautious because sometimes it makes the reuse of the components more difficult. How can we use it in SPFx?   I hope many of you are aware of the SPFx development model, where we might need to pass the properties that are captured ...
Read more