Skip to content

Commit f0084c4

Browse files
VesaJuvonenVesaJuvonen
committed
Updating readme of the repo for GA
1 parent 0f06490 commit f0084c4

File tree

2 files changed

+191
-80
lines changed

2 files changed

+191
-80
lines changed

‎README.md

Lines changed: 3 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22

33
The SharePoint Framework (SPFx) is a page and part model that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling development.
44

5-
The SharePoint Framework is still in initial Developer Preview, and it's still rough around the edges. As we work to improve the SharePoint Framework, we'd love your feedback! If you find issues or have new ideas and suggestions for SharePoint Framework, make sure you submit them [here](https://github.com/SharePoint/sp-dev-docs/issues). We’ll also be monitoring [#spfx](http://sharepoint.stackexchange.com/tags/spfx/), [#spfx-webparts](http://sharepoint.stackexchange.com/tags/spfx-webparts/), and [#spfx-tooling](http://sharepoint.stackexchange.com/tags/spfx-tooling/) at [SharePoint StackExchange](http://sharepoint.stackexchange.com/) as well.
5+
The SharePoint Framework now generally available. Please check more release details either from the [GA release notes](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-GA) or from the [Office Blog post](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/) around the GA release. If you find issues or have new ideas and suggestions for SharePoint Framework, make sure you submit them [here](https://github.com/SharePoint/sp-dev-docs/issues). We’ll also be monitoring [#spfx](http://sharepoint.stackexchange.com/tags/spfx/), [#spfx-webparts](http://sharepoint.stackexchange.com/tags/spfx-webparts/), and [#spfx-tooling](http://sharepoint.stackexchange.com/tags/spfx-tooling/) at [SharePoint StackExchange](http://sharepoint.stackexchange.com/) as well.
66

77
## Developer Preview Releases
88

@@ -68,11 +68,9 @@ Provide Feedback:
6868
* [SharePoint Developer UserVoice](https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform)
6969

7070
## Deployment Status
71+
The SharePoint Framework is now generally available at Office 365.
7172

72-
Note: SharePoint Framework web parts are not supported for production use.
73-
74-
The SharePoint Framework is currently available for use in Classic Pages within Office 365 Developer and First Release Tenancies as a developer review release.
75-
Of course, you can also get started with our SharePoint Workbench to create and test your web parts locally, on your machine.
73+
- [SharePoint Framework reaches general availability—build and deploy engaging web parts today](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
7674

7775
## Have Fun
7876

‎docs/spfx/web-parts/get-started/use-fabric-react-components.md

Lines changed: 188 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,77 +1,190 @@
1-
# Welcome to the SharePoint Framework Developer Preview!
1+
# Use Office UI Fabric React components in your SharePoint client-side web part
2+
3+
This article describes how to build a simple web part that uses the DocumentCard component of [Office UI Fabric](https://github.com/OfficeDev/office-ui-fabric-react). Office UI Fabric React is the front-end framework for building experiences for Office and Office 365. Fabric React includes a robust collection of responsive, mobile-first components that make it easy for you to create web experiences using the Office Design Language.
4+
5+
The following image shows a DocumentCard component created with Office UI Fabric React.
26

3-
The SharePoint Framework (SPFx) is a page and part model that enables client-side development for building SharePoint experiences. It facilitates easy integration with the SharePoint data, and provides support for open source tooling development.
7+
![Image of a DocumentCard Fabric component in a SharePoint workbench](../../../../images/fabric-components-doc-card-view-ex.png)
8+
9+
You can also follow these steps by watching the video on the [SharePoint PnP YouTube Channel](https://www.youtube.com/watch?v=1N6kNvLxyg4&list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq).
10+
11+
<a href="https://www.youtube.com/watch?v=1N6kNvLxyg4&list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq">
12+
<img src="../../../../images/spfx-youtube-tutorial6.png" alt="Screenshot of the YouTube video player for this tutorial" />
13+
</a>
14+
15+
16+
## Create a new web part project
17+
18+
Create a new project directory in your favorite ___location:
19+
20+
```
21+
md documentcardexample-webpart
22+
```
23+
24+
Got to the project directory:
25+
26+
```
27+
cd documentcardexample-webpart
28+
```
29+
30+
Create a new web part by running the Yeoman SharePoint generator:
31+
32+
```
33+
yo @microsoft/sharepoint
34+
```
35+
36+
When prompted:
37+
38+
* Accept the default **documentcardexample-webpart** as your solution name and choose **Enter**.
39+
* Select **Use the current folder** as the ___location for the files.
40+
* Select **React** as the framework and choose **Enter**.
41+
* Use **DocumentCardExample** for your web part name and choose **Enter**.
42+
* Accept the default **DocumentCardExample description** and choose **Enter**.
43+
44+
At this point, Yeoman will install the required dependencies and scaffold the solution files. This might take a few minutes. Yeoman will scaffold the project to include your DocumentCardExample web part as well.
45+
46+
When the scaffold is complete, in the console, type the following to open the web part project in Visual Studio Code:
47+
48+
```
49+
code .
50+
```
51+
52+
You now have a web part project with the React framework.
53+
54+
Open **DocumentCardExampleWebPart.ts** from the **src\webparts\documentCardExample** folder.
55+
56+
As you can see, the `render` method creates a react element and renders it in the web part DOM.
57+
58+
```ts
59+
public render(): void {
60+
const element: React.ReactElement<IDocumentCardExampleProps > = React.createElement(
61+
DocumentCardExample,
62+
{
63+
description: this.properties.description
64+
}
65+
);
66+
```
67+
68+
Open **DocumentCardExample.tsx** from the **src\webparts\documentCardExample\components** folder.
69+
70+
This is the main react component that Yeoman added to your project that renders in the web part DOM.
71+
72+
```ts
73+
export default class DocumentCardExample extends React.Component<IDocumentCardExampleProps, void> {
74+
public render(): React.ReactElement<IDocumentCardExampleProps> {
75+
return (
76+
<div className={styles.helloWorld}>
77+
<div className={styles.container}>
78+
<div className={`ms-Grid-row ms-bgColor-themeDark ms-fontColor-white ${styles.row}`}>
79+
<div className="ms-Grid-col ms-u-lg10 ms-u-xl8 ms-u-xlPush2 ms-u-lgPush1">
80+
<span className="ms-font-xl ms-fontColor-white">Welcome to SharePoint!</span>
81+
<p className="ms-font-l ms-fontColor-white">Customize SharePoint experiences using Web Parts.</p>
82+
<p className="ms-font-l ms-fontColor-white">{escape(this.props.description)}</p>
83+
<a href="https://aka.ms/spfx" className={styles.button}>
84+
<span className={styles.label}>Learn more</span>
85+
</a>
86+
</div>
87+
</div>
88+
</div>
89+
</div>
90+
);
91+
}
92+
}
93+
```
94+
95+
## Add an Office UI Fabric component
96+
97+
The *new modern experiences* in SharePoint use Office UI Fabric and Office UI Fabric React as the default front-end framework for building the new experiences. As a result, SharePoint Framework ships with a default version of Office UI Fabric and Fabric React which matches the version available in SharePoint. This ensures the web part you are building uses the right version of the Fabric styles and components when deployed to SharePoint.
98+
99+
Since we chose React as our framework when creating the solution, the generator installed the right version of Office UI Fabric React as well. You can directly import the Fabric components in your react components without any additional work.
100+
101+
>**Note:** With the initial release of the SharePoint Framework, it is recommended to use the Office UI Fabric and Fabric React that ships with the generator. It is not recommended to update the Office UI Fabric and Fabric React packages independently as it might conflict with the already available version in SharePoint and as a result your web part may fail to function as expected. There will be updates on this area after GA.
102+
103+
Open **DocumentCardExample.tsx** from the **src\webparts\documentCardExample\components** folder.
104+
105+
Add the following `import` statement to to the top of the file to import fabric react components that we want to use.
106+
107+
```ts
108+
import {
109+
DocumentCard,
110+
DocumentCardPreview,
111+
DocumentCardTitle,
112+
DocumentCardActivity,
113+
IDocumentCardPreviewProps
114+
} from 'office-ui-fabric-react/lib/DocumentCard';
115+
```
116+
117+
Delete the current `render` method and add the following updated `render` method:
118+
119+
```ts
120+
public render(): JSX.Element {
121+
const previewProps: IDocumentCardPreviewProps = {
122+
previewImages: [
123+
{
124+
previewImageSrc: String(require('document-preview.png')),
125+
iconSrc: String(require('icon-ppt.png')),
126+
width: 318,
127+
height: 196,
128+
accentColor: '#ce4b1f'
129+
}
130+
],
131+
};
132+
133+
return (
134+
<DocumentCard onClickHref='http://bing.com'>
135+
<DocumentCardPreview { ...previewProps } />
136+
<DocumentCardTitle title='Revenue stream proposal fiscal year 2016 version02.pptx' />
137+
<DocumentCardActivity
138+
activity='Created Feb 23, 2016'
139+
people={
140+
[
141+
{ name: 'Kat Larrson', profileImageSrc: String(require('avatar-kat.png')) }
142+
]
143+
}
144+
/>
145+
</DocumentCard>
146+
);
147+
}
148+
```
149+
Save the file.
150+
151+
In this code, the DocumentCard component includes some extra sections:
152+
153+
* DocumentCardPreview
154+
* DocumentCardTitle
155+
* DocumentCardActivity
156+
157+
The `previewProps` property includes some properties of the DocumentCardPreview.
158+
159+
Notice the use of relative path with a `require` statement to load images. Currently, you need to use the webpack public path plugin and input the file's relative path from your source file or folder to the `lib` folder. This should be the same as your current working source ___location.
160+
161+
Open **DocumentCardExampleWebPart.ts** from the **src\webparts\documentCardExample** folder.
162+
163+
Add the following code at the top of the file to require the webpack public path plugin.
164+
165+
```ts
166+
require('set-webpack-public-path!');
167+
```
168+
169+
Save the file.
170+
171+
## Copy the image assets
172+
173+
Copy the following images to your **src\webparts\documentCardExample** folder:
174+
175+
* [avatar-kat.png](https://github.com/SharePoint/sp-dev-docs/blob/master/assets/avatar-kat.png)
176+
* [icon-ppt.png](https://github.com/SharePoint/sp-dev-docs/tree/master/assets/icon-ppt.png)
177+
* [document-preview.png](https://github.com/SharePoint/sp-dev-docs/tree/master/assets/document-preview.png)
178+
179+
## Preview the web part in workbench
180+
181+
In the console, type the following to preview your web part in workbench:
182+
183+
```
184+
gulp serve
185+
```
186+
187+
In the toolbox, select your `DocumentCardExample` web part to add:
188+
189+
![Image of a DocumentCard Fabric component in a SharePoint workbench](../../../../images/fabric-components-doc-card-view-ex.png)
4190

5-
The SharePoint Framework now generally available. Please check more release details either from the [GA release notes](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-GA) or from the [Office Blog post](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/) around the GA release. If you find issues or have new ideas and suggestions for SharePoint Framework, make sure you submit them [here](https://github.com/SharePoint/sp-dev-docs/issues). We’ll also be monitoring [#spfx](http://sharepoint.stackexchange.com/tags/spfx/), [#spfx-webparts](http://sharepoint.stackexchange.com/tags/spfx-webparts/), and [#spfx-tooling](http://sharepoint.stackexchange.com/tags/spfx-tooling/) at [SharePoint StackExchange](http://sharepoint.stackexchange.com/) as well.
6-
7-
## Developer Preview Releases
8-
9-
* **Feb 22, 2017**
10-
* **GA is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-GA)
11-
12-
* **Jan 9, 2017**
13-
* **RC0 is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-RC0)
14-
15-
* **Nov 22, 2016**
16-
* **Drop 6 is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-Drop-6)
17-
18-
* **Oct 17, 2016**
19-
* **Drop 5 is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-Drop-5)
20-
21-
* **Sept 21, 2016**
22-
* **Drop 4 is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-Drop-4-and-MDL2)
23-
24-
* **Sep 14, 2016**
25-
* **Drop 3 is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-Drop-3)
26-
27-
* **Sep 1, 2016**
28-
* **Drop 2 is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Release-Notes-Drop-2)
29-
30-
* **Aug 17, 2016**
31-
* **Drop 1 is available**. [See the release notes here](https://github.com/SharePoint/sp-dev-docs/wiki/Drop-1)
32-
33-
## Get Started
34-
35-
* [Setup your Office 365 Developer Tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
36-
* [Setup your Machine](http://dev.office.com/sharepoint/docs/spfx/set-up-your-development-environment)
37-
* [Go build your first web part](http://dev.office.com/sharepoint/docs/spfx/web-parts/get-started/build-a-hello-world-web-part)
38-
39-
## Reference
40-
* [sp-component-base](reference/spfx/sp-component-base-module.md)
41-
* [sp-core-library](reference/spfx/sp-core-library-module.md)
42-
* [sp-http](reference/spfx/sp-http-module.md)
43-
* [sp-loader](reference/spfx/sp-loader-module.md)
44-
* [sp-odata-types](reference/spfx/sp-odata-types-module.md)
45-
* [sp-page-context](reference/spfx/sp-page-context-module.md)
46-
* [sp-webpart-base](reference/spfx/sp-webpart-base-module.md)
47-
48-
49-
50-
## Learn More
51-
52-
* [Background and Philosophy](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
53-
* [Design Great Web Parts](http://dev.office.com/sharepoint/docs/spfx/web-parts/basics/design-considerations-for-web-parts)
54-
* [API Docs](https://sharepoint.github.io/)
55-
56-
## Updates & Feedback
57-
58-
To keep track of improvements to the Office 365 Framework, please take a look at:
59-
60-
* [@SharePoint](https://twitter.com/sharepoint) and [@OfficeDev](https://twitter.com/officedev) on Twitter
61-
* [Office Developer Blog](http://dev.office.com/blogs)
62-
63-
Provide Feedback:
64-
65-
* If you find issues or have new ideas and suggestions for SharePoint Framework, make sure you submit them [here](https://github.com/SharePoint/sp-dev-docs/issues).
66-
* [SharePoint StackExchange](http://sharepoint.stackexchange.com/) (please use [#spfx](http://sharepoint.stackexchange.com/tags/spfx/), [#spfx-webparts](http://sharepoint.stackexchange.com/tags/spfx-webparts/), and [#spfx-tooling](http://sharepoint.stackexchange.com/tags/spfx-tooling/) tags)
67-
* [SharePoint Developer](https://techcommunity.microsoft.com/t5/SharePoint-Developer/bd-p/SharePointDev) group at Microsoft Tech Community
68-
* [SharePoint Developer UserVoice](https://sharepoint.uservoice.com/forums/329220-sharepoint-dev-platform)
69-
70-
## Deployment Status
71-
The SharePoint Framework is now generally available at Office 365.
72-
73-
- [SharePoint Framework reaches general availability—build and deploy engaging web parts today](https://blogs.office.com/2017/02/23/sharepoint-framework-reaches-general-availability-build-and-deploy-engaging-web-parts-today/)
74-
75-
## Have Fun
76-
77-
We look forward to seeing what you build! Please tweet us at @OfficeDev or @SharePoint with the #SPFx tag!

0 commit comments

Comments
 (0)