Book Image

SharePoint Development with the SharePoint Framework

By : Jussi Roine, Olli Jääskeläinen

Book Image

SharePoint Development with the SharePoint Framework

By: Jussi Roine, Olli Jääskeläinen

Overview of this book

SharePoint is one of Microsoft's best known web platforms. A loyal audience of developers, IT Pros and power users use it to build line of business solutions. The SharePoint Framework (SPFx) is a great new option for developing SharePoint solutions. Many developers are creating full-trust based solutions or add-in solutions, while also figuring out where and how SPFx fits in the big picture. This book shows you how design, build, deploy and manage SPFx based solutions for SharePoint Online and SharePoint 2016. The book starts by getting you familiar with the basic capabilities of SPFx. After that, we will walk through the tool-chain on how to best create production-ready solutions that can be easily deployed manually or fully automated throughout your target Office 365 tenants. We describe how to configure and use Visual Studio Code, the de facto development environment for SPFx-based solutions. Next, we provide guidance and a solid approach to packaging and deploying your code. We also present a straightforward approach to troubleshooting and debugging your code an environment where business applications run on the client side instead of the server side.

Preface

What this book covers

What you need for this book

Who this book is for

Reader feedback

Customer support

Downloading the example code

Free Chapter

Introducing SharePoint Online for Developers

Introducing SharePoint Online for Developers

What is SharePoint Online?

SharePoint sites and site collections

SharePoint document libraries

SharePoint lists

SharePoint web parts

Why SharePoint Online?

Office 365 licensing

Choosing an Office 365 license for development use

Getting started with SharePoint Online

Creating new site collections

A word or two on SharePoint site templates

Site definitions

SharePoint Online and site templates

Creating a new site collection

Developer sites versus team sites

SharePoint Online APIs

A quick primer on Microsoft Graph

Developing solutions for SharePoint Online

Solutions for SharePoint and SharePoint Online

SharePoint 2001-2003: direct modification of files

SharePoint 2007--Full-trust code

SharePoint 2010 and SharePoint Online: sandbox solutions

SharePoint 2013, SharePoint 2016, and SharePoint Online: add-ins

SharePoint Online--add-ins and client-side scripts

Development tooling for SharePoint Online

Developing Solutions for SharePoint

Developing Solutions for SharePoint

Introducing the SharePoint Framework

SharePoint extensibility

Philosophy of the SharePoint Framework

Types of projects the SharePoint Framework supports

Key features of the SharePoint Framework

Yeoman and Yeoman SharePoint generator

Visual Studio Code

Browser developer tools

SharePoint Workbench

Introducing Office Developer Patterns and Practices

Office Developer Patterns and Practices in practice

Contributing to Office Dev PnP

Application life cycle management with SharePoint customizations

Managing and versioning source code and assets

Visual Studio Team Services

Deploying, retracting, and managing solutions

Getting Started with the SharePoint Framework

Getting Started with the SharePoint Framework

Setting up your development environment

Step 1 - Installing Node.js

Step 2 - Node package manager

Step 3 - Installing Yeoman and Gulp

Step 4 - Installing the Yeoman SharePoint generator

Step 5 - Install Visual Studio Code

Testing your SharePoint Framework development environment

Step 1 - Creating a folder for the web part

Step 2 - Running the Yeoman SharePoint generator

Step 3 - Installing the developer certificate

Step 4 - Running the web part on a local workbench

Anatomy of the SharePoint Framework web part project

Main folders and root level configuration files

TypeScript basics in the SharePoint Framework

Key files of the SharePoint Framework web part projects

Building Your First Web Part

Building Your First Web Part

Creating a feedback list

Creating the feedback web part project

Setting web part basics

Building feedback web part user experience

Testing the user interface

Saving the feedback

Testing and troubleshooting the web part

Ideas for fine tuning the web part for production use

Using Office 365 to build better business process

Building smarter controls

Provisioning of the Feedback list and other resources

Localizing web part manifest

Localizing texts

Calendar and currency

Using Visual Studio Code and Other Editors

Using Visual Studio Code and Other Editors

Introducing Visual Studio Code

Installing Visual Studio Code

Getting to know Visual Studio Code

Changing the color theme

Working with files

Working with the SharePoint Framework in Visual Studio Code

Running commands with the Integrated Terminal

Using Visual Studio instead of Visual Studio Code

Packaging and Deploying Solutions

Packaging and Deploying Solutions

Overview of packaging and deploying

Packaging SharePoint Framework solutions

Using Gulp to package a project

Deploying SharePoint Framework solutions

