Webparts¶
Find WeParts¶
- Find out where SPFx Web Parts are being used in Modern SharePoint sites
- Locatepages where particular webpart
- Upgrading the PnP Modern Search Web Parts from v3 to v4 - UpgradeWebParts
Design¶
- SharePointWireframes
- Designing a SharePoint web part
- SharePoint Framework Design Series: Property Panes — Part I
- SharePoint Framework Design Series: Property Panes — Part II
- SharePoint Framework Design Series: Property Panes — Part III
- SharePoint Framework Design Series: Web Part Titles and Descriptions
- harePoint Framework Design Series: Layout Patterns — Part I
Localization¶
- Localize SharePoint Framework client-side web parts
- Implementing localization file checks to prevent issues in SharePoint Framework solutions
- Simplify localization in SharePoint Framework projects
- Using the SFPx library component for simplifing the localization experience
Version¶
Properties¶
- spfx-web-part-properties-dynamic-dropdown
- simplify-adding-web-parts-with-preconfigured-entries
- Web part properties in the SharePoint Framework – part 1
- Web part properties in the SharePoint Framework – part 2
- Creating a property pane for editing items in your SPFx web parts
- Understanding manifest.js file in spx project
- Understanding spfx Solution Structure
- Restrict Permissions on Editing SharePoint SPFx Property Pane Configurations
- SharePoint Framework Web Part and Property Pane Lifecycles
- Integrate PnP SPFx React controls inside the Property Pane collection data control
- an SPFX Tour sample WebPart
Edit Mode¶
- Trigger the edit page experience from your SharePoint Framework solution
- Check the page display mode from within your SharePoint Framework extensions
spPageContextInfo¶
In the F12 Developer Console, you can call
window.spModuleLoader._bundledComponents["b6917cb1-93a0-4b97-a84d-7cf49975d4ec"].PageManager._instance.pageContext.legacyPageContext
Dynamic default properties¶
Group WebPart¶
News WebPart¶
Highlighted Content Web Part (HCWP)¶
Document Library WebPart¶
Help / Tutorial WebPart¶
Samples¶
- SharePoint Framework Client-Side Web Part Samples
- https://github.com/wobba/spfx4fun/tree/master/react-pageheaderconfigurator
- https://github.com/wobba/sp-dev-fx-webparts/tree/modernscripted/samples/react-script-editor
- http://www.sharepointnutsandbolts.com/2017/03/provisioning-modern-pages-and-spfx-web-parts.html
- https://msdn.microsoft.com/en-us/pnp_articles/modern-experience-customizations-customize-pages#using-the-pnp-support-for-modern-pages-and-client-side-web-parts
- https://github.com/OlivierCC/spfx-40-fantastics
- https://www.codeproject.com/Articles/1235629/Sharepoint-Framework-SPFx-Large-List-Webpart-using
- https://github.com/SharePoint/sp-dev-fx-webparts/tree/master/samples
- https://gist.github.com/vman/1941ce6c61cebca1bfe3e490ce63185e#file-msgraphnospfx-js
- https://veenstra.me.uk/2017/07/18/office-365-spfx-samples-a-complete-overview/
- https://veenstra.me.uk/2017/08/01/office-365-sharepoint-spfx-web-parts-that-are-not-part-of-the-spfx-samples/
- https://blog.velingeorgiev.com/how-add-spfx-webpart-full-width-column
- https://blog.velingeorgiev.com/sharepoint-framework-slide-swiper
- https://techcommunity.microsoft.com/t5/SharePoint-Blog/MVP-Blog-Build-Targeted-Training-on-Office-365-Adoption-Center/ba-p/170840
- http://www.carlosmontilla.com/single-post/2017/12/05/Create-an-Enterprise-Search-Web-Part-for-Modern-Pages
- https://github.com/hugoabernier/react-calendar-feed
- https://github.com/aflyen/spfx-webpart-sitesifollow
- https://github.com/aflyen/spfx-extension-fullpagecanvas
- Office UI Fabric Persona with Skype for Business status integration
- Facebook Feed webpart with custom UI
- Web Part built using React showing documents trending in the current site
- Employee Directory with SPFX ReactJS Using SharePoint Search Rest Api – Modern Webpart
- Puzzlepart presents the modern flexible Divider web part
- Vimeo webpart
- Filtered Documents webpart
- Birthday SPFx, Web Part
- Celebrate work anniversaries on your SharePoint Intranet
- Add Google Charts into SharePoint Framework Web Part
- Display Google Fit Information | Getting Started With Google Fitness REST API
- How to let users fill out new documents based on a template in Office client directly from SharePoint | Office URI Schemes
- Google search web part
- Promoted Links Web Part
- List Pivot Table – WebPart
- React Flow Diagram Web Parts
- Fabric UI React GroupedLists inside Pivot Tabs
- React Tree Organization Web Part
- react-display-hierarchy
- react-cs-images-suggestion: a SPFX sample webpart using Azure Cognitive Services
- Share data between SPFx webpart
- Office 365 Usage Reports using Microsoft Graph API
- Group People Web Part | gitlab.lsonline.fr
- How To Create/ Generate QRcode In SPFx Web Part
- Create a simple a – z in page
- spfx-react-covid-19 - chart
- spfx-jquery-owlcarousel
- sudharsank - samples
Project WebParts¶
- Modern Project Site Example
- VerticalTimeline
- react-google-charts - timeline
- JavaScript Calendar React
Isolated WebParts¶
Filtering WebParts¶
Send Mail¶
- SPFx - Send Emails & Attachments With Graph API
- How to Send an Email Using a Graph API in SharePoint Framework (SPFx)
- How To Attach A File While Sending Email Using Graph API In SharePoint Framework (SPFx)
External Lib¶
- How to add external libraries and assets in SharePoint client-side web part
- React Templates using SPFx Library Component
- How to consume a third-party SPFx library
Config Variables¶
Create PDF¶
CAML Query¶
Terms Sets¶
- Display hierarchical Term Sets to your Web Part
- Get all child terms from term group in SharePoint Taxonomy using PnP JS
- How to filter list items by Managed Metadata Fields or Taxonomy Columns
Reusable React control¶
Share Data in WebPart¶
Dynamic Load WebPart¶
Samples/Exercises¶
- https://github.com/ktskumar/spfxguidesamples
- https://www.c-sharpcorner.com/article/amazing-guide-to-sharepoint-framework-development-with-react/
- https://github.com/agzertuche/SPFx-Exercises
Overview Modern WebParts¶
- http://aurorabits.com/modern-sharepoint-web-parts/
- http://aurorabits.com/modern-sharepoint-web-parts-2/
Available WebParts¶
- https://tracyvanderschyff.com/2018/07/23/overview-of-sharepoint-online-web-parts/
- Available web parts
Modern Pages¶
CSS Tips¶
Rest Call¶
- async rest calls with promises httpclient jquery
- Get list of frequent sites in SharePoint
- Get list of recent documents in SharePoint
CORS¶
Products¶
Package bundling¶
Web accessibility (a11y)¶
Redirecting¶
- SPFx Anchor Tags
- Navigating to other pages in SharePoint Framework from code
- sp-starter-kit: redirect
Dialog¶
Wiki Pages¶
Replacing the out of the box web part¶
Connect-PnPOnline https://tenantname-admin.sharepoint.com
$ctx = Get-PnPContext
$tenant = New-Object -TypeName "Microsoft.Online.SharePoint.TenantAdministration.Tenant" -ArgumentList $ctx
# Get existing list of blocked web parts
$ids = @($tenant.DisabledWebPartIds)
# Add the id for the out of the box Divider web part
$ids += [Guid]'2161a1c6-db61-4731-b97c-3cdb303f7cbb'
$ids = $ids | Where-Object {$_}
$tenant.DisabledWebPartIds = $ids
$tenant.Update()
Invoke-PnPQuery