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&gt;.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

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:
  • https://github.com/SharePoint/sp-dev-fx-webparts
  • https://github.com/SharePoint/sp-dev-fx-extensions
• Resource center: https://aka.ms/sharepoint-bizapps
• Case studies: https://aka.ms/odsp-bacs