SharePoint Framework Development and Deployment Guide

Overview of the SharePoint Framework

SharePoint Framework(SPFx), a new development model for SharePoint which takes the SharePoint experience to the next level with the help of client-side APIs.

With the SharePoint Framework, you can use modern web technologies and tools in your preferred development environment to build productive experiences and apps that are responsive and mobile-ready from day one.

SharePoint Framework model” to build great & better applications. This model is released as open source APIs and this model in SharePoint by manually injecting a java script file (which created based on JSOM, REST API) to the SharePoint page to obtain the appropriate result.

SharePoint Framework Main Features

Ø  Runs in the context of the current user and connection in the browser. There are no iFrames.

Ø  The controls are rendered in the normal page DOM.

Ø  The controls are responsive and accessible by nature.

Ø  Enables the developer to access the lifecycle - including, in addition to render - load, serialize and deserialize, configuration changes, and more.

Ø  It's framework agnostic. You can use any browser framework that you like: React, Handlebars, Knockout, Angular, and more.

Ø  The toolchain is based on common open source client development tools like npm, TypeScript, Yeoman, webpack, and gulp.

Ø  Performance is reliable.

Ø  Solutions can be deployed in both classic web part and publishing pages and modern pages.

Alternative development models: client-side JavaScript injection, and SharePoint Add-ins. Both of these solutions have pros and cons.

Why SharePoint Framework?

For developing the client based SharePoint applications, we have used below of approaches,

Development Model	Pros	Cons
JavaScript injection	Script Editor to paste JavaScript into the web part and have that JavaScript execute when the page renders It runs in the same browser context as the page, and is in the same DOM, so it can interact with other controls on the page. It is also relatively performant, and simple to use	Can't easily provide configuration options to end users Script editor web part is not marked as "Safe For Scripting" Script editor web part will block my-sites, team sites, group sites
SharePoint Add-in model	This option for solutions are more powerful and that run in NoScript sites is the add-in/app-part model. This implementation creates an iFrame where the actual experience resides and executes. To debug the SharePoint Add-in, after changing source code every time, we have to re deploy and re install the add in to the SharePoint site	Add-in/app-part model run in an iFrame, iFrames are slower than the script editor web part, because it requires a new request to another page. The page has to go through authentication and authorization, make its own calls to get SharePoint data iFrame boundary makes it more difficult to create responsive designs, and inherit CSS and theming information.
SharePoint Framework (Next Generation Development Model)	Ø  The SharePoint Framework is the next evolution light wright development model. Ø  Instant application debugging using Workbench without SharePoint site. Ø  Instant SharePoint site debugging using workbench (which is uploaded in SharePoint site) Ø  Automated process for deploying the updates Ø  Opens a way to use different JavaScript frameworks	Typescript language to build the applications and this will be compiled in to clean

Light Weight Component	Definition	Reference
Node.JS	It is an open source and cross platform JavaScript based runtime environment built on top of Chrome’s V8 JavaScript engine for developing JavaScript based applications. Node.js runtime environment to build & run the applications	https://nodejs.org
NPMJS Packages	npmjs is the package manager for JavaScript, which contains the larger number of open source packages and these are assembled in the solution to build the application. Manage the dependencies required for the application by using npmjs packages	https://www.npmjs.com/
Gulp:	Gulp is an open source toolkit used to automate the painful and time-consuming tasks in a development workflow. For ex., minification and copying of all JavaScript files. Gulp toolkit to automate the tasks of building and running the solution.	http://gulpjs.com/
Typescript:	Typescript is an open source editor developed by Microsoft. It is a typed superset of java script language and compiles in to plain JavaScript. It also eases the C# developers to develop JavaScript based applications.	https://www.typescriptlang.org/
Visual Studio Code:	Visual Studio Code is lightweight source code editor tool, which runs on any platform. It comes with built-in support for JavaScript, Typescript and Node.js and has rich ecosystem of extinctions for other languages and runtime.	https://code.visualstudio.com
Yeoman Generator:	Yeoman generator is the web’s scaffolding tool for modern web apps. This will generate the complete solution structure for developing the application.	http://yeoman.io/
GitHub:	GitHub is the web based Git repository hosting service. It offers all of the distributed revision control and source code management functionality of Git.	https://github.com/
JavaScript Frameworks:	In modern web world, there is number of JavaScript frameworks like React, Angular JS, Knockout JS, etc…  available for building the web based application to enable rich user experience.
SharePoint JSOM or REST API:	JSOM or REST API are enables the client side development to access & manages the SharePoint sites.

 
Light Weight Vs Microsoft Equivalent

Light Weight Component	Microsoft Equivalent
Node.js	IIS Express and /or build automation
Node.js	.Net Framework
npm	Nuget
Yeoman	VS Project -> New -> Template
Gulp.js	MS Build
Typescript	C#

Extensions
Install Yeoman and gulp
Install Yeoman SharePoint generator
Compile SASS files to CSS. 
Compile TypeScript files to JavaScript.

