Other Related Post

SharePoint Folder Operations Demo Using PnP JS In React Based SPFx Webpart

Nov 4th

In this article, we will learn how to perform operations like add, copy, move, and delete folders using the PnP library in the SPFx web part. PnPJs is an awesome library that providers wrappers around SharePoint REST API so that we as the developer do not have to write repetitive code and also worry about details on how to pass headers, data, etc. It is not only limited to SharePoint but we can also use it to call graph and office 365 API. As this library comes as an npm package, it can be used for any node js and javascript-based projects. Today we will use it in the context of the SharePoint Framework.

Let’s start by creating an SPFx web part. Go to the command prompt and directory where you want to create your SPFx solution.

Use the below options to create a new SPFx solution. (we will be using React framework, just because it is really cool).

Once the solution is created you can open the project in your favorite editor(mine is VS code).

Now let’s install pnp library, use the below command in the node js command prompt.

For the sake of simplicity, we won’t be using any fancy UI ..we will just create buttons and perform different operations on click of the buttons.

Let’s start making code changes, go-to editor.

Pass SharePoint Context to React component

1. Open src\webparts\foldersdemo\components\IFoldersdemoProps.ts

Create context properties to hold SharePoint context.

2. Go to src\webparts\foldersdemo\FoldersdemoWebPart.ts

<span class="token keyword keyword-public">public</span> <span class="token function">render</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token keyword keyword-void">void</span> <span class="token punctuation">{</span>
   <span class="token keyword keyword-const">const</span> element<span class="token operator">:</span> React<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">ReactElement</span></span><span class="token operator">&lt;</span><span class="token maybe-class-name">IFoldersdemoProps</span><span class="token operator">&gt;</span> <span class="token operator">=</span> React<span class="token punctuation">.</span><span class="token method function property-access">createElement</span><span class="token punctuation">(</span>
     Foldersdemo<span class="token punctuation">,</span>
     <span class="token punctuation">{</span>
       description<span class="token operator">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">properties</span><span class="token punctuation">.</span><span class="token property-access">description</span><span class="token punctuation">,</span>
       context<span class="token operator">:</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">context</span>
     <span class="token punctuation">}</span>
   <span class="token punctuation">)</span><span class="token punctuation">;</span>
   ReactDom<span class="token punctuation">.</span><span class="token method function property-access">render</span><span class="token punctuation">(</span>element<span class="token punctuation">,</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">domElement</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>

public render(): void {

const element: React.ReactElement<IFoldersdemoProps> = React.createElement(

Foldersdemo,

{

description: this.properties.description,

context:this.context

}

);

ReactDom.render(element, this.domElement);

}

Setup PnP in React Component

1. Go to src\webparts\foldersdemo\components\Foldersdemo.tsx

Import library, you can do selective import but for this demo, we will be loading all presets.

2. In the same file, let’s initialize the PnP SP object with context. Add a constructor in your react class.

<span class="token function">constructor</span> <span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span><span class="token maybe-class-name">IFoldersdemoProps</span><span class="token punctuation">,</span>state<span class="token operator">:</span><span class="token punctuation">{</span><span class="token punctuation">}</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
   sp<span class="token punctuation">.</span><span class="token method function property-access">setup</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
     spfxContext<span class="token operator">:</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">context</span>
   <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
 <span class="token punctuation">}</span>

constructor (props:IFoldersdemoProps,state:{}) {

super(props);

sp.setup({

spfxContext: this.context

});

}

Add required logic in React component

1. Go to src\webparts\foldersdemo\components\Foldersdemo.tsx

Replace render method with below code,

2. Now let’s add the required method which will be called on respective buttons.

So we are done with changes, let’s test it…run ‘gulp serve’ and open SharePoint workbench.aspx

Let us first see how the library is looking before doing any operations.

Click on Create Folders,

Let us see the results of Create Folders operation. It has created 4 folders.

Click on Rename Folder.

This will rename the folder as specified.

Click on Copy Folder.

