Using PnP-JS-Core (sp-pnp-js) in Node.js environment

PnP-JS-Core ❤ Node.js

Do you know what is PnP-JS-Core? I hope so. If don’t know about PnP-JS-Core, here is a quick overview:

The Patterns and Practices JavaScript Core Library was created to help developers by simplifying common operations within SharePoint and the SharePoint Framework. Currently it contains a fluent API for working with the full SharePoint REST API as well as utility and helper functions. This takes the guess work out of creating REST requests, letting developers focus on the what and less on the how.

In other words that’s an wrapper over SharePoint REST API as well as other helper functions. PnP-JS-Core can speedup your development by providing a lot of useful functions, utilities, operators and objects to work with SharePoint. For example consider how it’s easy to do some routine operations:

pnp-js-core experience

I really recommend you to take a look at the official github repository here - https://github.com/SharePoint/PnP-JS-Core as well as wiki

The main purpose for PnP-JS-Core is using inside browser. You include sp-pnp-js into your html and you are ready to go. But the library is designed with extensibility and supportability in mind. That means you can run PnP-JS-Core not only in browser, but in Node.js environment too. Hmmm…. why do you need this, you might ask. Nowadays Node.js integrates in your development pipeline more and more. Do you know gulp, webpack, browserify, etc.? All this tools run on Node.js. With Node.js you can build any type of application – web applications, desktop (cross platform!) apps, micro services, Azure functions and many many other things. Sometimes you need to interact with SharePoint from you Node.js application. Ideally you would like to utilize PnP-JS-Core for that task as well. Meet node-pnp-js which will help you.

As you might guess the main issue when working with SharePoint from Node.js is authentication. When using inside browser, current user is already authenticated and you can use the library as is. For Node.js situation is different. There is no authenticated user and you have to implement authentication by your own. node-pnp-js uses my other library node-sp-auth as authentication provider. In the past I’ve created a sample of integration PnP-JS-Core and Node.js and node-pnp-js is just a logical continuation designed as a separate reusable package.

So let’s get started! More...

Building SharePoint client web part with Vue.js and single-file components

Vue.js becomes more and more popular and it’s time to build real life sample using Vue’s single-file components. Single-files components are the building blocks for Vue application. It’s not required to use single files components for Vue application, but they give you some advantages:

  • recommended style for Vue applications
  • modern components-based approach
  • good separation of concern between markup, css and code
  • we don’t need to use standalone version of Vue and can use runtime version, which is smaller
  • since we are using runtime version of Vue, our app works a bit faster, because not need to compile templates (already compiled by vue-loader)

Original sample can be founded under SharePoint Framework client-side web part samples – that’s a basic todo web part built with Vue. This a companion post describing some concepts.

The most difficult part is to setup our SPFx build pipeline to support Vue. Here are the steps required in order to make SPFx vue-compatible: More...

SharePoint Framework–building hello world client web part with Vue.js

What is Vue? One can say that’s just another js framework but that’s not true. Vue.js is a progressive framework for building user interfaces for web. Now days it’s not so popular as Angualr and React, but community growing extremely fast and some bloggers predict that Vue in 2017 will be as popular as Angular or even React. Main github repository has 42K stars on a moment of writing, for comparison angular 1 has 58K and angular 2 only 20K. For me Vue looks very very promising and it’s definitely good reason to take a look at this framework. In this post you will see how to create very basic client web part with Vue.js. Let’s get started.

Create new empty directory and run

yo @microsoft/sharepoint

In the end select “No Javascript Framework”. More...

SharePoint Framework–extending build pipeline with custom configurations

Sometimes you need to adjust SPFx build pipeline a bit, in order to add your own webpack loaders or modify configuration for some tasks. This can be done in different ways depending on your needs. Let’s try to take a closer look at the options available.   Below is a diagram showing common config flow with extensibility points:

gulp-spfx-pipeline

There are two places where you can put your customizations – under custom task’s config adjustments or using configuration file under config/[task name].json during loadCustomConfigs() method. More...

SharePoint development state in 2016: story based on sharepoint.stackexchange analysis with Power BI

I’ve heard about Power BI and Power BI Desktop a lot, but have never tried these tools before. So I decided to make an analysis of some popular questions and answers forum - http://sharepoint.stackexchange.com with help of Power BI Desktop. If you are SharePoint person (developer, admin, power user, etc.) that’s a big chance that you have visited this site before or maybe you are even frequent visitor. In this post, you will find a lot of images, graphics, trends, tables, maps, charts and so on. All made with great tool Power BI Desktop and Stack Exchange API as a data source. Some advanced data was collected with help of Google Maps Geocode API and nodejs webpages scrapper – osmosis.

The data was grabbed from sharepoint.stackexchange at the beginning of January 2017. Most of the data is filtered starting from the 2010 year because a relatively small number of questions were created before 2010 (around 200).

NOTA: all thoughts here are just my thoughts and may be incorrect or not aligned with yours. Please, share your opinion in comments.

Basic data

Let’s start with some basic information available:

 

More...

Working with SPFielduserValue in item event receivers - some pitfalls.

Recently I posted about accessing lookup fields in item event receivers and about some pitfalls when you are using it.

