Converting text to HTML in REACT

In REACT Component HTML tags are not displayed as HTML. It will display with <> tags. To avoid this, we have to use dangerouslySetInnerHTML in div tag.

For Example: <div dangerouslySetInnerHTML={{ __html: YourValue}}></div>

Hosting package and bundles of SPFx

We have seen about webpart creation and getting list items from SharePoint in last two articles. Now we are going see about hosting the packages and bundles of webpart. Click the following URL to touchbase about webpart creation and populating listitems. 

First set CDN path for bundle reference. We have to upload the dependency files in that folder. It must be a SharePoint library folder. I am creating one folder for this in Site Assets. 

Mention this path in write-manifest.json file which is under config folder.

Path will be like: https://YoursiteUrl/SiteAssests/deploy

If you need to change the properties of package like name, version and zippedpackage. you have to change in package-solution.json file.

We have done all things in solution side. Next we need to create a package using gulp command. 

Open the Command Prompt and go to solution path. Run the below command to get the build.

• gulp clean (This command used to clean bundles which is created previously)
• gulp --ship 
• gulp bundle --ship (This command used to create bundles)
• gulp package-solution --ship (This command used to make package)

Each command will take some time to execute. We can see the package in SharePoint folder.

Bundles will be created in temp --> deploy folder.

Upload the sppkg file in AppCatalog Site. Above 3 dependency files must be uploaded at CDN path. Webpart will be available in you site once it is uploaded in AppCatalog. We can add this like adding app. You can see the webpart while click the add webpart in the page.

Get List Items using SPFx

As we already see about SharePoint client side webpart creation. Now will have a look about getting list items using this. Create the client side webpart first. Click here for the steps.

Open the client side webpart in Visual Studio Code. We can able to see all the needed folder over there.

src section is having all files about the webpart. We need to write the logic in tsx file which is under component folder.

We have a render method in that file which is used to display the content. SPFx will give the default content with welcome message. We can remove this and add our content.

Getting List Items

We may use REST API to get content from list. Will see about the steps for SPFx. Create a componentDidMount() method. We have to place our code in this method only. Before that create constructor for initializing the state. 

Now create componentDidMount() method. We may use axios to call REST API. We have to install this using npm. npm command is:

npm install axios --save

import this in header of the tsx file. 

import axios from 'axios';

Place the below code in the method:

 var items = [];

    var apiPath = "/_api/web/lists/getByTitle('listName')/items";

    axios.get(apiPath).then(result => {

      for (var i = 0; i < result.data.value.length; i++) {

        items.push({

          title: String(result.data.value[i]["Title"]),

          desc: result.data.value[i]["Description"] != null ? String(result.data.value[i]["Description"]) : ""

        });

      }

      this.setState({ listItems: items });

    }

The value has been assigned to listItems state. Next we have to render this. Place the below code in render section.

  return (

       <div>

          {

            this.state.listItems.map((lItems, index) => {

              return (

                <div className="divVehicleContent">

                  <h1>{lItems.title}</h1>

                  <div dangerouslySetInnerHTML={{__html: lItems.desc}}></div>

                </div>

              );

            })

          }

        </div>

    );

That's all compile this using gulp command. Run this code in SharePoint site workbench.

Creating SharePoint Client Webpart (SPFx)

Introduction

As all we know SharePoint has introduced Client Side Webpart using SharePoint Framework. Let we see How to create SPX Client Webpart.

SPX Client Webpart

First install yoeman command in your machine globally. Command to install this,

npm i --global yo

Choose your directory and create a webpart using below command.

yo @microsoft/sharepoint

It will ask some parameters to create a webpart.

I chose React JS for client side script. SharePoint gives an option to create in Knockout JS also. Press Enter after giving webpart name and description. It will some time to complete the create process.We will get a success message once webpart has been created.

Go into the path of solution in command prompt itself and give gulp serve command to run the solution. Gulp serve helps to compile and run the webpart using virtual server.

We will get the localhost workbench once webpart has been compiled properly. We have to add our webpart in workbench.

We will get Welcome screen from client webpart once added.

This is the way to add simple client side webpart using SPX. We will see about getting data from sharepoint using this webpart and hosting in next article....