SharePoint Framework (SPFx) Introduction

A - OBJECTIVE: 

This article is to provide a summary of Microsoft guidelines about SharePoint Framework for developers at SharePoint Online (SPO).

B - PREPARATION :

           I. Installation: 

To prepare for the development you will need: 

1. A SharePoint Online tenant: developers can request for a 1-year trial at Office 365 (including SPO) at this link. 

2. SharePoint Online Management Shell: to be installed to your laptop to connect to SPO and run Powershell scripts that can automate your tasks.

3. Visual Studio Code (Free): a kind of development tool for your custom web-parts & extensions.

           II. Programming Language: 

Moving forwards, to develop custom solutions at SPO, Typescript (a superset of Javascript) is the main programming language you should get yourself familiar with.

           III. Deployment: 

Option 1 - to troubleshoot the code and work on the development at local browser (link here). 

Option 2 - to deploy the custom solutions (webparts or extensions) to SPO (link here).

Note:

* The deployment should be done via Command Prompt, for example:

gulp trust-dev-certgulp serve --nobrowsergulp bundle --shipgulp package-solution --ship

* Apart from the deployed package, you can host the associated files (e.g. css or js) to an Office 365 Content Delivery Network CDN (e.g. for webpart at this link here , or for extension at this link here), or Azure CDN (link here).

C - MAIN POINTS:

The custom solutions (webpart or extension) are designed into several blocks as follows:

1. Configuration: it's basically first level of a webpart design where you can preconfigure (link here) or validate the webpart properties (link here).

2. Properties: including the required settings for the webpart/extension properties

• *.manifest.json: to specify the default values of the properties
• interface NameWebpartProps
• protected getPropertyPaneConfiguration

3. Resources: such as language settings (example of a localised webpart), or styling

• mystring.d.ts
• en-us.js
• NameWebpart.Module.scss

4. Main Content: the function to render the webpart/extension content.

5. External Libraries:
     - A detailed guide is at this link.
     - External JS frameworks: must be installed to the solution using CMD (e.g. npm install --save jqueryui). 

In code view, we have these blocks as follows:

Let's go through some Microsoft tutorials here:

           I. Webparts:

1. Properties: 

- Webparts are allowed to be configurable (link here), and webpart icon can be updated.

- SharePoint content can be pre-loaded to the webpart properties (link here), or you can have a cascading dropdown among the properties (link here).

2. Javascript frameworks: Developing on top of other Javascript frameworks (e.g. jQuery, AngularJS, etc) is possible:

• jQuery:
• To incorporate UI to the webpart content (e.g. jQuery UI Accordion - link here).
• DataTables (link here): to build powerful data overviews of data from SPO & external APIs.
• FullCalendar (link here): to display data in a calendar view.
• AngularJS: 
• To migrate AngularJS to SPFx: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/migrate-angular-1-x-applications-to-sharepoint-framework
• To develop a custom AngularJS application at SPO: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/guidance/build-client-side-web-parts-with-angular-1-x
• JSOM: the example used here loads information about SPO lists in the current site after selecting a button.

3. Connected webparts: Client-side webparts can share data between each other (link here).

           II. Extensions: 

As of April 2018, there are 3 types of Extensions:

• Application Customizer: e.g. to extend or change the GUI of a SPO site (link here).
• Field Customizer: e.g. to customise the display of a column in a SPO list (link here), with an example of migration project here.
• ListView Command Set (aka Context Menu): e.g. to add an additional command to the list menu (link here), with an example of migration project here.

Similar to webparts, extensions have icons which can be customised (link here).


D - USEFUL RESOURCE: 

1. SPFx Microsoft https://docs.microsoft.com/en-us/sharepoint/dev/spfx/set-up-your-developer-tenant

2. SharePoint Online Powershell scripts (useful functions): http://www.sharepointfire.com/2016/01/get-sharepoint-online-web-templates-powershell/

3. Typescript Key Notes: https://blog.mariusschulz.com/series/typescript-evolution