Light Weight Development Components

SharePoint Framework (Spfx) development require some of the light weight tools like Node JS, Gulp, Typescript, Visual Studio, Yeoman Generator instead of having heavy weight software.

The below table provides a summary of the Light weight component.

SharePoint Framework development tools

SharePoint Framework requires above light weight components to build solution.

Set up development environment

We can use Visual Studio, or your own custom development environment to build SharePoint client-side web parts.

Install developer tools

Below list of tools needs to be download before installation started

NodeJS

Install NodeJS https://nodejs.org/en/

After installing node, make sure npm is up to date by running following command:

For windows :  npm install -g npm

For Linux : sudo npm install -g npm

Check Node version 

Local proxy

npm config set proxy http://webproxy.global..net:8080

npm config set https-proxy http://webproxy...net:8080

Git clone :

git clone https://github.com/SharePoint/sp-dev-fx-webparts.git

Code Editors

Install a code editor. such as:

Visual Studio Code

Atom

Webstorm 

Open Sample VS code project 

Debugger for Chrome 

Yeoman helps you kick-start new projects

npm install -g yo gulp 

npm install -g @microsoft/generator-sharepoint

Create SharePoint Framework project

Create a separate folder for the application source or open that folder

Create a new project by running the Yeoman SharePoint Generator.

Fill all above mandatory requests based on project description. At this point, Yeoman will install the required dependencies and scaffold the solution files along with the weather web part. This might take a few minutes.

We can use any code editor like explained above, I used VS Code, and that  how you will see the screenshots

To open the webpart code in VS CODE just type:

code .

Preview the web part

To preview your web part, build and run it on a local web server. The client-side toolchain uses HTTPS endpoint by default. However, since a default certificate is not configured for the local dev environment, your browser will report a certificate error. The SPFx toolchain comes with a developer 

certificate that you can install for building web parts.

Now we need to preview our webpart, for that we need to rely on gulp, its task runner which handles build process such as:

Bundle and minify JavaScript and CSS files. 

Create a trusted certificate for localhost:

gulp trust-dev-cert 

To run the application, enter “gulp serve” command

This command will execute a series of gulp tasks to create a local, Node-based HTTPS server on 'localhost:4321' and launch your default browser to preview web parts from your local dev environment.

below sample commands we can use it for build the Project

Build only

gulp build

Debug with standard browser

gulp serve

Debug without standard browser

gulp serve --nobrowser

Start debugging in the VS Code which starts the Chrome browser

Sample code for connect client-side web part to SharePoint

https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/connect-to-sharepoint

Build our webpart

Visual Studio Code provides built-in support for gulp and other task runners. You can press Ctrl+Shift+B if you are in Windows or Cmd+Shift+B if you are in Mac within Visual Studio Code to debug and preview your web part.

Once we hit this, you will be able to see on the Output window how the project is being built

Debug the code:

Visual Studio Code provides built-in support for debugging the code using different tools. In my case I instated chrome debugger tools for debugging.

For each project copy the json file to the .vscode directory in your project directory

{

    // Use IntelliSense to learn about possible Node.js debug attributes.

    // Hover to view descriptions of existing attributes.

    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387

    "version": "0.2.0",

    "configurations": [

        {

            "type": "chrome",

            "request": "launch",

            "name": "Launch localhost workbench",

            "url": "https://localhost:4321/temp/workbench.html",

            "webRoot": "${workspaceRoot}",

            "sourceMaps": true,

            "sourceMapPathOverrides":

             {

                 "webpack:///../../../../*": "${webRoot}/*"

             }

        },

        {

            "type": "chrome",

            "request": "launch",

            "name": "Launch SharePoint workbench",

            "url": "https://sharepoint.com/sites/developer/_layouts/15/workbench.aspx",

            "webRoot": "${workspaceRoot}",

            "sourceMaps": true,

            "sourceMapPathOverrides":

             {

                 "webpack:///../../../../*": "${webRoot}/*"

             }

        }

    ]

}

Publishing and deployment

Deploy client-side web part to SharePoint and see it working on a modern SharePoint server-side page.

Package the weather web part

Unlike in the local workbench, Dev SP site  in order to use client-side web parts on modern SharePoint server-side pages, you need to deploy and register the web part with SharePoint. 

Open the weatherWebPart web part project in Visual Studio Code, or your preferred IDE.

Open package-solution.json from the config folder.

The package-solution.json file defines the package metadata as shown in the following code:

Change deployment location  in write.mainfests.json file under config folder. 

In the console window, enter the following command to package your client-side solution that contains the web part:

gulp package-solution

The command will create the package in the sharepoint/solution folder:

Package contents

You can view the raw package contents in the sharepoint/debug folder.

The contents are then packaged into an .sppkg file.

The JavaScript files, CSS and other assets are not packaged and you will have to deploy them to an external location such as a CDN or SharePoint App Catalog site  

