Office Dev PnP Web Cast – Introducing Widget Wrangler for SharePoint development
[Cross posting from dev.office.com blogs]
In this PnP Web Cast we concentrated on one great contributions from the community called Widget Wrangler. Widget Wrangler is a open source JavaScript library which will help to implement embedded JavaScript functionalities in both SharePoint Online and in SharePoint on-premises. Widget Wrangler has been developed by Julie Turner and Bob German from BlueMetal.
Conceptually Widget Wrangler implementation is based on similar thinking as PnP App Script Part implementation, which was released few years back as part of the PnP patterns (or at the time it was call App Model Samples). Advantages of this model is that you do not have deal with iFrame implementations and functionalities can be fully responsive, where needed. Also implementation of the capabilities is much simpler when your JavaScript is directly embedded to the page rendering logic without additional complexity.
In demo section Bob is showing following topics
- How to use Widget Wrangler with plan JavaScript?
- How to use Widget Wrangler with jQuery?
- How to use Widget Wrangler with KnockoutJS?
- How to use Widget Wrangler with Angular?
- How does Widget Wrangler handle multiple instances of same widget in the SharePoint Pages?
Web cast presenters: Bob German, Julie Turner and Vesa Juvonen
Bob and Julie work for the BlueMetal company and they both have been active on sharing their learning's for the community around SharePoint development and Office 365 practices.
Presentation used in this web cast is available from https://doc.com/OfficeDevPnP.
Video at Channel 9.
Addition resources
See following PnP videos for covering JavaScript embedding pattern
- PnP Web Cast - JavaScript development patterns with SharePoint
- PnP Web Cast - JavaScript performance considerations
- PnP Web Cast - SharePoint Client Side Development and Cross-Origin Resource Sharing (CORS)
Here's different demonstrations using the Widget Wrangler in practice. These could be just as well embedded to the SharePoint. These demos are running outside of the SharePoint context to provide simplicity for them.
- Plain JavaScript
- jQuery
- KnockoutJS Widget
- Angular Widgets - #1, #2, #3
See following resources for additional information around Widget Wrangler and demonstrated topics.
- Widget Wrangler on GitHub
- Widget Wrangler in Office Dev PnP
- Blog article with full write-up and links to code samples
- Microsurvey Sample on Office Dev PnP
- Collab365 talk on Angular in SharePoint - more details on the Microsurvey sample
- New Guidance from Microsoft for Packaging and Deploying SharePoint Solutions
What is Office 365 Developer Patterns and Practices (PnP) web cast series?![]()
Office 365 Developer Patterns and Practices (PnP) web cast series cover 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-45 minute long web cast each Monday with few slides and live demo on the covered topic. All web casts are published at the PnP Channel 9 video blog 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 our GitHub project 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 https://aka.ms/OfficeDevPnPCall.
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 PnP Yammer group at https://aka.ms/OfficeDevPnPYammer.
“Sharing is caring”
Vesa Juvonen, Senior Program Manager, Office 365, Microsoft