Angular on a modern SharePoint page (part 3)

In my previous article, we have created an angular element, which reads data from our SharePoint list and displays it using bootstrap 5. You can get the final project code here. And now we are ready to move forward and create the SPFx web part to host our element on a modern SharePoint page.

Before we begin

We will use SharePoint 2019 as our hosting platform. During writing this post and creating the demo project I have some issues with the different versions of the different tools. I have found it very useful to use Node Version Manager (nvm), which helps you to use different versions of the node environment on the same computer. You can download it for the Windows OS here.

So, what we will need to create the SPFx web part:
  • node - version 10.24.1 
  • gulp - version 3.9.1
  • yo - version 3.1.0
  • microsoft/generator-sharepoint - version 1.12.1 (the latest version, supporting SharePoint 2019)
Let's install all that we need on our development machine.
  1. To get the proper version of the node, type in terminal

    nvm install 10.24.1
    nvm use 10.24.1

  2. To get the proper version of the Gulp, type in terminal

    npm install -g gulp@3.9.1

  3. To get the proper version of the Yeoman, type in terminal

    npm install -g yo@3.1.0

  4. To get the proper version of the SPFx project generator, type in terminal

    npm i -g @microsoft/generator-sharepoint@1.12.1
After completing these required steps we are ready to start our development.

SPFx project

First, open the terminal window and go to the same level, where we have or angular elements project sharepoint-angular. Type:

yo @microsoft/sharepoint

This will start the Yeoman generator for our new project. Answer for the following questions:

What is your solution name?
spfx-announcements

Which baseline packages do you want to target for your component(s)? 
SharePoint 2019 onwards, including SharePoint Online

Where do you want to place the files? 
Create a subfolder with solution name

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?
N

Which type of client-side component to create?
WebPart

What is your Web part name?
Announcements

What is your Web part description?
leave blank

Which framework would you like to use?
No JavaScript framework


The generator will complete its work and we will have 2 project folders in our directory. Type in terminal

code .

to open them in VS Code



Now open the created project in integrated terminal and type the following commands:

gulp trust-dev-cert
gulp serve

If everything is correct - gulp will open the SharePoint workbench in the browser



where we can use "+" to add our SPFx web part on the page

Ok, now we are good to go with our modifications.

Open the src/webparts/announcements/AnnouncementsWebPart.ts and make required modifications, so it looks like this:


import { Version } from '@microsoft/sp-core-library';
import {
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField
} from '@microsoft/sp-webpart-base';
import { escape } from '@microsoft/sp-lodash-subset';

import styles from './AnnouncementsWebPart.module.scss';
import * as strings from 'AnnouncementsWebPartStrings';

import "../../../../sharepoint-angular/dist/sharepoint-angular/main";
import "../../../../sharepoint-angular/dist/sharepoint-angular/polyfills";
import "../../../../sharepoint-angular/dist/sharepoint-angular/runtime";
require("../../../../sharepoint-angular/dist/sharepoint-angular/scripts");
require("../../../../sharepoint-angular/dist/sharepoint-angular/styles.css");

export interface IAnnouncementsWebPartProps {
description: string;
}

export default class AnnouncementsWebPart extends BaseClientSideWebPart<IAnnouncementsWebPartProps> {

public render(): void {
window['_spPageContextInfo'] = this.context.pageContext.legacyPageContext;
this.domElement.innerHTML = `<announcements-element></announcements-element>`;
}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: strings.DescriptionFieldLabel
})
]
}
]
}
]
};
}
}

Now open config/package-solution.json and change the version and zipped package:

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
"name": "spfx-announcements",
"id": "7d823249-26f8-4251-911f-c499d02a510e",
"version": "1.0.0.6",
"includeClientSideAssets": true
},
"paths": {
"zippedPackage": "solution/spfx-announcements.sppkg"
}
}

We are ready to package the solution. Type in terminal the following commands:

gulp clean
gulp bundle --production
gulp package-solution --production

If everything passed ok, we will receive this message: 

Created file: sharepoint\solution\spfx-announcements.sppkg

So, now we have the SPFx package, which we can deploy and use on our modern page.

SharePoint Application Catalog

First, we will upload our package to our Application catalog. 

NOTE: you should have administrative privileges to complete this task.


Open the application catalog and use the Upload button or just drag and drop our package file.


On the pop-up screen click on the "Deploy" button.



If everything is processed well - Deployed column should display "Yes".

SharePoint modern site

NOTE: you should create an Announcements list manually if you do not have one already.

Now let's open our modern website. Select Tools -> Site contents.

Select New -> App

Select "From Your Organization", then select our new web part and enable it



Now go to Pages -> New -> Site Page and create a new page.


Name it "Announcements" and click on "+" to add our web part.

Press on the "Publish" button to publish the page.



Now our page is ready to use and our angular element is deployed to the SharePoint modern page.


Cool! We have created an SPFx project, which uses our angular element, and added it to the SharePoint modern page. You can get the final project code here.


In the next article, we will try to use our component in SharePoint online.


Stay tuned :)




Comments

Post a Comment

Popular posts from this blog

Which GOF patterns are good for C#?

Hello, C# fans! 😊 In this article, I will answer a common question that many C# developers have: which GOF patterns are good for C#? 🤔 GOF patterns are the 23 design patterns that were described in the book “ Design Patterns: Elements of Reusable Object-Oriented Software ” by Erich Gamma, Richard Helm, Ralph Johnson, and John Vlissides. They are also known as the Gang of Four (GoF) patterns. They are divided into three categories: creational, structural, and behavioral. 📚 These patterns provide solutions to common software design problems that you may encounter in your projects. They help you write code that is more reusable, flexible, maintainable, and elegant. 😍 But not all GOF patterns are equally useful or applicable in C#. Some of them are more relevant and popular than others. Some are already supported by the language features or the .NET framework. Some of them may be outdated or replaced by newer patterns. 😮 So, which GOF patterns are good for C#?  Creational patterns...
Read more

Angular on a regular SharePoint page (part 2)

Image
In my  previous article , we have added an empty angular element to the SharePoint page.  And now we are ready to move forward and add some functionality to our elements. Before we begin      First of all, let's create in SharePoint Announcements list with the name "Announcements" and add a couple of items with some text. We will access data in our list via the SharePoint REST API, calling "/_api/web/lists/getbytitle('Announcements')/Items" endpoint. Angular project      Now, open the angular elements project which we have created in the previous article in VS Code.      For convenience let's create an interface to work with our data model. Create the "data" folder wonder the "src/app" and create a new file named Announcement.ts.      Add this code to it: export interface Announcement { ID : number ; Title : string ; Body : string ; }      We will use the service to get the data from our list. ...
Read more

Chain of Responsibility pattern in C#

Hello, C# lovers! 😍 Today I want to talk about a very useful design pattern called Chain of Responsibility. This pattern allows you to pass a request along a chain of handlers until one of them can handle it. This way, you can avoid coupling the sender of the request with the receiver, and you can dynamically compose the chain at runtime. Sounds cool, right? 😎 Let’s see an example of how to implement this pattern in C#. Suppose you have a simple ATM machine that can dispense bills of 10, 20, and 50 dollars. You want to write a program that can handle any amount of money requested by the user, using the least number of bills possible. To do this, you can create an abstract class called Handler that defines an interface for handling the requests. It also has a reference to the next handler in the chain, and a method to set it. // The 'Handler' abstract class public abstract class Handler { protected Handler successor; public void SetSuccessor ( Handler successo...
Read more