Next part is about using PeopleEditor (or people picker as it sometimes called). Let's add new field to our list and see what will happen in event receivers.

First, ItemAdding:

In AfterProperties you can see "7". "7"?! Why? Because SPFieldUser that we was added also an a lookup field. Lookup list for this field is a hidden UserInformationList that trackes a part of user-related information, such as login name, display name, email, and some other. "7" is id of user in UserInformationList. You can get SPUser object by using method web.SiteUsers.GetByID(id), or you can use SPFieldUserValue to get user.

In ItemAdded you can see that our lookup has a value - this a login name of a user:

But sometimes you may encounter with problem, when user may not in UserInformationList. I delete user from this list using this small PS script:

More...

How to upgrade feature in SharePoint 2010 using Visual Studio

Hi2all!

Please, refer to my revisited post, it contains more solid and working example of upgrading features using visual studio.

Today I'm going to explain how to use new SharePoint 2010 enhancement - feature upgrade. I'll create small example just to show how it works. First of all let's create new Visual Studio project and add new feature named "SomeFeature". Our feature will be install new list instance to site - Tasks list. In feature settings specify version of your feature, it must be set to "1.0.0.0". Deploy you project and make sure that your feature successfully install and new list appear. Its time to upgrade now. There is no command "Upgrade" in Visual Studio, that why we'll create own command using nice CKSDEV plugin. Go to the project settings and create new deployment configuration "UpagradeFeatures". There are three steps in configuration - Recycle IIS Application pool and two steps named "Run PowerShellScrips" from CKSDEV extension.

First script will be update our solution (.wsp file) in configuration database, the second one will find all features that need to be upgraded and call method "Upgrade" on each. Upgrade will be fire only on those features, that have version number is less than appropriate number in configuration database. SPWebApplication class has a method QueryFeatures that returns all features in web application that need to be upgraded.
Here is a code in file UpdateSolution.ps1:

param([string]$solutionPackageName, [string]$solutionPackagePath)
Add-PSSnapin Microsoft.SharePoint.Powershell -EA SilentlyContinue

$solution = Get-SPSolution | where-object {$_.Name -eq $solutionPackageName}
if ($solution -ne $null) {
  if($solution.Deployed -eq $true){
    Write-Host "Updating old version of solution package"
    Update-SPSolution -Identity $solutionPackageName -LiteralPath $solutionPackagePath -Local -GACDeployment
    Write-Host "Solution has been updated"
  }
  else {
    Write-Host "Solution package cannot be updated because it is not currently deployed"  
  }
}

More...

How to extend deployment of sharepoint solution in Visual Studio using "Run PowerShell script" deployment step.

Hi2all! Today I'm going to explain how you can easily extend your deployment tasks using Visual Studio and plugin CKSDEV for Visual Studio 2010. This plugin enhance VS with many custom SharePoint project items (SPI), add additional deployment configuration for your project and some other useful details. One of the most great possibilities that CKSDEV offer are additional deployment steps:

Imagine that after deployment you must create on the site several sharepoint groups and assign permission to them. Using deployment step "Run PowerShell Script" you can place all logic reside to group creation to your custom powershell script file and execute this script file after deployment. We start with creation of script file and then we integrate script in Visual Studio 2010.
I've been created xml file definition for groups that have such structure:


            DOMAIN\FirstName_SecondName

Now lets create two files - in the first we are storing all functions and the second will use functions from this file. Call the first file "functions.ps1" and the second - "starter.ps1". "functions.ps1" include function "AddGroups" that actually read xml with group definition and adds required groups to a site. I will explain in other post how my code work, but it rather simple, if you have base knowledges of powershell you easily understand it:

More...

Changing default view for ListViewWebPart programmatically.

Hi2all! Recently I faced with problem of changing default view for ListViewWebPart. My ListViewWebPart placed is on the meeting workspace site, on default.aspx page.I need to switch view programmatically to custom. Ok, at first glance not so hard. We must take instance of our webpart and set it property “ViewGuid” equal to custom view id in list, which is associated with webpart. Here is a peace of code:

var file = workspaceWeb.Files["default.aspx"];
var wpMngr = file.GetLimitedWebPartManager(PersonalizationScope.Shared);
var attendeeListViewWebPart = (ListViewWebPart)wpMngr.WebParts.Cast<WebPart>().FirstOrDefault(w => w.Title.Equals("Attendees"));
var list = workspaceWeb.Lists["Attendees"];
var view = list.Views["Attendees"];
attendeeListViewWebPart.ViewGuid = view.ID.ToString("B").ToUpper();
wpMngr.SaveChanges(attendeeListViewWebPart);

But it not works as expected. I get reference to SPLimitedWebPartManager, find my webpart and try to update ViewGuid, but every time I try to save changes I get error “The specified view is invalid”. Very strange behavior I suppose. I try to solve this issue about 8 hours and I find solution at last. May be it will be surprise for you, but every time when you add ListViewWebPart to a page, it internally creates hidden view in list. This hidden view belong to this webpart, it id generates by webpart and webpart set its own ViewGuid equal to this id. Let’s check it using SharePoint Manager 2010. I create test site collection from blank site and create links list named “dummy”. Let’s go to SharePoint Manager:

More...