Prepare web part assets to deploy

gulp –ship

gulp package-solution –ship

Once package is ready we need to file webpart asserts under temp/deploy folder.

Copy complete deploy folder and paste in your asserts folder in SharePoint.

Create web part folder under Store Assets 

https://sharepoint.com/sites/appCatalog/StoreAssets list.

Deploy the HelloWorld package to app catalog

Go to your App Catalog. 

https://.sharepoint.com/sites/appCatalog/AppCatalog/Forms/AllItems.aspx

Upload or drag and drop the webpart.sppkg to the App Catalog.

This will deploy the client-side solution package. Since this is a full trust client-side solution, SharePoint will display a dialog and ask you to trust the client-side solution to deploy.

Install the web parts app in a site 

After adding the app you can now add your SharePoint Framework client-side web parts to pages the same way you would add any other web part in SharePoint.

In new experience page:

SharePoint classic  page 

Deploy your SharePoint client-side web part to a CDN

We can follow above steps to build solution and deployment but we need to create Azure blob storage for store the deploy files .

Refer below article for creating of Azure storage

Https://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/deploy-web-part-to-cdn#

Document References.

https://dev.office.com/sharepoint/docs/spfx/roadmap

https://blog.mastykarz.nl/sharepoint-framework-client-side-web-parts-non-reactive-property-pane/

Thanks Microsoft for new Innovations.

Office 365 Planner

Introduction

This document will walk you through the usage of Office 365 Planner

What is Office 365 Planner?

Office 365 Planner is a new application that Microsoft is adding to the suite of functionality available to tenants. In many respects, it is similar to the popular Trello application and well-suited to the management of small projects or the set of collective tasks owned by workgroups. It is not intended to be as powerful and flexible as Microsoft Project, which remains the tool of choice for project managers and those involved in the day-to-day management of large or complex projects.

What about licenses?

All users with eligible subscription plans will automatically see the Planner tile appear in the Office 365 app launcher when it is available for them to use. No specific action by Office 365 admins is needed.

Will Planner appear for on-premises customers?

Given the dependency that exists on Office 365 Groups and the Azure service, it’s very unlikely that Planner will ever be available on-premises. Microsoft Project Server is available for on-premises clients.

Who can create new plans?

Right now, anyone can create a new plan. The OWA Mailbox Policy used by Office 365 Groups to restrict the ability of users to create new groups is ignored by Office 365 Planner. This can lead to a situation where a profusion of new plans (and groups) are created without planning (no pun intended) to create the need to clean up plans and groups afterwards. Microsoft says that they are working on lifecycle policies that will make it possible to check for and remove obsolete plans (and groups), but this feature isn’t available yet.

What’s a plan?

A plan is represented by a collection of tasks that are assigned to different team members. Each task represents a discrete piece of work or other activity that has to be completed by a certain date.

What about tags?

Six color-coded tags are available to help manage tasks. It’s up to the members of the group/plan to decide how these tags are used.

Do plans support checklists?

You can assign checklist items to a task. Each checklist item is independent of the others and is either in a completed (unchecked) or done (checked) state.

What’s a bucket?

A bucket is a container for tasks within a plan. In practical terms, you can have as many tasks as you like in a bucket and as many buckets as you like within a plan. By default, a plan starts off with a bucket called “To Do”, but you can rename it to whatever you like.

Can I drag and drop tasks between buckets?

Absolutely!

Take a look on Planner that used to manage any plan

Statistic Chart of all tasks in all buckets of a plan look like

Step by step to configure Planner for our organization

The first time we browse to https://Tasks.Office.Com be look like , sign with your o365 Login

Click to create a [New plan] look like 

Creating a new plan look like

Plan email address be created automatically for our plan. Use the email for discussions with all plan members

Creating our plan

The empty plan that just created look like 

 Add a task to a bucket of a plan look like

Click on [Task Name] area to show the detail and can be set Status, Start Date, End Date and put assign for the task also

The default detail of a new created task look like

Choose a status for a Task

Choose a Start date for a Task

Click on [Assign] icon to assign a one to do the task

Can choose yourself to do the task or select another one by click on [Add someone new]

   I choose myself to do the task and close the detail task window
   Can set a label for the task

The Task with yellow label be setting look like

The task with a resource be assigned look like

Changing the title of a bucket from [To Do] to [Apply Planner to Organization] look like

 A welcome email to join a Plan look like

Click to add a new bucket

A new bucket with a new task be added look like

Statistic chart of Development Project look like

See this article for more information on how to use Planner

After installing security patch provider hosted app page shows "You are being redirected to the following url that was not registered as the app launch url"

Issue:error when clicking new subiste option in SharePoint App environment we ran into below Issue with several Provider Hosted Apps. 

Solution : 

After adding a "CustomAppRedirect" property to the Farms property bag all Apps work fine

(Get-SPFarm).properties["CustomAppRedirect"] = $true
(Get-SPFarm).Update()