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

Download this episode

Download Video


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.


  • 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.


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

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.

Generic Episode Image



Available formats for this video:

Actual format may change based on video formats available and browser capability.

    The Discussion

    Comments closed

    Comments have been closed since this content was published more than 30 days ago, but if you'd like to continue the conversation, please create a new thread in our Forums, or Contact Us and let us know.