Lab 0: Prepare Your Dev Environment
- Free developer tenant from Office 365 developer program: https://developer.microsoft.com/en-us/office/dev-program
- Install : https://code.visualstudio.com/
- Install: https://nodejs.org/en/
npm install -g yo gulp
npm install -g @microsoft/generator-sharepoint
- Install: PnPPowershell: https://github.com/SharePoint/PnP-PowerShell/releases/download/3.2.1810.0/SharePointPnPPowerShellOnline.msi
- Make sure the tenant has app catalog: https://<yourtenant>-admin.sharepoint.com/_layouts/15/online/ManageAppCatalog.aspx
Lab 01: SP-Starter-Kit
- Clone or Download: https://github.com/SharePoint/sp-starter-kit
- Update user property (Create a Custom Property in the User Profile Service): https://github.com/SharePoint/sp-starter-kit/blob/master/documentation/tenant-settings.md#UPSCustomProperty
- Make yourself Term Store Admin
https://<youradmin>-admin.sharepoint.com/_layouts/15/termstoremanager.aspx
- Powershell: Make sure you are in the right folder: <yourdownload>\sp-starter-kit\provisioning\
Connect-PnPOnline https://.sharepoint.com
Apply-PnPProvisioningHierarchy -Path starterkit.pnp -Parameters @{“SiteUrlPrefix”=”pnpdemo”}
- Approve Permission: https://<yourtenant>-admin.sharepoint.com/_layouts/15/online/AdminHome.aspx#/webApiPermissionManagement
- Goto site: https://<yourtenant>.sharepoint.com/sites/pnpdemoportal
Lab 02: SPFx with Graph API
- Download: https://1drv.ms/u/s!AsqO84ArA1wey2RbgN7YTJO8HDKc
- Unzip
npm i
code .
- Modify the code as needed
gulp build
gulp bundle –ship
gulp package-solution –ship
- Upload to AppCatalog
- Add the App in a site Collection and add the WebPart on a page
Lab 03: Form, Flow, List
- Create a Form that takes feedback submission anonymously
- Create a List with the similar columns
- Create a Flow that inserts an item into the list every time someone submits a form
- What can you do more?
Lab 04: List Column Formatter
- Create a list with 5 columns as per the screenshot below
- Effort
- Number column (minimum value: 0, maximum value: 28)
- Effort click on the column header > Columns Settings > Format this column> Enter the following JSON and click save.
https://gist.github.com/AnupamRanku/fd7e10b16d6af416a91514953efaa4ab.js
- Status
- Choice Column with following options:
- Not Started
- In Progress
- Blocked
- Ready For Test
- Done
- Choice Column with following options:
https://gist.github.com/AnupamRanku/15a68bdd9735ef23f8f4264fe3a56ed7.js
- AssignedTo
- People Column
https://gist.github.com/AnupamRanku/38ecb59e1a604eaee1b37760cfb29d7b.js
- Try another column formatting: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/column-formatting#style-guidelines
Lab Optional (Attendee asked to have a hands-on PowerApp Demo):
- Click the following link for a step by step Power App demo
- Replicate the app in your own environment (ask one of the speakers for help)
https://resources.techcommunity.microsoft.com/demos/MSCustomSharePointLists/
Resources
- Getting Started with Team: https://docs.microsoft.com/en-us/microsoftteams/platform/get-started/get-started
- GIT: Team Training Content: https://github.com/OfficeDev/TrainingContent/tree/master/Teams
- Starter Kit: https://github.com/SharePoint/sp-starter-kit
- PnP Sample:
- Resource center: https://aka.ms/sharepoint-bizapps
- Case studies: https://aka.ms/odsp-bacs
Anupam Ranku 
Another configuration required – before installing Lab1. Need to make sure that the user has ADMIN permissions to the Term Store…
STATUS field – can be done with a CHOICE field – with the following values ;
==============
Blocked
Done
In Progress
Not Started
In Review
Error
The link for Update user property talks about obtaining a custom API key and deploying it using the command ‘.\deploy.ps1 -TenantUrl https://%5Byourtenant%5D.sharepoint.com -StockSymbol “GT” -StockAPIKey “your-api-key”‘.
As the deploy.ps1 script no longer exists within GitHub for the starter kit, the syntax to use looks as follows:
Apply-PnPProvisioningHierarchy -Path starterkit.pnp -Parameters @{“SiteUrlPrefix”=”pnpdemo”;”StockSymbol”=”GT”;”StockAPIKey”=””}
Thanks Alan. For the Lab, we only needed the “Create a Custom Property in the User Profile Service” section.
Another update – with the “mail icon” on the AssignTo. ClassName needs “s” at the end.
WRONG : “class”: “sp-field-quickAction”
CORRECT : “class”: “sp-field-quickActions”
Thanks Chris for proactively finding out the missing steps and typos. It definitely helped the group.