Installing the app

Deploying assets

SharePoint Online CDN and Microsoft Azure CDN

Configuring a SharePoint Online CDN

Updating the project to support a SharePoint Online CDN

Deploying assets to a SharePoint Online CDN

Configuring Microsoft Azure Storage CDN

Updating the project to support Microsoft Azure CDN

Deploying assets to Microsoft Azure CDN

Working with SharePoint Content

Working with SharePoint Content

Overview of working with SharePoint content

Using mock data

Using mock data with locally hosted SharePoint Workbench

Step 1 - create data model

Step 2 - create MockSharePointClient

Step 3 - consume the mock data in the web part

Accessing real data with SPHttpClient

Working with SharePoint lists

Requesting the list of lists with SPHttpClient

Checking if the list exists and creating lists

Working with SharePoint list items

Creating an Office 365 Group and new SharePoint list

Basic operation with SharePoint list items using SPHttpClient

Step 1 - create a hello-listitems web part project

Step 2 - add a data model for list items

Step 3 - build the user interface for the web part

Step 4 - define the function that will make SPHttpClient request to read list items and test the web part

Step 5 - implementing the _runOperation function and building a skeleton for CRUD operation functions

Step 6 - implementing the create operation

Step 7 - implementing the read operation

Step 8 - implementing the update operation

Step 9 - implementing the delete operation

Working with the Web Part Property Pane

Working with the Web Part Property Pane

Web part property pane

Property panes in classic web parts

Property panes in SharePoint Framework web parts

Implementing a property pane

Fields in property panes

Implementing headers, groups, and fields

Implementing multiple pages in property panes

Handling property field events

Implementing custom properties in a property pane

Defining a custom field type

Using React and Office UI Fabric React Components

Using React and Office UI Fabric React Components

Understanding React

React is declarative

React is component-based

Introduction to Fabric React components

Fabric React support

How to obtain Fabric React for your web part

Using Fabric React components

Using React and Office UI Fabric React components in SharePoint Framework web parts

Creating the SharePoint Framework React To-do web part

Step 1 - Creating a React web part project

Step 2 - Adding Office UI Fabric React to the project

Step 3 - Examining the React project structure

Step 4 - Creating the ITodoItem interface and mockup data

Step 5 - Implementing a to-do list in React and Fabric React components

Modifying the web part file

Modifying the ReactTodo component

Creating TodoItemComponent

Working with Other JavaScript Frameworks

Working with Other JavaScript Frameworks

Using jQuery in SharePoint framework web parts

Loading jQuery from CDN

Bundling jQuery to the web part package

AngularJS and Angular

Using SharePoint patterns and practices JavaScript Core Library

Accessing user profiles

Working with lists and list items

Working with JavaScript libraries

Additional considerations

Troubleshooting and Debugging SharePoint Framework Solutions

Troubleshooting and Debugging SharePoint Framework Solutions

Troubleshooting

Ensuring an up-to-date npm

Updating the Yeoman template version

Troubleshooting the npm cache

Optimizing the SharePoint Framework packages

Loading external packages

Debugging solutions

Debugger statements using browser developer tools

Debugging with source maps

Debugging in Visual Studio Code

SharePoint APIs and Microsoft Graph

SharePoint APIs and Microsoft Graph

SharePoint APIs

SharePoint REST APIs

Accessing SharePoint Online with CSOM using a console app

Accessing SharePoint Online with REST using a console app

Accessing REST APIs with SharePoint Framework

Microsoft Graph

What is Microsoft Graph?

Accessing Microsoft Graph with Graph Explorer

Accessing Microsoft Graph with SharePoint Framework

The Future of SharePoint Customizations

The Future of SharePoint Customizations

The future of SharePoint developers

Our recommendations for developers

The SharePoint Framework support in SharePoint 2016

Is SharePoint Framework the final framework for SharePoint developers?

Customer Reviews

5 star

0

4 star

0

3 star

0

2 star

0

1 star

0

Step 2 - Node package manager

The next step is to ensure that npm is up to date. This is done by updating npm with the following command on Command Prompt or the PowerShell window:

    npm install -g npm

Node package manager is used in the SharePoint Framework development environment in the same way that NuGet is used in Visual Studio. Basically, with npm, we are fetching and using lots of different packages. Installing Node.js installed npm for us, but the version we got with Node.js might not be the latest, so in the command line, we are actually telling npm to update itself. On my computer, the original version of npm (command line: npm -v) after Node.js installation was 3.10.10, but after I updated it, it is 4.5.0.