SharePoint PnP Webcast – Building multi-view React client-side web parts with SharePoint Framework

Vesa Juvonen - Published December 12, 2016

In this PnP Webcast, we covered considerations around multi-view web parts, where the presentation layer is changed based on the status of the web part. Typically, single-page application solutions are implemented in a way that they store the view status within the URL. Since client-side web parts are however hosted in SharePoint pages, this is not possible and you'll need to use alternative approaches for maintaining the UI state in your customizations. We did release similar topic already before, but that one concentrated on the angular 1.x and this one is using React in the demonstrated code sample to show the practical differences on the different JavaScript frameworks.

Notice. When this webcast was released, SharePoint Framework was available as a Developer Preview release.  

Presentation covers following topics:

  • Considerations on UI state handling with client-side web parts
    • Typically, this is done with URL, but that's not possible in the context of SharePoint
    • Challenge is around tracking UI status and transition accordingly based on user actions
    • Detailed technical solution depends on the exact used JavaScript framework - like React or Angular
  • UI views in the example use case

Web cast demo (5:23) shows following details

  • Use case - How the sample web part built with React works in practice
  • How to use property statuses in the implementation to determine the showed view
  • Transitions between the state and how it's implemented in the solution

Webcast presenters: Waldek Mastykarz, Vesa Juvonen

Presentation used in this web cast is available from http://docs.com/OfficeDevPnP.

Video at YouTube.

Additional resources

See following resources around the SharePoint Framework. 

What is SharePoint / Office DevPatterns & Practices (PnP) web cast series?

SharePoint / Office Dev Patterns and PracticesSharePoint / Office Dev Patterns & Practices (PnP) webcast series covers different patterns, practices and topics around development with Office 365 and SharePoint. Majority of the topics are valid for the Office 365 and SharePoint on-premises. Our objective is to release new around 30 minute long web cast each Monday with few slides and a live demo on the covered topic. All web casts are published at the PnP YouTube channel with additional references on the existing materials.

PnP is community driven open source project where Microsoft and external community members are sharing their learning's around implementation practices for Office 365 and SharePoint on-premises (add-in model). Active development and contributions happen in our GitHub repositories under dev branch and each month there will be a master merge (monthly release) with more comprehensive testing and communications. Latest activities and future plans are covered in our monthly community calls which are open for anyone from the community. Download invite from http://aka.ms/SPPnP-Call. 

This is work done by the community for the community without any actual full time people. It’s been great to find both internal and external people who are willing to assist and share their learning's for the benefit of others. This way we can build on the common knowledge of us all. Currently program is facilitated by Microsoft, but already at this point we have multiple community members as part of the Core team and we are looking to extend the Core team with more community members.

If you have any questions, comments or feedback around PnP program or this blog post, please use the Microsoft Tech Community (SharePoint Developer group).

“Sharing is caring”

Vesa Juvonen, Senior Program Manager, SharePoint, Microsoft - 12th of December 2016

No Comments