SharePoint Framework: How to Prepare Environment for Development with SharePoint Framework

Microsoft have introduced another development methodology called as SharePoint Framework, which is claimed more flexible than earlier approaches like Farm Solutions, Sandbox Solutions, SharePoint Add-ins.

SharePoint Framework is compatible with a complete Web Development Stack with an inherent support to all modern JavaScript frameworks like React, Knockout, Type Script and so on.

In order to get a better insight I would recommend you to refer to the Webinar by Andrew Connell.

In this article, we will look for steps required to get developer machine ready for starting with SharePoint Development using SharePoint Framework.

Following image displays the steps to set up the development machine:

1

Step 1: Installation of Node JS

Search for “node js” or and navigate the link as shown below to reach to the official download page for Node JS.

You can also follow the direct link to download Node JS: https://nodejs.org/en/

2

As per recommendation from the Technical Community, it is advisable to go for LTS Version of Node JS.

Download the latest version available as shown below:

3

Run the installer and follow the default options as shown below:

Click Next

4

Accept license agreement and Click Next

5

Leave the default installation directory and Click Next

6

Continue with default features and Click Next

7

Click Install to start installation of Node JS

8

Wait until installation has been completed

9

Click Finish once the installation has been completed

10

Now in order to test the installation, launch Windows PowerShell Command Prompt with Administrator privilege

Type command “npm -v”, If installation is successful you can see the version of Package Manager (NPM).

Note: NPM is the Package Manager that used for dependency management, so that you no longer have to manually download and manage your scripts.

11

Step 2: Visual Studio Code

Search for “visual studio code” or and navigate the link as shown below to reach to the official download page for “Visual Studio Code”.

You can also follow the direct link to download Visual Studio Code:  https://code.visualstudio.com/

12

Since my development environment is using Windows Server 2012 R2 as base operating system, I can download the suitable version as per my needs.

1314

Once downloaded run the installer and proceed as follows-

Click Next to initiate the installation

15

Accept the license agreement and click Next to continue

16

Keep the defaults as it is and click Next to continue

17

18

Select required options and click Next

19

Click Install to start the installation

20

Wait until installation has been completed

21

Click Finish to complete the installation process

22

On completion, install will launch the Visual Studio Code window to ensure installation is successful.

23

Step 3: Install Yeoman  & Gulp

Yeoman scaffolds out a new application, writing your build configuration (e.g Gulpfile) and pulling in relevant build tasks and package manager dependencies (e.g npm) that you might need for your build.

Gulp is the Build System used to build, preview and test your project.

In order to install Yeoman & Gulp launch windows PowerShell command prompt with Administrator privilege

Enter command “npm  install  -g  yo  gulp” and enter

This command will perform global installation of Yeoman and Gulp

24

Wait until installation has been completed

25

262728

Once done successfully it will return with command prompt without any error message.

Step: 4 Install SharePoint Yeoman Plugin (SharePoint Client Side Libraries)

In order to install SharePoint Client Side Libraries enter following command

“npm install  -g  @microsoft/sharepoint”

29

Wait until the installation has been completed

3031

Step: 5 Install SPFX Developer Certificate

Local Workbench Site, which is used to test the WebParts locally with using SharePoint Context, will notify you with the error that it is not configured to load scripts from localhost.

In order to avoid this error message we need to install SPFX Developer Certificate by using the following command

“gulp trust-dev-cert”

32

Wait till installation has been completed

Click Yes on the Security Warning to accept installation of certificate

34

With this Step 5, SharePoint Framework and all related dependencies are installed successfully and it is the time verifies the installation and in the following steps, we will perform validations.

Step: 6 Create SharePoint Project

Enter following command “yo  @microsoft/sharepoint”

35

This command will initiate the Project Configuration for SPFX based SharePoint Solution

This command will take input from the user to configure the project attributes like project name, description, directory, development environment and so on.

36

Input all information required and enter to proceed with Project configuration.

Wait till Project has been created

3738

Once project has been created successfully, we will get command prompt returned without error.

Step: 7 Execute First Project

Now this is the time to finally run the Project and testify the SharePoint Framework.

In order to run the project enter the following command

“gulp  serve”                      (case sensitive so be careful)

39

Wait until the project initialize

40

Once the Project initialized successfully, we can see SharePoint Workbench launch WebPart placeholder, mimicking SharePoint Web Page.

On this page, you can add the WebPart that has been deployed locally without using SharePoint context.

41

On click of Add button we can see available WebParts listed, select the WebPart in question and add it to the Page

42

Once added we can see the WebPart on the Page, this ensures that we have done all configuration as expected

43

In order to open the Project Code we can right click the solution directory choose option “Open with Code”

44

And we can see the Visual Studio Code launched with project dependent files

45

Command Summary

46

That is all for this demo.

Hope you find it helpful.

Advertisements

SharePoint 2013/2016: How to Find Duplicate Records in SharePoint List

During one of my assignments I have come across a situation where we need to fix data issues in SharePoint Lists.

One of the issues that we found was presence of duplicate data. In order to fix that problem in hand I had developed a Powershell Script to find out duplicate data based on a specific or a group of columns.

For the sake of demo, I have added a SharePoint List with some duplicate records in it as shown below:

1

Now let’s look into the code to understand implementation details-

In Step 1 we are getting references of the Site and Web where the SharePoint List resides

In Step 2 we are splitting the list of columns based on which we want to find out the duplicate data

We can see there are two input variables “ColumnToValidate” and “ColumnToDisplay”. “ColumnToValidate” provides columns based on which duplicity needs to be checked while “ColumnToDisplay” contains the list of columns that needs to be the part of data export.

In Step 3 we are creating the export folder that will hold the CSV files exported with duplicate records

In Step 4 we are creating the list object that will give the handle on the list which needs to be validated

2

In Step 5 we are getting list of Items from SharePoint List and grouping them based on the validation columns

In Step 6 we are creating the directory for export files

In Step 7 we are exporting all the groups which is having item count greater than 1 (this logic identifies the duplicate items)

3

That is all for the code.

Now we will see the variation in outputs depending on the columns specified for duplicacy check

In Step 8 we specify the validation and display columns, for the first execution we will check duplicate values in “Title” column

In Step 9 we are calling the “Get-DuplicateListItems” function to find the duplicate values

4

After the function executed successfully we can see the following output.

In Step 10 we can see the output of this excution and can see 6 items found which duplicate in Title Column

5

In Step 11 we can see the CSV file that is exported by the execution considering “Title” Column to be validated.

6

In Step 12 we can see the output file and can notice duplicate values in “Title” Column

7

In Step 13 we have changed the list of columns to be validated. In this second execution I have added another column “Role”.

Now the list will be validated for duplicity based on the combination of “Title & Role” Columns

8

In Step 14 we can see the output of this excution and can see 4 items found which duplicate in “Title & Role” Columns

9

In Step 15 we can see the CSV file that is exported by the execution considering “Title & Role” Column to be validated

10

In Step 16 we can see the output file and can notice duplicate values in “Title & Role” Column

11

In Step 17 we have changed the list of columns to be validated. In this second execution I have added another column “Location”.

Now the list will be validated for duplicity based on the combination of “Title & Role & Location” Columns

12

In Step 18 we can see the output of this excution and can see 2 items found which duplicate in “Title & Role & Location” Columns

13

In Step 19 we can see the CSV file that is exported by the execution considering “Title & Role & Location” Column to be validated

14

In Step 20 we can see the output file and can notice duplicate values in “Title & Role & Location” Column

15

This is a very simple technique that can be used to fix one of the issues with SharePoint List data.

Hope you find it helpful.