The folder has been copied to the destination.

Click on the Move folder.

We can see the folder has been moved.

Conclusion

In this article, we have explored the below concepts.

SPFx React-based web part
Using PnPJS library in SPFx web part
CRUD operations on folders in SharePoint using PnP JS

SharePoint Hosting – How To Fetch Items From SharePoint List To PowerApps Gallery, Calculator?

Oct 7th

Posted by Peter in Other Related Post

In this article, I’m going to demonstrate how Sharepoint List Records are fetched to the PowerApps Gallery Control and, in the gallery we’ll be calculating some values as per the requirement, then those calculated values will be updated again to the List.

STEP 1 – Creating a List

List Name: Calculation
ItemName: (Single Line Text)
Quantity: (Number)
UnitPrice:(Number)
Total:(Number)

Create the List as per the above specifications.

Enter some dummy values to the ItemName, Quantity, UnitPrice Columns.

STEP 2 – Working with Power Apps gallery

Go to PowerApps and create a blank canvas app and name it as per the Project Title.

Add a blank vertical Gallery to the Screen and you can rename it as per your need.

Add the Data Source from the SharePoint List to The Gallery Items.

Select the Gallery control and choose the pencil icon to edit the require fields with context to List Data Source.

Put some Controls and change their properties as follows,

Put a Label Control- Set Text Property-ThisItem.ItemName
Put a Label Control- Set Text Property-ThisItem.Quantity
Put a Label Control- Set Text property-ThisItem.UnitPrice
Put a Text Input Control- Set Default Property:ThisItem.Quantity*ThisItem.UnitPrice

STEP 3 – Function To Update List Items

Add a Button Control to the Screen and rename it as you need.

Write the following functions on button On Select Property,

