need 3 nuget package
https://github.com/OfficeDev/TrainingContent/blob/master/Graph/01-1%20Building%20Graph%20Applications/Lab.md
Azure.microsoft.com/en-ca/free
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page
Microsoft graphs
Downgrad to npm 3.10.10
by
Npm install –g npm@3
Install yeoman
Npm install –g yo gulp
Install
yeoman sharepoint generator
Npm install –g @microsoft/g
https://www.office.com/?auth=2
code share
login for
portal.office365.com
to purchase
the sharepoint
To login into Office 365, go to
http://portal.office.com. Use admin email address and password to login.
Lab Setting
Summary of Lab activities
1-
Set up Office 365 Tenant.
2-
Install Node JS Version 6.x.
3-
Install Yeoman and gulp
4-
Install Yeoman SharePoint generator
Note:
1-
Can use VS studio or any other code editor. VS code is light weight and
recommended.
2-
You can use Mac, PC or Linux.
Set Up office 365 Tenant
You need a normal Office 365 tenant to
build and deploy client-side web parts.
If you already have an office 365 tenant,
see create your App catalog site.
If you don’t have a tenant, click here[Put
the link to our setup tenants] to sign up for one.
Create App Catalog site
If you already have an app catalog, see
create a new Developer Site collection.
1-
Go to SharePoint Admin Center. e.g.
https://[YourTenantPrefix]-admin.sharepoint.com
2-
Left Side Bar → Choose Apps → choose App Catalog → Ok → enter
•
Title: Enter App Catalog.
•
Web Site Address suffix: Enter your preferred suffix for the app catalog;
for example: apps.
•
Administrator: Enter your username and choose the resolve button to
resolve the username.
3-
SharePoint will create the app catalog site.
Create a New Developer Site Collection
1-
Go to SharePoint Admin Center. e.g.
https://[YourTenantPrefix]-admin.sharepoint.com
2-
In the SharePoint (SP) Ribbon → New → Private Site Collection
3-
In the dialog box, enter the following details:
•
Title: Enter a title for your developer site collection; for
example: Developer Site.
•
Web Site Address suffix: Enter a suffix for your developer site
collection; for example: dev.
•
Template Selection: Select Developer Site as the site collection
template.
•
Administrator: Enter your username and choose the resolve button to
resolve the username.
4-
SharePoint will create the app catalog site. After its created you can browse
to your developer site collection
Note:
You
also need a site collection and a site for your testing. You can create a new
site collection using any of the available templates. You may choose to
use developer site collection, but that does not really add additional
value, since workbench and basic testing can be performed under any site.
SharePoint
Workbench
A
developer design surface to quickly preview and test the web parts without
deploying them to SP. SP Framework developer toolchain contain a version of the
Workbench that works locally. Also hosted in your tenancy, can access it:
https://your-sharepoint-site/_layouts/workbench.aspx
Install Node JS Version 6.x
1-
If you are in Windows → use msi installer here.
2-
If you have NodeJS already installed, use "node -v" to check if you
have the latest version. It should return the current LTS version.
3-
If you are using a Mac, its recommended to use homebrew to install and manage
NodeJS.
Note:
The
SharePoint Framework build pipeline doesn't currently support the LTS version
of Node.js. Instead, download Node.js version 6.11.5. This installs npm
3.10.10. Note that if you have a v5.x version of npm, you will need to
downgrade to an older npm version by using the following command: npm
install -g npm@3.
Code Editor
You can Use any IDE or Code editor that
supports client-side development, such as:
•
Visual Studio Code
•
Atom
•
Webstorm
Install Yeoman and gulp
Enter the following Command to install
Yeoman and Gulp.
Npm
install -g yo gulp
Additional information about Yeoman.
Install Yeoman SharePoint generator
To install the SharePoint Framework Yeoman
generator globally, enter the following command:
npm
install -g @microsoft/generator-sharepoint
Handy Links
https://dev.office.com/blogs/getting-started-with-sharepoint-framework-tutorials
Build your SHarePoint
Source Url:
https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/build-a-hello-world-web-part
Video Url:
https://www.youtube.com/watch?v=YqUIX2pMUzg&list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq&index=2
1-
Create a project directoy: md helloworld-webpart
2-
Cd hello world-webpart
3-
Create a new HelloWorld web part by running the Yeoman SharePoint generator: yo
@microsoft/sharepoint
When
prompted:
•
Accept the default helloworld-webpart as your solution name and
choose Enter.
•
Choose SharePoint Online only (latest), and press Enter.
•
Select Use the current folder for where to place the files.
•
Choose N to require the extension to be installed on each site
explicitly when it's being used.
•
Choose WebPart as the client-side component type to be created.
The
next set of prompts will ask for specific information about your web part:
•
Accept the default HelloWorld as your web part name and
choose Enter.
•
Accept the default HelloWorld description as your web part
description and choose Enter.
•
Accept the default No javascript web framework as the framework you
would like to use and choose Enter.
At
this point, Yeoman will install the required dependencies and scaffold the
solution files along with the HelloWorld web part. This might take a
few minutes.
When
the scaffold is complete, you should see the following message indicating a
successful scaffold:
For
information about troubleshooting any errors, see Known issues.
Preview the web part
1-
Install the developer certificate by running the in the helloworld webpart
gulp
trust-dev-cert
2-
To build and preview
a. gulp serve
SharePoint client-side development tools
use gulp as the task runner to handle build process tasks such as:
•
Bundle and minify JavaScript and CSS files.
•
Run tools to call the bundling and minification tasks before each build.
•
Compile SASS files to CSS.
•
Compile TypeScript files to JavaScript.
Visual Studio Code provides built-in
support for gulp and other task runners. Choose Ctrl+Shift+B on
Windows or Cmd+Shift+B on Mac to debug and preview your web part.
SharePoint Workbench
Developer design surface to allow you to
quickly preview and test your web parts without deploying them in SharePoint.
1-
Click Add button to add the HelloWorld web part.
2-
3-
Congrats, you have just added your first client-side web part to a client-side
page.
4-
Click on the Pen Icon on the left side web part. You can modify the web part
properties here. We can set to have update behavior to reactive or
non-reactive.
Web Part Project Structure
1-
In the cmd prompt console type code.
2-
TypeScript:
"TypeScript
is the primary language for building SharePoint client-side web parts.
TypeScript is a typed superset of JavaScript that compiles to plain JavaScript.
SharePoint client-side development tools are built using TypeScript classes,
modules, and interfaces to help developers build robust client-side web
parts."
Web
part class
HelloWorldWebPart.ts in src\webparts\helloworld folder
defines the main entry point for the web part. The web part
class HelloWorldWebPart extends the BaseClientSideWebPart. Any
client-side web part should extend the BaseClientSideWebPart class in
order to be defined as a valid web part.
BaseClientSideWebPart implements
the minimal functionality that is required to build a web part. This class also
provides many parameters to validate and access to read-only properties such
as displayMode, web part properties, web part context, web
part instanceId, the web part domElement and much more.
Notice
that the web part class is defined to accept a property
type IHelloWorldWebPartProps.
The
property type is defined as an interface
before HelloWorldWebPart class
in HelloWorldWebPart.ts file.
tsCopy
export
interface IHelloWorldWebPartProps {
description: string;
}
This
property definition is used to define custom property types for your web part,
which is described in the property pane section later.
Web
part render method
The
DOM element where the web part should be rendered is available in
the render method. This method is used to render the web part inside
that DOM element. In the HelloWorld web part, the DOM element is set
to a DIV. The method parameters include the display mode (either Read or Edit)
and the configured web part properties if any:
tsCopy
public render(): void {
this.domElement.innerHTML = `
<div class="${ styles.helloWorld }">
<div class="${ styles.container }">
<div class="${ styles.row }">
<div class="${ styles.column }">
<span class="${
styles.title }">Welcome to SharePoint!</span>
<p class="${ styles.subTitle
}">Customize SharePoint experiences using Web Parts.</p>
<p class="${
styles.description }">${escape(this.properties.description)}</p>
<a
href="https://aka.ms/spfx" class="${ styles.button }">
<span class="${
styles.label }">Learn more</span>
</a>
</div>
</div>
</div>
</div>`;
}
This
model is flexible enough so that web parts can be built in any JavaScript
framework and loaded into the DOM element.
Configure
the Web part property pane
The
property pane is defined in the HelloWorldWebPart class.
The propertyPaneSettings property is where you need to define the
property pane.
When
the properties are defined, you can access them in your web part
using this.properties.<property-value>, as shown in
the render method:
ts
<p
class="${styles.description}">${escape(this.properties.description)}</p>
Notice
that we are performing a HTML escape on the property's value to ensure a valid
string.
Read
the Integrating property pane with a web part article to learn more
about how to work with the property pane and property pane field types.
Let's
now add few more properties - a checkbox, dropdown and a toggle - to the
property pane. We first start by importing the respective property pane fields
from the framework.
Scroll
to the top of the file and add the following to the import section
from @microsoft/sp-webpart-base:
ts
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle
The
complete import section will look like the following:
ts
import
{
BaseClientSideWebPart,
IPropertyPaneConfiguration,
PropertyPaneTextField,
PropertyPaneCheckbox,
PropertyPaneDropdown,
PropertyPaneToggle
} from '@microsoft/sp-webpart-base';
Next,
update the web part properties to include the new properties. This maps the
fields to typed objects.
Replace
the IHelloWorldWebPartProps interface with the following code.
ts
export
interface IHelloWorldWebPartProps {
description: string;
test: string;
test1: boolean;
test2: string;
test3: boolean;
}
Save
the file.
Replace
the getPropertyPaneConfiguration method with the code below which
adds the new property pane fields and maps them to their respective typed
objects.
ts
protected
getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: strings.PropertyPaneDescription
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('description', {
label: 'Description'
}),
PropertyPaneTextField('test', {
label: 'Multi-line Text Field',
multiline: true
}),
PropertyPaneCheckbox('test1', {
text: 'Checkbox'
}),
PropertyPaneDropdown('test2', {
label: 'Dropdown',
options: [
{ key: '1', text: 'One' },
{ key: '2', text: 'Two' },
{ key: '3', text: 'Three' },
{ key: '4', text: 'Four' }
]}),
PropertyPaneToggle('test3', {
label: 'Toggle',
onText: 'On',
offText: 'Off'
})
]
}
]
}
]
};
}
After
you add your properties to the web part properties, you can now access the
properties in the same way you accessed the descriptionproperty earlier:
ts
<p
class="${ styles.description
}">${escape(this.properties.test)}</p>
To
set the default value for the properties, you will need to update the web part
manifest's properties property bag:
Open HelloWorldWebPart.manifest.json and
modify the properties to:
ts
"properties":
{
"description": "HelloWorld",
"test": "Multi-line text field",
"test1": true,
"test2": "2",
"test3": true
}
The
web part property pane will now have these default values for those properties.
Web
part manifest
The HelloWorldWebPart.manifest.json file
defines the web part metadata such as version, id, display name, icon, and
description. Every web part must contain this manifest.
JSON
{
"$schema":
"https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
"id": "7d5437ee-afc2-4e66-914b-80be5ace4056",
"alias": "HelloWorldWebPart",
"componentType": "WebPart",
//
The "*" signifies that the version should be taken from the
package.json
"version": "*",
"manifestVersion": 2,
//
If true, the component can only be installed on sites where Custom Script is
allowed.
//
Components that allow authors to embed arbitrary script code should set this to
true.
//
https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
"requiresCustomScript": false,
"preconfiguredEntries":
[{
"groupId": "5c03119e-3074-46fd-976b-c60198311f70",
// Other
"group": { "default": "Other" },
"title": { "default": "HelloWorld" },
"description": { "default": "HelloWorld
description" },
"officeFabricIconFontName": "Page",
"properties": {
"description": "HelloWorld",
"test": "Multi-line text field",
"test1": true,
"test2": "2",
"test3": true
}
}]
}
Now
that we have introduced new properties, make sure that you are again hosting
the web part from the local development environment by executing following
command. This will also ensure that the above changes were correctly applied.
gulp
serve
Preview
the web part in SharePoint
SharePoint
Workbench is also hosted in SharePoint to preview and test your local web parts
in development. The key advantage is that now you are running in SharePoint
context and that you will be able to interact with SharePoint data.
Go
to the following URL:
'https://your-sharepoint-tenant.sharepoint.com/_layouts/workbench.aspx'
Note
If
you do not have the SPFx developer certificate installed, then Workbench will
notify you that it is configured not to load scripts from localhost. Stop
currently running process in the console window, execute gulp
trust-dev-cert command in your project directory console to install the
developer certificate before running gulp servecommand again.
Notice
that the SharePoint workbench now has the Office 365 Suite navigation bar.
Choose add
icon in the canvas to reveal the toolbox. The toolbox now shows the web
parts available on the site where the SharePoint workbench is hosted along with
your HelloWorldWebPart.
Add HelloWorld from
the toolbox. Now you're running your web part in a page hosted in SharePoint!
Note
Color
of the web part depends on the colors of the site. By default web parts will
inherit the core colors from the site by dynamically referencing Office UI
Fabric Core styles used in the site where web part is hosted.
Because
you are still developing and testing your web part, there is no need to package
and deploy your web part to SharePoint.
Next
steps
Congratulations
on getting your first Hello World web part running! Now that your web part is
running, you can continue building out your Hello World web part in the next
topic, Connect to SharePoint. You will use the same Hello World web part
project and add the ability to interact with SharePoint List REST APIs. Notice
that the gulp serve command is still running in your console window
(or in Visual Studio Code if you using that as editor). You can continue to let
it run while you go to the next article
For teams
We are going to work on an online tutorial
named "04 Fundamentials of Microsoft Teams" located at:
https://github.com/OfficeDev/TrainingContent/tree/master/Teams/04%20Fundamentals%20of%20Microsoft%20Teams
Click on Lab.md to start the tutorial.
There are three exercises:
1)
create a simple app using the yo teams generator
2)
create a bot using Visual Studio 2017
3)
enhance the first exercise by adding Microsoft Graph to it
You will need resources in the "Lab
Files" folder.
The final solution can be found in the
github repa at:
Npm
Node
Angular
Yo
Gulp
Grap
Addfs
