Presentation to Triangle SPUG

Thanks again to George and Mike for the opportunity to present at the Tri-SPUG meetup last Thursday, the 15th. Again all apologies to the attendees that the projector was not working and hopefully there was still some benefit garnered from being there. As promised I am providing the slides here. If you want to see the code you can clone from the github site here: Assuming you have git installed, if you type git clone it will install in a subfolder named TriSPUGSPFx, or git clone your-sub-folder, and it will install in that subfolder.

One thing I think I did not explain very well at the presentation was that typing gulp serve will open a tab in your default browser to the url https://localhost:4321/temp/workbench.html. If you then want to see online in in test mode, open the url https://your-Office365-tenant/sites/MyDevSite/_layouts/15/workbench.aspx, assuming /sites/MyDevSite is the relative url to your development site as explained in the ‘Setting up O365 SharePoint Tenant’ section of the slides. Once you have deployed the sppkg to your app catalog, then you can add the webpart to a modern page on your site.

The code is organized into the following branches:

  1. Make_SPFx – This is the state of the code immediately after running the yo generator, version 1.1.1
  2. Add_Properties – This is after adding the new properties, but without any implementation of them
  3. Display_Lists – This is after implementing the code to display the lists, including the option to include, or exclude, the hidden lists.
  4. Display_ListsV2 – This is after adding some other properties, including paging and making non reactive, for instructional purposes and implementing more properties.

One note about the code is that I have node_modules set to ignore in my global .gitignore. Therefore, before running the code it will be necessary to run the command npm install from the project’s root folder to download the dependencies.

As always any comments, suggestions or questions are most welcome.

No Comments

Add a Comment