Category Archives: SharePoint 2019

People-Search Wire Frame Page3

SharePoint/SPFx: Returning to Webpart Development Part #2

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:

Avoiding Pitfalls Part #1

Let’s start by addressing the pitfalls I listed in my last post:

1. Distracted by someone else’s code

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.

2. Getting bogged down in detail

The React website has a great article on this called Thinking in React which I recommend reading. So, let’s practice what we preach….

3. Avoid the muddying of data and presentation code/layers

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… 😊

4. Check the SPFx Project Generator Version

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 --global

And 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…

Solution Design (Avoiding Pitfalls Part #2)

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.

Wire-Frames

Start by adding the components to the diagram, while thinking about how the end-user would interact with your webpart.

People Search Wire Frame Page 1

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.

People Search Wire Frame Page 2

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.

People Search Wire Frame Page 3

Data Sources

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:

  • The Data Source gives a rough idea as to where to find the data.
  • The Expected Results gives a rough idea of shape of the data.
  • The Component Action describes what the component will do with the data.
Component NameData SourceExpected ResultsComponent Actions
Search Wrapper
Search BoxGraph UsersZero to more itemsFilter
Search ClearClear data & filters
Filter WrapperGraph UsersZero to more items
Filter Combo-boxGraph UsersZero to more itemsFilter
Filter Auto-suggestGraph UsersZero to more itemsFilter
Result WrapperGraph UsersZero to more items
Result CardGraph UserOne itemDisplay
Result User PhotoGraph User PhotoOne itemDisplay
Result User PresenceGraph User PresenceOne itemDisplay
Result User ContactGraph UserOne itemDisplay
Footer WrapperGraph UsersZero to more itemsDisplay
Components List

Choosing a Framework

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.

Creating a SPFx Project

To help you reproduce my solution I have listed the steps below.

Creating a VS Code Workspace

I am a fan of Workspaces they enable you to save and share preferences including UK/NZ spellings…

  1. Create your project directory, for example:
    C:\…\Company.SPFx.Webparts.People
  2. Open Visual Studio and navigate to: File -> Open folder…
  3. Next locate and open your new directory
  4. Once opened navigate to: File -> Save Workspace As…
  5. Navigate up a folder, enter “Company.SPFx.Webparts.People.code-workspace” and click save

Scaffold the SPFx Project

Now we are ready to open the Terminal window with VS Code and run the Yeoman SharePoint generator.

  1. Open Terminal: [Ctrl]+[`]
  2. Enter the following commands:
yo @microsoft/sharepoint
  1. Next enter: MS-Graph People Search – Press enter
  2. Select: SharePoint Online only (latest) – press enter
  3. Use the current folder – press enter
  4. Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? – Y
  5. Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? N
  6. Select: WebPart – press enter
  7. What is your Web part name? People Search – press enter
  8. What is your Web part description? Search for people within your organisation using Microsoft Graph – press enter
  9. Select: React – press enter

Once the Yeoman command has completed, we can check the solution by running the following commands:

gulp clean
gulp build
npm shrinkwrap
gulp serve

Source Control

I 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.

Next time

For my next post I will focus on building the structure of my webpart.

SharePoint/SPFx: Returning to Webpart Development Part #1

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.

Development Environment & Tools

Development Tools

Code Editor or Integrated Development Environment (IDE).

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.

Set up your SharePoint Framework development environment

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:

  1. At the time of writing this article, the SPFx Framework does not support the latest TLS (long term support) version of Node.js. Installing the wrong version will cause you headaches, so read “Important” notes under the Install Node.js section before you install Node.js
  2. Click here to navigate the Node.js v10.x, use the Node.js > Downloads > Previous Releases page.

Already have Node.js installed?

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 -v

Trusting the self-signed developer certificate

Don’t forget to configure a self-signed SSL certificate which can be done by running the following command.

gulp trust-dev-cert

You will use this when testing your custom solutions from your development environment which uses HTTPS by default.

Modern Browsers

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.

Other Tools

Notepad++

I like this code editor for its simplicity and Plugins, such as: JSON Viewer and XML Tools.

Fiddler

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.

Postman

Helps you build, connect and test APIs. An example is testing the Microsoft Graph API.

VS Code Extensions

Focused on SPFx development:

  • Debugger for Chrome
  • Debugger for FireFox
  • Debugger for Microsoft Edge
  • ESLint
  • jshint
  • Markdownlint
  • React Native Tools

For Source control:

  • Git Merger
  • GitLens

General Development:

  • Azure Account
  • Azure Functions
  • Azure Repos
  • Beautify
  • C#
  • Code Spell Checker
  • Edit CSV
  • Paste JSON as Code
  • PowerShell
  • Rainbow CSV

Frameworks & Fashion

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…

Back to School

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.

My Pitfalls

If you are anything like me, I would recommend avoiding the following pitfalls:

  1. Using someone else’s code may seem like a great idea, however unless it does 90% or more of what you require you may find yourself spending more time trying to understand the code rather than writing new functionality.
  2. Getting bogged down in detail; this can easily happen if like me you enjoy detail. My strategy to avoid this is to draw wire-frames and carry out research (e.g. frameworks etc) before the build officially begins.
  3. Avoid the muddying of data and presentation code/layers; this is an area I can get bogged down in, however on a positive side the cleaner the separation the easier the code is to support and maintain.
  4. Unable to upgrade frameworks. It’s not always obvious what is going on, however if you find your projects are being scaffolded with old version npm packages then try retracing your steps and uninstalling everything including Node, before reinstalling again.

Next time

For my next post I will focus on design and frameworks.

SharePoint Modern Library Experience: command ribbon

SharePoint Modern Library: Cannot exit “Expand content” mode

After clicking on the “Expand content” command button I have found myself scratching my head:

  • Where is the “Collapse content” command button?
  • Where has the command ribbon gone?
SharePoint Modern Library Experience: “Expand content” command

Well, the command ribbon is still there, it is just hidden by the ‘top placeholder’. Or more precisely, what has loaded into the ‘top placeholder’. For example: Hub Site Navigation or a SPFx Extension.

Having done a few web searches, I’m not the only one seeing this bug and apparently Microsoft is planning to fix the bug. In the meantime, here are two workarounds:

  1. Delete your browser cache (including cookies) and reload the page
  2. Open your browser’s developer tools (e.g. press F12).
    • Select the ‘Console’ tab
    • Paste in the following code
    • Press enter
document.querySelectorAll("button[title='Collapse content']")[0].click();

And now you should see the modern command ribbon again.

Connect-PnPOnline: unwanted credential caching

UPDATE: May 2021

This problem, as described in my original post below, has been fixed for the Connnect-PnPOnline, when using the UseWebLogin param. Plus, the ClearTokenCache parameter is no longer available…

Connect-PnPOnline -Url "https://[tenant].sharepoint.com" -UseWebLogin; 

The “new” (or orignal) experience when calling the above Cmdlet will look like the following screen shot:

Login screen: That didn’t work … Here are a few ideas…

For more options, see https://pnp.github.io/powershell/cmdlets/Connect-PnPOnline.html#example-9

An alternative is to use the Interactive prameter:

Connect-PnPOnline -Url "https://[tenant].sharepoint.com" -Interactive; 

For more information, see https://pnp.github.io/powershell/cmdlets/Connect-PnPOnline.html#example-10

Original Post

Since creating a new Windows 10 profile (new PC) the Connect-PnPOnline PowerShell CmdLet has been caching my primary credentials while using the UseWebLogin parameter.

Connect-PnPOnline -Url "https://[tenant].sharepoint.com" -UseWebLogin; 

This wouldn’t be a problem if I only worked with on tenant…

After a fair amount of Google searching, mucking around with Internet Explorer and Microsoft Edge settings I found that running the Connect-PnPOnline CmdLet with the following parameters worked:

Connect-PnPOnline -Url "https://[tenant].sharepoint.com" -SPOManagementShell -ClearTokenCache;

Once signed you can revert back to using the UseWebLogin parameter, well until the next time the PowerShell console caches the wrong details… 😉

For more information see: https://docs.microsoft.com/en-us/powershell/module/sharepoint-pnp/connect-pnponline?view=sharepoint-ps