How to provision modern Sharepoint page with custom SPFx web part via PnP template

If you developed custom SPFx web part and tested it on dev env you will most probably want to automate it’s provisioning to customers environments. In this article I will show how to do that via PnP template.

When you need to create PnP template the simplest option is to export it form existing site and copy those components which you need. This is much faster than trying to remember whole PnP schema.

So first of all we need to build sppkg in release mode (with “--ship” parameter) and upload it to App catalog:

gulp clean
gulp bundle --ship
gulp package-solution --ship

After that add your web part to some modern page – we will use test.aspx for example here. Now you have modern site running with your custom web part.

Next step is to export PnP template from your site:

Get-PnPProvisioningTemplate -Out template.xml

When export will be done edit template.xml and copy section pnp:ClientSidePages which may look like this (of course if you have several SPFx web parts there will be several pnp:CanvasControl instances):

<pnp:ClientSidePages>
 <pnp:ClientSidePage PageName="test.aspx" EnableComments="false" Publish="true">
   <pnp:Sections>
  <pnp:Section>
    <pnp:Controls>
   <pnp:CanvasControl WebPartType="Custom" JsonControlData="..." ControlId="..." Order="1" Column="1" />
    </pnp:Controls>
  </pnp:Section>
   </pnp:Sections>
 </pnp:ClientSidePage>
</pnp:ClientSidePages>

and paste it to PnP template which you are going to use for provisioning on customers environments. When this template will be applied to the site it will have modern page with your custom SPFx web part.

Move Mercurial repository to Git on Bitbucket

As you probably know Bitbucket will discontinue Mercurial support – all Mercurial repositories will be removed at June 1, 2020. So if you have Mercurial repositories there it is good to take care about them in advance and move them to Git which becomes basic source control in Bitbucket. Articles which I found had lack of some important information so it still took time to go through them. So I decided to write separate post and summarize all steps which are needed for moving Mercurial repositories to Git on Windows 10 PC:

1. Install latest version of TortoiseHG (older versions may not have HgGit plugin which will be needed below)
2. Install Git for Windows 3. Rename repository and make hg clone from new address
4. In HR repository folder enable HgGit plugin by adding following section to .hg/.hgrc file:
[extensions]
hggit=
5. Go to "C:\Program Files\Git\usr\bin" and run ssh-keygen.exe
Use default settings - it will add 2 files to C:\Users\{username}\.ssh: id_rsa and id_rsa.pub
6. Copy content of id_rsa.pub file
7. Login to bitbucket.org > Profile page > Settings > Security > SSH Keys > Add key > Insert content of copied id_rsa.pub
8. Go to hg repositoy folder:
8.1. in .hg/.hgrc add following line under [ui]:
ssh = "ssh.exe"
8.2. ensure that path "C:\Program Files\Git\usr\bin" (which is path to ssh.exe) is added to PATH environment variable 8.3 run the following command:
hg push git+ssh://{username}@bitbucket.org/{username}/{repository}.git
(git repository url can be copied from bitbucket and then replace https by git+ssh)

After that your repository should be available on Git with all version history and branches you had in Mercurial.

Disable redirection from user details page UserDisp.aspx to MySite Person.aspx in Sharepoint

As you probably know Sharepoint has built in Created By and Modified By fields which are automatically added to all list items and documents which added to Sharepoint. Under the hood it is done by defining these fields in base content type derived by all other content types. If you add these fields to list views they will be clickable – it will be possible to click on user name and go to user details page UserDisp.aspx which will show user’s attributes (synced with AD if you use Windows authentication).

However in some cases you may notice that instead of UserDisp.aspx Sharepoint redirects to user profile page Person.aspx in MySites web application. If you are not planning to use user profiles and MySites in your Sharepoint site then this behavior may be unwanted and it may be needed to disable this automatic redirection.

Technically redirect is made by MySiteRedirection.ascx user control which is added by MySite farm scope feature (FeatureId = 69cc9662-d373-47fc-9449-f18d11ff732c) which has the following elements.xml file:

<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <Control Id="ProfileRedirection" Sequence="100" ControlSrc="~/_controltemplates/mysiteredirection.ascx"/>
    <Control Id="MobileSiteNavigationLink1" Sequence="100"
        ControlClass="Microsoft.SharePoint.Portal.MobileControls.MobileMySitePageNavigation"
        ControlAssembly="Microsoft.SharePoint.Portal, Version=15.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c">
    </Control>
</Elements>

In order to disable redirection we need to deactivate this feature:

Disable-SPFeature -Id 69cc9662-d373-47fc-9449-f18d11ff732c

After that after clicking user names in Created By/Modified By columns (and all other clickable columns of User or group type) user will be redirected to regular UserDisp.aspx page