Category Archives: Visual Studio Code

SPFx-People-Search

SharePoint/SPFx: Returning to Webpart Development Part #4 (with React Hooks)

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.

Service Layer

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:

Microsoft Graph User Photo

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

User Presence

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

Configure the API permissions requests

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

User Interface

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.

Using React Hooks with the SPFx framework

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) => { 
    … 
};

Writing the Hooks

Having organised the components into a Project Folder Structure, I started at the top:

  1. Added references and initiated object to PeopleSearchWebPart.ts and passed them on to PeopleSearch.tsx
  2. Updated the IPeopleSearchProps.tsx interface and added each of the “Wrapper” Hooks to the return statement
  3. Focusing on the ResultWrapper, I added the “useState” and “useEffect” Hooks to handle the getFilteredUsersExpanded() data, which I then “mapped” instances of the ResultCard.tsx
  4. Before focusing on details such as User Presence and User Photo, I output the “raw” User data to the user interface from the return statement. I used this technique to confirm that the service layer was connecting to and returning the data as expected

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:

  • Enables demos and feedback loop to start earlier
  • Test the API(s) to confirm that they work as expected (or documented) and update our strategy if they don’t

Other Stuff

underscore.js vs Lodash

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.

Conclusion

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.

Siôn Lewis

28/11/2020

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.

Troubleshooting SPFx Webparts: Useful Links

Based upon the App Catolog (Catalogue) being configured with the following URL:
https://<tenant>.sharepoint.com/sites/Apps/

Apps for SharePoint
A catalog to store apps for SharePoint
https://<tenant>.sharepoint.com/sites/Apps/AppCatalog/Forms/AllItems.aspx

Client Side Assets
A library to store client side assets
https://<tenent>.sharepoint.com/sites/Apps/ClientSideAssets/AllItems.aspx

Client Side Component Manifests
A list to store client component manifests
https://<tenent>.harepoint.com/sites/Apps/Lists/ComponentManifests/AllItems.aspx

Configure Visual Studio Code with VSTS

Visual Studio CodeWhile in the process of setting up a new environment I thought I would share the steps I took to configure Visual Studio Code (VS-Code) with Visual Studio Team Services (VSTS) online.

Installation

  1. Navigate to: https://code.visualstudio.com
  2. Select the relevant version for your machine e.g. macOS or Windows x64 and click Download
  3. Double click on the installer, if it doesn’t automatically open, follow the wizard
  4. Open Visual Studio Code (VS-Code)
  5. Click on the Extensions icon (left hand side)
  6. Search for Visual Studio Team Services and click Install

Configuration

  • Click on Source Control icon (left hand side)
  • Click on Initialize Repository icon (top-left hand side)
  • Select a folder in which to store the code. For example: C:\Code\Project
  • Click Initialize Repository
  • You will have two options to authenticate: Manually provide a Key or Automatically provide a key…

Manually create a VSTS access token

If you’re not prompted for your Username and Password, follow these instructions on how to create personal access tokens to authenticate access: https://docs.microsoft.com/en-us/vsts/accounts/use-personal-access-tokens-to-authenticate

For ease of use I would recommend using the Automatic approach, however here is how to manually create a VSTS access token.

    • Sign in to either your VSTS account https://account.visualstudio.com
    • from your home page; click on your profile icon and then security details
    • Click Personal access tokens (left hand side) and Add
    • Enter the following:
      • Description: e.g. Bob’s VS-Code Win 10
      • Expires in: e.g. 90 days
      • Accounts: e.g. select the default
      • Authorized Scopes: e.g. All scopes
      • Click Create Token
      • Make a copy of token, e.g. werwqefslz2hhldesdfwfwvsdafqfq2aadsfdpalaifa5ppuyikuik
      • Back to VS-Code
      • Enter the code…

Supporting information

Angular 2: Quick Start Notes Part #2

Following my first post in this series, in which I set up Visual Studio Code, installed Git and cloned Deborah Kurta’s Angular2-GettingStarted.git. Today I’m going list the steps required to install and configure the NPM (Node Package Manager) command line utility; this will enable me to see the results of my code changes in a web browser as I make them.

Before we start you should have already installed:

Install NPM

Start by installing the Node Package Manager know as NPM:

Setting up and Angular 2 Application

These are some different options for setting up an Angular 2 Application, however as I’m following Deborah’s course I have chosen to use her start files:

Install NPM: Macintosh (OS X)

Having previously cloned a Git repository we need to run the “npm install” command to install all of the required libraries (e.g. Angular and TypeScript) into our Application:

  • Open VS Code (Visual Studio Code)
  • Open the your Angular 2 project (in my case this project is called APM)
  • Right click on a file in the root of the folder and click Open in Terminal
  • Enter the following command:
     Mac:GitHub sion$ npm install

If output ends in an error, try the command again as it will often complete successfully on the second attempt.

For more NPM commands such as npn rebuild | uninstall see: https://docs.npmjs.com/cli

Running the Angular 2 Application: Macintosh (OS X)

These steps are to be repeated every time I start up our machine and want to work with my Angular 2 project. The “npm start” commands starts the “lite-server” (file server), runs the TSC (TypeScript Compiler) in watch mode and opens a browser window loading the Angular 2 Application.

  • Open VS Code (Visual Studio Code)
  • Open your Angular 2 project (in my case this project is called APM)
  • Right click on a file in the root of the folder and click Open in Terminal
  • Enter the following command:
     Mac:GitHub sion$ npm start

Angular 2: Quick Start Notes Part #1

These are my notes, made while watching Deborah Kurta’s Angular2: Getting Started course, hosted by Pluralsight. Most, if not all, of this information can be found within Deborah’s course, however by stripping this information out I hope to jog memories…

Tools & Setup: Macintosh (OS X)

How to use Visual Studio Code with GitHub:

Download and install:
1. Visual Source Code: https://code.visualstudio.com
2. Git: https://git-scm.com/download

Clone a Git:
1. Open a Terminal window and change the directory to the location you would like to save the folders and files, for example:

Mac:~ sion$ cd Documents/GitHub/
 Mac:GitHub sion$

2. Enter the following command:

Mac:GitHub sion$ git clone https://github.com/DeborahK/Angular2-GettingStarted.git

Once complete, open the folder with Visual Studio Code.

Commit changes:

  • From Visual Studio Code select Push
  • If VS Code does not prompt for login and password, open the Terminal in the context of the code:
    a. Select Explorer
    b. Right click on a file in the root of the folder and click Open in Terminal
    c. Enter the following command:

    Mac:GitHub sion$ git push

    d. Enter the Username and Password for your GitHub account
    e. Wait for the command to complete before restarting VS Code
    f. VS Code should now be able to Push without errors
    g. Optional: install a credential helper https://help.github.com/articles/caching-your-github-password-in-git/

More Information

https://code.visualstudio.com/docs/editor/versioncontrol
https://help.github.com/articles/caching-your-github-password-in-git/

Please see second post in this series for install and configure of the NPM (Node Package Manager) command line utility