In this video I explain how to use Microsoft Graph in SharePoint Development Framework (SPFx) to show Microsoft Teams information such as ID and Display name of user who is logged in.
Answer question as below – yo @microsoft/sharepoint
What is your solution name?: spfx-graphAPI
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?: Yes
Which type of client-side component to create?: WebPart
What is your Web part name?: SP Graph API
Which framework would you like to use?: No JavaScript framework
Use Microsoft Graph type declarations – npm install @microsoft/microsoft-graph-types
3. How to set up and use Microsoft Graph Toolkit 2.0
4. Demo of the Web Part and Microsoft
Summary
This uses SharePoint Development Framework and Microsoft Graph Toolkit 2.0 Language used is TypeScript This showcases how to develop an SPFx App and load Microsoft Graph Toolkit components in SPFx web part Details of the source code and how to run etc is also described in video here
Go to folder .\sharepoint\solution and install the package file spfx-mgt.sppkg in SharePoint Tenant in Apps in SharePoint, for more details have a look at https://youtu.be/UjsxLvIEZdA
Also grant permissions for API if not done already in SharePoint Tenant Admin site
1.Building a Me-experience in Microsoft Teams by Waldek
2.How to use Microsoft Teams Templates as end user and Admin – Paolo Pialorsi
3.General Availability of Microsoft Graph Teams Membership API – Brian T Jackett
4.Improved News / Page Publishing Exprience –Marc D Anderson
5.Power Automate Desktop October 2020 update
Transcript of the video:
Hello and welcome all to series “Last week in Microsoft 365”, this is the second video in this series and we have 5 topics to be highlighted this week which I liked.
1. First one is the Building a Me-Experience in Microsoft Teams which I got to know from Waldek’s blog, as it says there is no “I” but Me in Microsoft Teams. Basically it explains how you can utilize SharePoint Framework to offer a Me-Experience where users can start their day seeing their personal information. The article explains each options in very detail. So how to do it
a. Embed a modern SharePoint page: this approach is great as it does not any coding and can be done by creating modern page with different web parts and embedding it as Teams tab
b. Build a multi tab personal teams app: this requires some coding effort but not so difficult as you can steps are quite self explanatory
c. Combine multiple web parts in single tab: This is same as before but you need to use React to combine multiple React components Link: https://blog.mastykarz.nl/build-me-ex…
2. Second topic is from Paolo Pialorsi where he explains how to use recently introduced Microsoft Teams templates as an end user and Admin. He walks you through all details of the how to create a template etc from Admin portal. He also explains how you can utilize Microsoft Graph explorer Link: https://www.youtube.com/watch?v=-YQxF…
3. So the third one is General Availability of Microsoft Graph Teams Membership API which I saw from a Tweet of Brian T Jackett, basically it is an announcement made regarding Microsoft Graph Team Membership APIs that is a newly added API which adds , removes users faster. As we can see the article was originally written by Abhishek Anand. Link: https://twitter.com/BrianTJackett/sta…
4. The fourth one is also regarding a roadmap announcement which I came to know more Marc D Andersson where we will have an improved expriences in which users needs to input mandatory fields before publishing a news or page. This is planned to be released in Oct 2020 Link: https://twitter.com/sympmarc/status/1…
5. The last one today is related to Power Automate Desktop October 2020 update. Recently Microsoft has released Power Automate Desktop and lot of improvements will be released soon so here is a summary of all those. If you want to try Power Automate Desktop please refer to link pasted in description Link: https://flow.microsoft.com/en-us/blog…
Modern site templates created by Microsoft and available free to be used and get inspired for creating modern portals, intranet , team and communication hub sites.
Firstly why create the wheel again! Portal which your developers might take few months to create is easily available at free of cost. Of course it will not suffice all your needs or requirements but it can be a great starting point, I am very sure 50% of the work is already done.
What templates are available?
Templates have been categorized and Microsoft keeps on adding new templates keep an eye of the web site URL shared before and Twitter handle of Microsoft SharePoint https://twitter.com/SharePoint
As of 29th August these templates are available
Organization based: Leadership connection, The Perspective, Crisis Communications, News site, The Landing and Benefits
Department based: Global sales hub, Fly Safe Conference, Retail Operations, Human resources hub, Global marketing hub, Workshop training site
Team based: Team communication site, Product Support Collaboration team site, Mark8 Project Team
Community based: Charitable site, Branding site
Solutions based: Microsoft 365 learning pathways, Microsoft 365 freelance communications site, New Employee Onboarding Hub
Schools: School home page, Class home page and Staff home page
We will look into the new “New Employee Onboarding Hub” template in detail.
How to create “New Employee Onboarding Hub” sites using the template?
Interestingly Microsoft has made it very easy to try out any templates, you just to have visit the page of the template and go through an online form to install it.
Click on the “Add to your tenant” button to start the process but make sure that account you are using is a “Tenant Administrator”.
Look book add to your tenant
This will take you to page in which site urls needs to be decided, it will automatically pick name and URL but you can modify it, it will also validate if those URLs are valid or not.
An email is sent once the provisioning finishes so make sure email address given is correct.
This should start the process and usually will take 15-20 minutes to finish.
SharePoint look book pageLook book provisioning confirmation
It’s important that till all 4 sites are created and you get an email you don’t access the sites else it create issues, first time when I did this I did not read the message properly and it actually created the issue and I never got an email.
If all goes well you should get an email like below
Email confirmation for look book provisioning
Here is a video of the process applying the template “New Employee Onboarding Hub” in your tenant.
What do you get once installation is finished?
So once this is done, it creates 4 site collections and 1 site is set a hub site.
Pre-Onboarding site: A start up site for new hires which can be accessed before starting with the company.
OnBoarding site: Main site which provides access to information related to onboarding.
Department based Onboarding sites: As a sample Engineering and Sales departmental OnBoarding sites are created which will hold departmemt level onboarding information.
New Employee OnBoarding sites in SharePoint Admin Center
Look at these videos to get an overview of what we have.
New Employee OnBoarding Hub – Pre OnBoarding site demo
New Employee OnBoarding Hub – Corporate OnBoarding Site demo
New Employee OnBoarding Hub – Departmental site (Sales) Demo
New Employee OnBoarding Hub – Departmental site (Engineering) Demo
What can we do after installation?
As you can understand from the videos the sites created are like sample sites, the content needs to be added, replaced to make it work in your environment but it is a great inspiration for creating such sites as it has covered all the basics needed to create sites such like this. The sites have been created based on research done. You can read more here on how to customize sites but if you know how to handle a SharePoint sites it is not that difficult.
Once you have created and customized sites you can always use Site Usage features for SharePoint how it has been doing it.
How to use PowerShell to install New Employee OnBoarding Hub Template?
You will be happy to know that you can use PowerShell to install the sites which were described if you do not want to use the user interface based Provisioning.
These steps will do the same as User Interface that is create four sites as described.
PowerShell to install New Employee OnBoarding Hub Template
You can also look at this video to view complete process
How to extend this further?
Since we the source code we should be able to make changes to NEO.XML file from the path “yourpath\provisioningtemp\sp-dev-provisioning-templates-master\tenant\NEO\source”.
I did a small change that added an extra navigation on Pre-Boarding site, similar to that you should be able to add new pages, change existing pages, update with your own images or create more sites etc.
Once you have done changes to NEO.XML file use below command to create a new PNP file which will provision the site according to changes you have made.
But before you run commands make sure you change your working folder in PowerShell and go to “YOURPATH\provisioningtemp\sp-dev-provisioning-templates-master\tenant\NEO\source” else the Save.PnPTemplate command will fail with below error as it looks for the SiteAssets folder just under the working folder
Once the New PnP File is created use Apply-PnPTenantTemplate -Path .\NEONew.pnp to install the sites.
If you are interested in understanding how the User Interface provisioning service works, source code for that is also available but I am will not go into details as I will save it for another blog but you can refer this link https://github.com/SharePoint/sp-provisioning-service
This is the source code used for lookbook.micrsoft.com.
So that is all about New Employee OnBoarding Hub from Microsoft SharePoint look book.
Summary: The templates provided by Microsoft as part of look book are quite useful and also the source code is available to extend it further. It has also been announced in Microsoft Ignite 2020 that new Site Templates will be available from End of 2020 which are based on look book but has been polished and more value has been added by Product team.
Connect with me on Twitter or Linked In if you need more information.
A comprehensive solution showcasing packaging, solution deployment, provisioning and SPFx web parts to inspire and guide developers, business users and SharePoint Admins to create solutions on similar lines.
Why you should have a look at this?
This has been created by best people in this field (SharePoint, Microsoft 365) which means that code, design and relevance of the web parts are extremely good, all the web parts can be used in your tenant as is. You can learn and create your own ways to
Package solutions
Provisioning mechanism
Coding guidelines, standards
Build modern portals
How to get started?
If you want to install everything at one shot the steps are simple. I suggest to have a look first install it on development tenant and not the Production tenant, as it will upload lot of SPFx solutions and make changes so best is that you review it in a developer tenant. Based on your understanding you can plan to deploy it in Production.
Prerequisites: There are some preparation steps which you need to before you install it as follows
Account used to deploy this solution should be a tenant administrator
Works with English tenants, all solutions are in English
An App Catalog is present in SharePoint with Apps option
Account used to deploy this that is tenant admin should also be termstore admin, in general it is but please verify
if you have created a new tenant just now or set targeted relase now or just now created App Catalog then it is advised to wait for 1 day before you install this.
This will ask your User Id and Password, please use tenant administrator for this as it will be used to install the Starter Kit.
Then go to Provisioning folder in the source code you have downloaded from GitHub.
cd <<location>>
Then execute following command in PowerShell
Apply-PnPTenantTemplate -Path .\starterkit.pnp
The command might take 10-15 mins to execute and if all goes well three sites will be created.
You can watch a video to view complete process
Issues you might face
Exception while invoking endpoint: I encounter this issue while installing almost half way through the installation. Error message you might get is this Apply-PnPTenantTemplate : Exception while invoking endpoint https://login.microsoftonline.com/fffff-4121-ae51-71e06b5edc04/oauth2/token.
If you get this it follow below steps rather than the normal steps
Remove earlier version of SharePointPnpPowerShellOnline
Connect-PnPOnline -Url https://tenant-admin.sharepoint.com/ -PnPO365ManagementShell , this will open a window in browser for device login in which you should enter a code specified, make it is succcessful.
Till then you can deploy individual apps in SharePoint 2019 farm and use the apps. Following apps will work in SharePoint 2019 as well
Banner
Followed sites
Links
People directory
Site information
Tiles
Weather
World clock
To deploy the apps you can copy the package from source code you downloaded before from this location “sp-starter-kit-master\source\<<solution-name>>\sharepoint\solution” and upload it to App Catalog of your farm.
There is no need to build the solution and can be directly deployed but in case you face issues you can build it using
gulp bundle --ship
gulp package-solution --ship
SP Starter Kit v2 SP 2019
Once deployed you can add it on a page, in this case I am showing Tiles app.
Tiles App SharePoint 2019Tiles App in SharePoint 2019
I also did a demo of SharePoint Starter Kit V2 on PnP Community SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on September 10, 2020.
As of 22nd feb 2017 GA version of SPFX SharePoint Framework has been released. SharePoint Framework SPFX that is client side web part is a new framework introduced to provide one more option for client-side development other than Script Editor based and Add-in model.
The new framework is based on both of the existing solutions but in most of the scenarios SPFX is a preferred way to develop, two major plus points
Responsive controls
Can be deployed on modern pages and classic web part pages as well
Building your environment for doing development using SPFX is very welll documented on this article but while doing the same for me I got few issues so I am just going to highlight few points which I thought was confusing or should be highlighted
There are four major things you need to do to set up your development environment
Set up your Office 365 tenant: You need at least Developer tenant which you can get from Office Developer Program, set an App catalog site and create a developer site. More details here . Once the site is ready please access SharePoint Workbench here https://replace-with-your-sharepoint-site/_layouts/workbench.aspx
SharePoint Workbench
Install Node JS : You need to install Node JS, make sure you do install LTS version from here https://nodejs.org/en/ . Unfortunately I installed it from here first time and it did not workout good https://nodejs.org/en/download/ . Refer more details here
Install Yeoman and gulp : Once Node JS installation is done you should run below commands to install Yeoman and gulp, make sure you run these commands in Windows PowerShell, I have assumed that you are using a Windows 10 machine. Also I tried using CMD prompt but it did not work out good. Also make sure you create a separated folder under C Drive and then perform all the steps
npm install -g npm
npm install -g yo gulp
npm install -g @microsoft/generator-sharepoint
Install Visual studio code : Install Visual Studio code from here
If all steps are successful then your development environment is set up and you are ready to develop your first client side web part.
In case you need more help on this or other SharePoint issues please contact us via our Contact Us page or via our Facebook page or via Twitter
Kislay Sinha 