<span class="token function"><span class="token maybe-class-name">ForAll</span></span><span class="token punctuation">(</span><span class="token function"><span class="token maybe-class-name">RenameColumns</span></span><span class="token punctuation">(</span><span class="token maybe-class-name">Gallery1</span><span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">AllItems</span></span><span class="token punctuation">,</span> <span class="token string">"ID"</span><span class="token punctuation">,</span> <span class="token string">"CID"</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token function"><span class="token maybe-class-name">Patch</span></span><span class="token punctuation">(</span><span class="token maybe-class-name">Calculation</span><span class="token punctuation">,</span> <span class="token function"><span class="token maybe-class-name">LookUp</span></span><span class="token punctuation">(</span><span class="token maybe-class-name">Calculation</span><span class="token punctuation">,</span> <span class="token constant">ID</span> <span class="token operator">=</span> <span class="token constant">CID</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
    <span class="token maybe-class-name">ItemName</span><span class="token operator">:</span> lblName<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">Quantity</span><span class="token operator">:</span> <span class="token function"><span class="token maybe-class-name">Value</span></span><span class="token punctuation">(</span>lblQty<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">UnitPrice</span><span class="token operator">:</span> <span class="token function"><span class="token maybe-class-name">Value</span></span><span class="token punctuation">(</span>lblUP<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">)</span><span class="token punctuation">,</span>
    <span class="token maybe-class-name">Total</span><span class="token operator">:</span> <span class="token function"><span class="token maybe-class-name">Value</span></span><span class="token punctuation">(</span>txtTotal<span class="token punctuation">.</span><span class="token property-access"><span class="token maybe-class-name">Text</span></span><span class="token punctuation">)</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

ForAll(RenameColumns(Gallery1.AllItems, "ID", "CID"), Patch(Calculation, LookUp(Calculation, ID = CID), {

ItemName: lblName.Text,

Quantity: Value(lblQty.Text),

UnitPrice: Value(lblUP.Text),

Total: Value(txtTotal.Text)

}));

STEP 4 – Save & Run the Application

Save the Application and run it. The Application runs successfully and will update all the Calculated items from the Gallery to the Share Point List you are working with.

STEP 5 – Checking The List Data Source

Go to Your Share Point List and refresh it. You will see that all the Total columns are updated.

In the above article we successfully did the calculation and updating of calculated Values to the SharePoint List as per the requirements.

SharePoint Hosting – Global Navigation In Modern SharePoint Using SPFx, PnP And Fluent UI

Jul 22nd

Posted by Peter in Other Related Post

Modern SharePoint architecture gives fantastic OOTB global navigation, and hub site navigation has amazing potential to maintain consistency throughout the portal. Then why do we need to develop custom global navigation in modern SharePoint sites?

Let us talk about the business scenario.

Nowadays, a number of organizations are migrating classic intranet portals to modern sites. Many of them have implemented custom global navigation in a classic environment with a number of links and complex tree structures.

Employees are habitual with this global navigation. So, many organizations prefer similar global navigation in Modern SharePoint sites.

Steps

Configure Terms in Term Stores
Create Solution for Application Customizer
Import Required Packages
Create React Component
Add React Component Reference to Application Customizer
Get Terms using PnP
Render Terms using Command Bar and styling
Test Solution

Step 1 – Configure Terms in Term Store.

Go to URL : https://<TenantName>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/termStoreAdminCenter

Create Term Group.

Copy Group GUID and Paste it into one document

Create Term Set inside created Term Group

Enable Use Term set for Site Navigation
Copy term Set Id and Paste it in one document.

Create Terms Inside create Term Sets.

Step 2 – Create SPFx Solution for Application Customizer

Open Node command Prompt.

Go to your physical location where you want to create a solution.

Once all required packages are installed then you will get the below message.

open Code in visual studio code by typing below one line code in node command prompt.

The solution structure looks like the ad below,

Step 3 – Import required packages from npm

Install PnP npm package,

Install React Fluent UI Package,

Install react and react Dom and Its Dev Dependencies.

Open package.json file which should look like as below,

package.json

Step 4 – Create React Component

Create new folder called “Components” to “..src\extensions\gobalNavigationBar”.

Create 3 files inside the components folder.

GlobalNav.tsx
IGlobalNavProps.ts
IGlobalNavState.ts

Add below code to IGlobalNavProps.ts

Add below code to IGlobalNavState.ts,

Add below code to IGlobalNav.tsx,

Step 5 – Add React Component Reference to Application Customizer

Open GobalNavigationBarApplicationCustomizer.ts file and add the below code.

GobalNavigationBarApplicationCustomizer.ts

Step 6: Get Terms using PnP

Open GlobalNav.tsx file and do the below changes.

GlobalNav.tsx

Add below references to the file.

<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> sp <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">"@pnp/sp"</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token string">"@pnp/sp/taxonomy"</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> dateAdd<span class="token punctuation">,</span> <span class="token maybe-class-name">PnPClientStorage</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">"@pnp/common"</span><span class="token punctuation">;</span>
<span class="token keyword module keyword-import">import</span> <span class="token imports"><span class="token punctuation">{</span> <span class="token maybe-class-name">IOrderedTermInfo</span> <span class="token punctuation">}</span></span> <span class="token keyword module keyword-from">from</span> <span class="token string">'@pnp/sp/taxonomy'</span><span class="token punctuation">;</span>

<span class="token keyword keyword-const">const</span> myKey<span class="token operator">:</span> string <span class="token operator">=</span> <span class="token string">"navigationElements"</span><span class="token punctuation">;</span>

import { sp } from "@pnp/sp";

import "@pnp/sp/taxonomy";

import { dateAdd, PnPClientStorage } from "@pnp/common";

import { IOrderedTermInfo } from '@pnp/sp/taxonomy';

const myKey: string = "navigationElements";

Update below code to GlobalNav.tsx.

<span class="token keyword keyword-private">private</span> store <span class="token operator">=</span> <span class="token keyword keyword-new">new</span> <span class="token class-name">PnPClientStorage</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
   <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">props<span class="token operator">:</span> <span class="token maybe-class-name">IGlobalNavProps</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
       <span class="token keyword keyword-super">super</span><span class="token punctuation">(</span>props<span class="token punctuation">)</span><span class="token punctuation">;</span>
       <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">state</span> <span class="token operator">=</span> <span class="token punctuation">{</span>
           loading<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
           terms<span class="token operator">:</span> <span class="token punctuation">[</span><span class="token punctuation">]</span>
       <span class="token punctuation">}</span>
   <span class="token punctuation">}</span>

private store = new PnPClientStorage();

super(props);

this.state = {

loading: false,

terms: []

}

Update componentdidmount() method with below code in GlobalNav.tsx.

<span class="token keyword keyword-public">public</span> <span class="token function">componentDidMount</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token keyword keyword-async">async</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token comment">// this portion is responsible for getting terms from term store</span>
            <span class="token keyword keyword-const">const</span> cachedTermInfo <span class="token operator">=</span> <span class="token keyword control-flow keyword-await">await</span> <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">store</span><span class="token punctuation">.</span><span class="token property-access">local</span><span class="token punctuation">.</span><span class="token method function property-access">getOrPut</span><span class="token punctuation">(</span>myKey<span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token arrow operator">=&gt;</span> <span class="token punctuation">{</span>
                <span class="token keyword control-flow keyword-return">return</span> sp<span class="token punctuation">.</span><span class="token property-access">termStore</span><span class="token punctuation">.</span><span class="token property-access">groups</span><span class="token punctuation">.</span><span class="token method function property-access">getById</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">termGroupId</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token property-access">sets</span><span class="token punctuation">.</span><span class="token method function property-access">getById</span><span class="token punctuation">(</span><span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token property-access">props</span><span class="token punctuation">.</span><span class="token property-access">termSetId</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token method function property-access">getAllChildrenAsOrderedTree</span><span class="token punctuation">(</span><span class="token punctuation">{</span> retrieveProperties<span class="token operator">:</span> <span class="token boolean">true</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token function">dateAdd</span><span class="token punctuation">(</span><span class="token keyword keyword-new">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">,</span> <span class="token string">"minute"</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token keyword control-flow keyword-if">if</span> <span class="token punctuation">(</span>cachedTermInfo<span class="token punctuation">.</span><span class="token property-access">length</span> <span class="token operator">&gt;</span> <span class="token number">0</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
                <span class="token console class-name">console</span><span class="token punctuation">.</span><span class="token method function property-access">log</span><span class="token punctuation">(</span>cachedTermInfo<span class="token punctuation">)</span><span class="token punctuation">;</span>
                <span class="token keyword keyword-this">this</span><span class="token punctuation">.</span><span class="token method function property-access">setState</span><span class="token punctuation">(</span><span class="token punctuation">{</span> terms<span class="token operator">:</span> cachedTermInfo <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
            <span class="token punctuation">}</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>

public componentDidMount() {

this.setState({}, async () => {

// this portion is responsible for getting terms from term store

const cachedTermInfo = await this.store.local.getOrPut(myKey, () => {

return sp.termStore.groups.getById(this.props.termGroupId).sets.getById(this.props.termSetId).getAllChildrenAsOrderedTree({ retrieveProperties: true });

}, dateAdd(new Date(), "minute", 10));

if (cachedTermInfo.length > 0) {

console.log(cachedTermInfo);

this.setState({ terms: cachedTermInfo });

}

});

}

Step 7 – Render Terms using Command Bar

Open GlobalNav.tsx file.

Add below code before default class.

Create new method menuItems() in GlobalNav.tsx file.

Update render() method in GlobalNav.tsx file.

Step 8 – Test Solution

Open “../config/serve.json” file and update a couple of properties.

Update pageUrl Property and Properties,

Run below command in Visual Studio Code Terminal.

Copy URL which is highlighted in yellow and paste it into the browser.

Conclusion

We have implemented the SPFx solution and get terms from the term store using PnP and render items in the command bar which is fluent UI control.