PnP Add-In Transformation Training module 4: Building UX components with add-in model

This is module 4 of the "Transforming SharePoint customizations to add-in model" training.

Introduction on how to build typical user interface functionalities using add-in model capabilities. We cover different kind of client side rendering mechanisms to provide similar end user experiences as with classic server side code.

Agenda

• Introduction to building UX components using add-in model
• UX customizations with add-in model
• Client Side Rendering
• Practices for client side techniques

Key recommendations

• It's not just about add-in parts
• Remote provisioning and configuration
• Do not modify suite bar (top navigation)
• Careful JavaScript embedding is an option

Lab - Modification of SharePoint User Experience In this lab you will learn how to modify SharePoint User Experience using SharePoint add-ins. In first lap you will be adding second level of navigation to out of the box master page without actual master page modifications by using JavaScript Embedding model. Second lab shows alternative for add-in part based experience on providing still end users capability to add new parts on the pages with responsive support.

• Lab manual

Demos

This module contains following demos, which are available as separate videos and NOT embedded to this module video.

• Embedding second level navigation
• Web part templates and add-in script part
• Add-in model dialogs
• Client side rendering

Hands on lab material and presentation for this module is available for use from Office Developer Training GitHub repository.

Feel free to use this training material anyway you like for online web casts, in-class deliveries, other trainings or for your personal self study. 

If you have any feedback or comments related on this video, please use the Office 365 Developer Patterns and Practices Yammer group to start discussion with the PnP community.