Today we could finish this collection of blog posts how you could make provisioning of SPFx Web Parts to Classic SharePoint Sites inside of your WSP solution package:

1. Include SPFx Assets & Package inside of WSP
2. Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP
3. Install SPFx Web Part to SharePoint Site/Web
4. Include SPFx Web Part inside of Web Template (this blog post)

In previous posts we have already done SPFx Web Parts with custom gulp tasks for copying Assets & Package files automatically from SPFx Projects to Module Item of our WSP solution and deploying SPFx Web Parts to SharePoint Server 2016 App Catalog with WSP Feature. Then we continued with problems how to programmatically install SPFx Web Part to specific SharePoint Site or Web or Sub-Web (or any kind of Web 🙂 ) inside of some WSP Feature.
So today we will end with problem how to include SPFx Web Parts into SharePoint Web Template. Continue reading “Provision SPFx Web Parts to Classic Sites – Part 4: Include SPFx Web Part inside of Web Template” →

Today I want to show you my favourite step in this collection of blog posts how you could make provisioning of SPFx Web Parts to Classic SharePoint Sites inside of your WSP solution package:

1. Include SPFx Assets & Package inside of WSP
2. Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP
3. Install SPFx Web Part to SharePoint Site/Web (this blog post)
4. Include SPFx Web Part inside of Web Template

In previous posts we have already done SPFx Web Parts with custom gulp tasks to copy Assets & Package files automatically from SPFx Projects to Module Item of our WSP solution and deploying of SPFx Web Parts to SharePoint Server 2016 App Catalog with WSP Feature.
So today we continue with problem how to programmatically install SPFx Web Part to specific SharePoint Site or Web or Sub-Web (or any kind of Web 🙂 ) inside of some WSP Feature (so we use SSOM).
SPFx WebParts looks pretty same as SharePoint Apps/Add-ins. They have to be installed in Web-Scope. So we have to make Web Scope Feature.

But firstly, let’s see what options we have in these days for programmatically installing SPFx Web Part into SharePoint Server (On-Prem)? We have no options. [ Link ]
If you try to install your SPFx Web Part with LoadAndInstallApp method you will get error like this: “Value cannot be null. Parameter name: xeAppPermissionRequests.”. As I mention before, SPFx Web Parts looks pretty same as SharePoint Apps/Add-ins in their AppManifest.xml structure. So we could modify this Manifest file to look as SharePoint App/Add-in. More about that soon below.

After that we could use LoadAndInstallApp method which works only as installer for SharePoint Apps/Add-ins to specific Web. With that method we could install this SPFx Web Parts faked as SharePoint Apps/Add-ins. The problem is that this method only works on Root Web of specific Site Collection and not in a sub sites (Sub-Webs). In that case you will get error like this: “A different version of this App is already installed with the same version number.”. [ Link ]

We could use ALM API but not on SharePoint On-Prem versions. My goal is that I want to install SPFx programatically on SharePoint Server On-Prem, inside of some Web Scope Feature because I want to add this feature in next blog post into the Web Template for SharePoint Web/Site. Continue reading “Provision SPFx Web Parts to Classic Sites – Part 3: Install SPFx Web Part to SharePoint Site / Web” →

Lets go further with next step how you could make provisioning of SPFx Web Parts to Classic SharePoint Sites inside of your WSP solution package:

1. Include SPFx Assets & Package inside of WSP
2. Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP (this blog post)
3. Install SPFx Web Part to SharePoint Site/Web inside Feature
4. Include SPFx Web Part inside of Web Template

In previous post we have already done SPFx Web Parts with custom gulp tasks to copy Assets & Package files automatically from SPFx Projects to Module Item of our WSP solution.
So today we start with WSP solution configuration. Continue reading “Provision SPFx Web Parts to Classic Sites – Part 2: Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP” →

Hello everybody! This time I would like to share with you complete solution how you could make provisioning of SPFx Web Parts to Classic SharePoint Sites inside of your WSP solution package in four steps / blog posts:

1. Include SPFx Assets & Package inside of WSP (this blog post)
2. Deploy SPFx Web Part to SharePoint Server 2016 App Catalog with WSP
3. Install SPFx Web Part to SharePoint Site/Web inside Feature
4. Include SPFx Web Part inside of Web Template

So, lets start with first step, others follow soon.
We have WSP SharePoint Project Solution created from template with Visual Studio. And we have one (or more) SPFx Web Parts created from Yeoman template generator in node.js environment. Continue reading “Provision SPFx Web Parts to Classic Sites – Part 1: Include SPFx Assets & Package inside of WSP” →

Like I promised I prepared empty project template for Application Page with React App on SharePoint 2016.

You can get it from my GitHub. In my previous post you can read more detailed tutorial about that.

Application page named MyReactApp.aspx  is in Layouts/MySPAppPageReactApp mapped folder inside Visual Studio Solution.
React App for Application page is inside ReactApps/my-react-app subfolder of project root folder.

Deploy WSP on your SharePoint 2016 Server. Go to Application Page (URL: /_layouts/15/MySPAppPageReactApp/MyReactApp.aspx) and you can see “Welcome to React on SharePoint Application Page” text on it.

Go to React App inside ReactApps/my-react-app and run gulp command. Update client side code inside App.tsx file. When you save changes you can see updated Application Page.

Cheers!
Gašper Rupnik

{End.}

Let’s imagine that we have SharePoint on-prem. For some reason we want to ignore modern SharePoint development framework SPFx. We want to create SharePoint WSP solution with some pages – for example Application Pages.
I’m not a designer expert – I don’t want to spend my lifetime looking for icons to use, tweaking colors to make sure that we are web friendly etc. Sometimes the look and feel of an application takes longer to create than actually functionality behind the scene. It is so easier if we take Office Fabric UI and our SharePoint page will look like all other OOTB pages from Office 365.

“The Office UI Fabric is The front-end framework for building experiences for Office and Office 365. It is a responsive, mobile-first, front-end framework, designed to make it quick and simple for you to create web experiences using the Office Design Language. It’s easy to get up and running with Fabric – whether you’re creating a new Office experience from scratch or adding new features to an existing one.”

We can simply import css file of Fabric UI Styles to our page and we could use styles from it – responsive UI, brand icons, colors, localization, theme generator, animations etc.

Another things are Fabric UI Components like Button, Checkbox, Rating, Slider, Breadcrumb, SearchBox, DetailsList, PeoplePicker, DatePicker, ColorPicker, MessageBar, ProgressIndicator, Dialog, Modal etc. List of all components you can see here.
But if you want to go with them, you have to use React (you can use AngularJS or Swift too) because they are built with the React framework. That is not bad side, that is good side! SPFx use React too, so your code could look very similar to them.

I want to share with you my idea / my solution how to use Office UI Fabric Components with React and TypeScript inside any type of SharePoint on-prem pages within WSP solution. Continue reading “SharePoint Application Pages with React and Office Fabric UI interface” →

Today we could take a look on simple example how we can add Google reCAPTCHA to our SharePoint Framework (SPFx) React Web Part.

Firstly, you have to register to use reCAPTCHA API here. Choose reCAPTCHA V2. After registration save Site Key because you will need it a little bit later.

Because we chose React Framework for our SPFx Web Part we could use react-google-recaptcha npm package. We must use react-async-script too. Continue reading “SPFx React Web Part & reCAPTCHA” →

Let’s imagine that we have SharePoint PeoplePicker and we want to fill some additional fields with user properties from AD or some other systems (HRM, DB etc.) when user is selected. We want to use client side scripting for better user experience and responsiveness without postback. Continue reading “Run custom JavaScript code when user is selected from PeoplePicker” →