Sergii’s Tech Adventures

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. To get the proper version of the node,...

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