Do It Yourself – Website Tutorials

For this 23-minute developer-focused demo, Omar El-Anis showcases integration of PnP Controls delivering new capabilities. Tiles v2 – displays a group of responsive flex tiles that can be configured to navigate to different URLs. REACT Hero – provides a customizable Hero webpart that displays 5 images in a stand-alone carousel view. Both web parts use a stored collection from PnP PropertyFieldCollectionData control, custom field rendering control, file/icon pickers and fluid flex layout. Site theme selectable in Tiles v2. Thorough code walkthrough. This PnP Community demo is taken from the SharePoint Framework and JavaScript Special Interest Group (SIG) – Bi-weekly sync call recorded on July 29, 2021.

Demo Presenter: Omar El-Anis | @omarelanis

Supporting content:
• Omar’s blog – SP Bytes | http://www.spdeveloper.co.uk/
• Sample – Hero web part | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-hero-webpart
• Sample – Tiles V2 | https://github.com/pnp/sp-dev-fx-webparts/tree/main/samples/react-tiles-v2
• Controls – PropertyFieldCollectionData control | https://pnp.github.io/sp-dev-fx-property-controls/controls/PropertyFieldCollectionData.html

Learn more:
• Learn more about the Microsoft 365 Patterns and Practices community at: http://aka.ms/m365pnp
• Visit the Microsoft 365 Patterns and Practices community YouTube channel: https://aka.ms/m365pnp-videos

source