Microsoft has made it easier to customise “modern” SharePoint Online Lists and Libraries Forms natively.
But what do you do if you need to managing list is “classic” Form or the edit for option is just not available?
One option is to write a PowerShell script, see example below which will hide or show fields within New or Edit Forms.
This code and other scripts can be accessed in GitHub.
For more information on customising Modern SharePoint Forms, see these Microsoft articles:
Recently I was asked to develop a webpart for a modern SharePoint site. My first thoughts, where do I start; I haven’t done any webpart development for years? I would like to share my journey with you over the next few posts and hope my experience will help new and returning developers along the way.
In my previous post I covered:
In this post I will cover:
This article is different to its predecessors in the series, because I have published the SPFx-People-Search webpart solution to my GuiHub repository, I will be focusing on what I have found challenging about writing this webpart with React Hooks, SPFx and Microsoft Graph.
In the previous article I created the Project Folder Structure with stub files ready to add code. So now I can focus on creating the components such as the Service and User Interface. I deliberated on where to start, creating the Service layer or UI. Deciding to start with a service class called MSGraphService.ts and its corresponding interface.
Note: I have added a data JSON file, however I have more work to do before this can be used for testing in the local workbench.
The MSGraphService is based upon the Service Locator pattern which I took inspiration from an old colleague Vardhaman Deshpande who wrote this article. The MSGraphService files are located here:
Having decided on this pattern and how to implement it, the other challenges I had with the Microsoft Graph API included:
What to do with the data returned by Microsoft Graph User Photo endpoint. With the lack of documentation, the Graph Explorer is great, but it still took a bit of work to figure out what to do with “Blob Strings” …
Microsoft Graph Explorer Me/User Photo
https://developer.microsoft.com/en-us/graph/graph-explorer?request=me%2Fphoto%2F%24value&method=GET&version=v1.0
See the getUserPhoto() function located within MSGraphService.ts
What the different User Presence options are: User may display…? Again, the Graph Explorer was a great help, it went a long way to making up for the lack of documentation.
Microsoft Graph Explorer Me/User Presence
https://developer.microsoft.com/en-us/graph/graph-explorer?request=me%2Fpresence&method=GET&version=beta
See the getUserPresence() function located within MSGraphService.ts and the implementation within ResultCard.tsx
This time I can praise the documentation by Microsoft: “To consume Microsoft Graph or any other third-party REST API, you need to explicitly declare the permission requirements from an OAuth perspective in the manifest of your solution.” For more information see https://docs.microsoft.com/en-us/sharepoint/dev/spfx/use-aad-tutorial#configure-the-api-permissions-requests
And my working example of the package-solution.json can be found here: https://github.com/sionjlewis/SPFx-People-Search/blob/main/config/package-solution.json
To keep things simple, I kept the PeopleSearchWebPart.ts webparts “main/entry” class, created by the SPFx Yeoman scaffold, pretty much “as is”. Converting this class to React Hook seemed to be more hassle that it was worth.
So unlike all the React.JS Hook Documentation, I was unable to implement a basic function, but instead I found I needed to write something similar to the following:
export const PeopleSearch: React.FunctionComponent<IPeopleSearchProps> = (props) => {
…
};
Having organised the components into a Project Folder Structure, I started at the top:
I continued on with this process of working until I “finished” the Results components and then moved onto the Footer and Search components.
You may have noticed that I have not started on the filter components as my strategy is to get something working as quickly as possible, with the following goals:
Back in my “JavaScript” days I was a big fan of underscore.js, so I tried it within this project, however I found the library too cumbersome to import and so I ended up replacing it with Lodash which seems to play better with TypeScript.
I am now a self-confessed fan of React Hooks and have really enjoyed the process of building this webpart. As with any new development technique or process, I will find better ways of doing things as I do more, but I like how clean the code looks and reckon the modularity will make the solution so much easier to support.
When attempting to debug a recently copied SPFx solution I kept seeing the following error displayed by my browser:
Cannot GET /temp/workbench.html
As per usual, I had entered the following command into the VSCode Terminal window:
gulp serve --nobrowser
Selected the Local workbench profile and clicked on Start Debugging, which attempted to opened the following URL with Google Chrome:
https://localhost:4321/temp/workbench.html
The solution to stop this “Cannot GET” error was to enter the following URL:
https://localhost:5432/workbench
This appears to reset the “service, cache or something” causing the error to go away.
Now I can debug as per normal again.
Recently I was asked to develop a webpart for a modern SharePoint site. My first thoughts were; where do I start; I haven’t done any webpart development for years? I would like to share my journey with you over the next few posts and hope my experience will help new and returning developers along the way.
In my previous post I covered:
In this post I will cover:
The official React website has some fantastic documentation and to avoid duplicating what they have already published I would recommend reading the “Thinking in React” article before we move on. I found the section “Step 2: Building A Static Version In React” particularly useful to kick-off the build of this webpart.
The first thing I did was to import the React module using following statement:
import React, { useState, useEffect } from 'react';When I tried to build the project, I received the following error:
Module '"c:/.../SJLewis.SPFx.Webparts.People/node_modules/@types/react/index"' can only be default-imported using the 'allowSyntheticDefaultImports' flagts(1259) index.d.ts(46, 1): This module is declared with using 'export =', and can only be used with a default import when using the 'allowSyntheticDefaultImports' flag.
Plus, the React and ReactDom import statements are underlined in red:
What is allowSyntheticDefaultImports? It allows default imports from modules with no default export and it does not affect code emitted, it is just typechecking.
Open the tsconfig.json file and add the following code to the “compilerOptions” section:
"allowSyntheticDefaultImports": trueYour tsconfig.json file should look something like this:
And now TypeScript is happy…
Before moving on to the next step, let’s build the project and commit your changes to source control (just in case we break the project later).
We don’t always know all of the packages we want to use upfront, however I like to add what I can upfront. For this example, I am going to add the following npm packages to my project. Enter the commands into the VS Code Terminal window:
And finish by doing some “housekeeping” and confirming that the project builds:
gulp clean
npm shrinkwrap
gulp buildI like to start by creating a folder structure based upon the Components and Services listed within my wire-frame(s) and components list.
| Component Name | Data Source | Expected Results | Component Actions |
| Search Wrapper | – | – | |
| Search Box | Graph Users | Zero to more items | Filter |
| Search Clear | – | Clear data & filters | |
| Filter Wrapper | Graph Users | Zero to more items | – |
| Filter Combo-box | Graph Users | Zero to more items | Filter |
| Filter Auto-suggest | Graph Users | Zero to more items | Filter |
| Result Wrapper | Graph Users | Zero to more items | – |
| Result Card | Graph User | One item | Display |
| Result User Photo | Graph User Photo | One item | Display |
| Result User Presence | Graph User Presence | One item | Display |
| Result User Contact | Graph User | One item | Display |
| Footer Wrapper | Graph Users | Zero to more items | Display |
Starting with components, add the following folders under this path:
“~\src\webparts\peopleSearch\components\”
Next, add blank/empty .TSX files for each component:
~\src\webparts\peopleSearch\components\filters\
~\src\webparts\peopleSearch\components\footer\
~\src\webparts\peopleSearch\components\results\
~\src\webparts\peopleSearch\components\search\
Even thought these files are empty the project should build without any issues, I still like to build the project after every major change I make.
<em>gulp build</em>Note: “~\” represents the project’s root folder.
I am going to create the folder structure which will be used by the Service, Models & Data files. Start by adding the following folders under this path: “~\src\”
I have not planned exactly what will be created, but here is an overview as to what will go where:
Now that I have my project structure laid out, I can focus on creating either the Data & Services or the Components & User Interface. Neither option is wrong, however, because I know more about the User Interface than the Services, that is where I will begin for my next post.
Tip: If you cannot decide on which order to build your webpart(s) take a look at the “Thinking in React” article, you may also find the section “Step 2: Building A Static Version In React” useful.
Frustrated by the warning message on Windows computers “This file came from another computer and might be blocked to help protect this computer“? The warning appears when you try to open a PowerShell file that has come from a 3rd party.
Right-click on a single file and choose Properties and look for the Security section at the bottom of the window:
“This file came from another computer and might be blocked to help protect this computer.”
You can check the box (in Windows 10) or click the Unblock button (in Windows 7/8) to unblock the file.
If you have multiple files and are unable to select them all at once, you will need to manage each file separately to unblock them. If the files were supplied in a ZIP file, make sure you always unblock the ZIP file before extracting the files.
If you have multiple files an alternative is to run the following PowerShell:
dir -Path [directory path] -Recurse | Unblock-File
Note: Don’t forget to replace [directory path].
Here is a list of steps that I usually complete when configuring a PC, so that I can run PowerShell script that connects to SharePoint Online and Microsoft Teams.
The SharePoint Online Client Components SDK can be used to enable development with SharePoint Online. …[Microsoft] recommend using NuGet packages rather than installing CSOM assemblies to GAC. However, I find these DLLs useful when writing CSOM directly within my PowerShell scripts.
Click here to select and download the relevant MSI file.
To be able to complete the other steps that follow, we need to run the Windows PowerShell ISE as Administrator. If you would like to make this a more “permanent” action, follow these steps:
From now on, when opening the Windows PowerShell ISE application from the Start menu, you will be prompted by: “Do you want this App to change your device.” Don’t forget to click Yes.
Note: If you do not open Windows PowerShell ISE with “Run as Administrator” you will not be able to set the Execution Policies.
The Microsoft Teams PowerShell Module has some known issues with PowerShell 7.
For the best experience, [Microsoft] recommend that you use PowerShell 5.1. If we are running anything newer than 5.x then you may need to down-grade…
Run the following PowerShell code to check the PowerShell version
Get-Host | Select-Object Version;
Generally, the execution policies on new machines are set to a level that will restrict the installation and running of our scripts. See the About Execution Policies article for information on how to manage them. Running the following PowerShell cmdlet to see what your current Execution Policy is set to:
Get-ExecutionPolicy;
I usually set my Execution Policy to Unrestricted, by running the following PowerShell cmdlet:
Set-ExecutionPolicy -ExecutionPolicy Unrestricted;
The SharePoint Online Management Shell is a tool that contains a Windows PowerShell Module to manage your SharePoint Online subscription in Office 365.
I would recommend using the PowerShell cmdlet instead of the .MSI files, as the process for updating modules later are simpler. Click here for more information about the SharePoint Online Management Shell.
Run the following cmdlet, in administrative mode, to see if the SharePoint Online Management Shell has already been installed:
Get-Module -Name Microsoft.Online.SharePoint.PowerShell -ListAvailable | Select Name,Version;
Or run the following cmdlet, in administrative mode, to install the latest version of the SharePoint Online Management Shell:
Install-Module -Name Microsoft.Online.SharePoint.PowerShell;
SharePoint Patterns and Practices (PnP) contains a library of PowerShell commands (PnP PowerShell) that allows you to perform complex provisioning and artifact management actions towards SharePoint. The commands use CSOM and can work against both SharePoint Online and SharePoint On-Premises (depending on the modules installed).
Click here for more information or run the following cmdlet to install the SharePoint Online PnP PowerShell library:
Install-Module SharePointPnPPowerShellOnline;
Microsoft Teams PowerShell is a set of cmdlets for managing Teams directly from the PowerShell command line.
Warning: There are known issues with PowerShell 7 and Teams PowerShell. For the best experience, we recommend that you use PowerShell 5.1.
Click here for more information or run the following cmdlet to install the Microsoft Teams library:
Install-Module MicrosoftTeams;
As a rule, I avoid using the Update-Module cmdlet as this results in having multiple versions of the same library installed. Instead, I like to use the Uninstall-Module cmdlet before then installing the latest version.
Recently I was asked to develop a webpart for a modern SharePoint site. My first thoughts were; where do I start, I haven’t done any webpart development for years? I would like to share my journey with you over the next few posts and hope my experience will help new and returning developers along the way.
In my previous post I covered:
In this post I will cover:
Let’s start by addressing the pitfalls I listed in my last post:
This one is easy; we are going create a new / blank project. If we need to refer to someone elses code for inspiration, then we will do this outside of our project.
The React website has a great article on this called Thinking in React which I recommend reading. So, let’s practice what we preach….
Well the plan we made to avoid the previous pitfall will also help with this too. If we are still confused it is because we need to do some more planning… 😊
The tooling used to scaffold SPFx project is out of date. This should not be a problem if you have just configured a new brand environment/machine. If, however like me you are coming back to an existing environment/machine then I would recommend uninstalling everything SPFx related:
npm uninstall @microsoft/generator-sharepoint --global
npm uninstall yo --global
npm uninstall gulp --globalAnd finally, Node.js using the “Add or remove programmes…” to check the version and uninstall if required.
Once done, you can re-install the tools with confidence…
Let’s start by creating a wire-frame, which essentially is a design without branding or colours. There are many great tools on the market for creating wire-frames, such as Balsamiq, Lucidchart or Microsoft Visio. However for this example, I am going to use Microsoft PowerPoint to demonstrate how easy it is to create an effective wire-frame. Click here to open my People-Search-Wire-Frame.pdf file.
Start by adding the components to the diagram, while thinking about how the end-user would interact with your webpart.
On the next diagram I have labelled each control, giving a brief description of each control and / or its behaviour. If you are a solo developer you may decide to skip this detail, however, I find the validation process useful.
The last page/diagram breaks the webpart down into components. I have done this by functionality, repeatability and in some cases, where the data will come from.
Now that I have a design I can start thinking about where the data is going to come from. In the past I may have used SharePoint Search with the User Profile Service, however today I am going to use the Microsoft Graph API, as “The Graph” combines multiple Microsoft 365 services into a single endpoint.
Tip: The Graph Explorer is a great place to start working Microsoft Graph, it has a number of sample queries to run against dummy data or better still sign in to your Microsoft 365 Tenant and test queries against your own data (see my next tip).
Tip: Sign-up to the Microsoft Developer Programme and get a Microsoft 365 developer subscription to develop your solutions independent of your production environment.
The table below lists the components I expect to build, obviously this may change if I find other complexities once the build is under way, plus:
| Component Name | Data Source | Expected Results | Component Actions |
| Search Wrapper | – | – | – |
| Search Box | Graph Users | Zero to more items | Filter |
| Search Clear | – | – | Clear data & filters |
| Filter Wrapper | Graph Users | Zero to more items | – |
| Filter Combo-box | Graph Users | Zero to more items | Filter |
| Filter Auto-suggest | Graph Users | Zero to more items | Filter |
| Result Wrapper | Graph Users | Zero to more items | – |
| Result Card | Graph User | One item | Display |
| Result User Photo | Graph User Photo | One item | Display |
| Result User Presence | Graph User Presence | One item | Display |
| Result User Contact | Graph User | One item | Display |
| Footer Wrapper | Graph Users | Zero to more items | Display |
Just because you are developing a SPFx webpart does not mean you have to build it in React, there are other options, such as “No JavaScript framework” (i.e. hand-rolled or do it yourself) or Angular.
Sorry to disappoint, however I am going to stick with React – React Hooks possibly with useReducer.
To help you reproduce my solution I have listed the steps below.
I am a fan of Workspaces they enable you to save and share preferences including UK/NZ spellings…
Now we are ready to open the Terminal window with VS Code and run the Yeoman SharePoint generator.
yo @microsoft/sharepointOnce the Yeoman command has completed, we can check the solution by running the following commands:
gulp clean
gulp build
npm shrinkwrap
gulp serveI am going to designate source control out of scope for this post, however what I would recommend committing your code (or backing it up) at this point, so that you have a place you can rollback to if it all goes wrong.
For my next post I will focus on building the structure of my webpart.
Recently I was asked to develop a webpart for a modern SharePoint site. My first thoughts were; where do I start, I haven’t done any webpart development for years? I would like to share my journey with you over the next few posts and hope my experience will help new and returning developers along the way.
If you have not done so already, install your preferred Integrated development environment (IDE). My choice is Visual Studio Code, however there are three supported code editors:
Now you are ready to install or in my case update the development toolchain prerequisites. Pop back to the Microsoft article and follow the steps.
Tip: Hold [Ctrl]+[`] will open the Terminal window in VS Code.
In my opinion Microsoft has done a good job in publishing a collection of articles describing how to build and deploy your first webpart. I would recommend starting by reading the “Set up your SharePoint Framework development environment” articles to get yourself up and running
Tips:
As a Windows 10 user, I opened “Add or remove programs” and entered Node into “Search this list” and checked the version before running executing the node-v10.22.0-x64.msi file.
The following command can be used to check the version installed:
node -vDon’t forget to configure a self-signed SSL certificate which can be done by running the following command.
gulp trust-dev-certYou will use this when testing your custom solutions from your development environment which uses HTTPS by default.
Even though Google Chrome is my preferred browser, I like to have Microsoft Edge and Firefox installed for additional testing capabilities.
Tip: I use Google Chrome’s persons (profiles) to switch between Tenants and Accounts. I understand that other browsers now include similar functionality.
I like this code editor for its simplicity and Plugins, such as: JSON Viewer and XML Tools.
Captures all HTTP(S) traffic between your computer and the Internet with Fiddler HTTP(S) proxy. Inspect traffic, set breakpoints, and fiddle with requests & responses.
Helps you build, connect and test APIs. An example is testing the Microsoft Graph API.
Back in the mid 2010’s I built a lot of SharePoint webparts and worked with numerous JavaScript frameworks including: jQuery, jQuery UI, Underscore.js, Knockout, Vie.js and experimented AngularJS.
When the SPFx framework came on the scene the “AngularJS verses React (ReactJS)” conversation was fresh. While I built a handful of SPFx Webparts and Extensions I have to acknowledge things have moved on since then…
Even though I had done these tutorials a few years ago, I found it invaluable to do them again:
Another great place to start with is the SharePoint Framework Client-Side Web Part Samples website and check out the Getting Started page. You can either clone the GitHub repository or just explore the code online.
If you are anything like me, I would recommend avoiding the following pitfalls:
For my next post I will focus on design and frameworks.
A demo of the PnP Modern Search webparts put together to replicate some of the functionality found in the “Classic” Search Centre.
For more information on the PnP Modern Search Webparts click here: https://microsoft-search.github.io/pnp-modern-search
For an extended* version of the Search Verticals webpart click here: https://github.com/sionjlewis/pnp-modern-search
*Forwards the query string parameters or fragment to the next page.
This is the second time I’ve been unable to access the Content Type Hub on a new Tenant as SharePoint Administrator.
The first time it happened, I thought it might be a one-off provisioning error and so I asked the Company Administrator (the person who create the Tenant) to grant me access.
This time I thought this might be in Microsoft plan to limit access. Having done a Google search and found solution posed by Jasper Ooosterveld. Apparently, he has had the same issue as a Global Administrator…
Because the Content Type Hub is a special and is not listed within SharePoint Admin Center you can use the following URL to add your SharePoint Administration account as a site collection administrators.
https://TenantName-admin.sharepoint.com/_layouts/15/online/TA_SiteCollectionOwnersdialog.aspx?site=https://TenantName.sharepoint.com/sites/contentTypeHub
Do not forget to replace TenantName with your tenant name and that should be job done!
You must be logged in to post a comment.