Skip to content

Commit b77fa1c

Browse files
jonthenerdVesaJuvonen
authored andcommitted
Update share-data-between-web-parts.md (SharePoint#1424)
SharePoint Framework services are instantiated with each WebPart consuming the service (see SharePoint#1419). SharePoint Framework libraries are not supported outside of the workbench. Both of these features of the framework should be avoided until 1) SPFX Framework services function as singletons as they are meant to and 2) SPFx Libraries can be built, distributed, and used within SP Online.
1 parent 8fd69ec commit b77fa1c

File tree

1 file changed

+1
-104
lines changed

1 file changed

+1
-104
lines changed

docs/spfx/web-parts/guidance/share-data-between-web-parts.md

Lines changed: 1 addition & 104 deletions
Original file line numberDiff line numberDiff line change
@@ -313,109 +313,6 @@ export class DocumentsService {
313313

314314
The implementation of this service is very similar to when using cookies. One thing that you should keep in mind, however, is that browser storage can be disabled by the user, and you should always check for its availability before performing operations on it. Just as with cookies, local storage is persisted in the web browser and you should never use it to store any confidential information.
315315

316-
## Share data through a SharePoint Framework service
317-
318-
Another approach to sharing data between web parts is by building a SharePoint Framework service and using it to centrally load and manage data. SharePoint Framework services are standalone components built separately from web parts and distributed as separate Node packages. SharePoint Framework web parts can reference services and use them to perform specific operations supported by these services, such as loading data.
319-
320-
The existing service, demonstrated in previous examples, with just a few modifications, can be transformed into a SharePoint Framework service.
321-
322-
First, it needs to implement an interface that represents the operations and properties it supports:
323-
324-
```typescript
325-
export interface IDocumentsService {
326-
getRecentDocument(): Promise<IDocument>;
327-
getRecentDocuments(startFrom: number): Promise<IDocument[]>;
328-
}
329-
330-
export class DocumentsService implements IDocumentsService {
331-
// ...
332-
}
333-
```
334-
335-
<br/>
336-
337-
Next, it needs to specify a [service key](https://docs.microsoft.com/en-us/javascript/api/sp-core-library/servicekey) used to register the service with the SharePoint Framework and consume it from within web parts:
338-
339-
```typescript
340-
import { ServiceScope, ServiceKey } from '@microsoft/sp-core-library';
341-
342-
export class DocumentsService implements IDocumentsService {
343-
public static readonly serviceKey: ServiceKey<IDocumentsService> = ServiceKey.create<IDocumentsService>('contoso:DocumentsService', DocumentsService);
344-
// ...
345-
346-
constructor(serviceScope: ServiceScope) {
347-
}
348-
349-
// ...
350-
}
351-
```
352-
353-
<br/>
354-
355-
Each SharePoint Framework service must also have a constructor that accepts an instance of the [ServiceScope](https://docs.microsoft.com/en-us/javascript/api/sp-core-library/servicescope) class as a parameter.
356-
357-
SharePoint Framework services can be built using the same project build system as SharePoint Framework client-side web parts. Similar to a client-side web part, a SharePoint Framework service has a manifest. The main difference with the web part manifest is that the `componentType` property is set to `Library`:
358-
359-
```json
360-
{
361-
"$schema": "../../../node_modules/@microsoft/sp-module-interfaces/lib/manifestSchemas/jsonSchemas/clientSideComponentManifestSchema.json",
362-
363-
"id": "69b1aacd-68f2-4147-8433-8efb08eae331",
364-
"alias": "DocumentsService",
365-
"componentType": "Library",
366-
"version": "0.0.1",
367-
"manifestVersion": 2
368-
}
369-
```
370-
371-
<br/>
372-
373-
When ready, you can consume the SharePoint Framework service from a web part by referencing its package and retrieving the service using its key.
374-
375-
```typescript
376-
// ...
377-
import { DocumentsService, IDocumentsService, IDocument } from 'react-recentdocuments-service';
378-
import { ServiceScope } from '@microsoft/sp-core-library';
379-
380-
export default class RecentDocumentsWebPart extends BaseClientSideWebPart<IRecentDocumentsWebPartProps> {
381-
private documentsService: IDocumentsService;
382-
383-
protected onInit(): Promise<void> {
384-
return new Promise<void>((resolve: () => void, reject: (error: any) => void): void => {
385-
const serviceScope: ServiceScope = this.context.serviceScope.getParent();
386-
serviceScope.whenFinished((): void => {
387-
this.documentsService = serviceScope.consume(DocumentsService.serviceKey as any) as IDocumentsService;
388-
resolve();
389-
});
390-
});
391-
}
392-
393-
public render(): void {
394-
this.context.statusRenderer.displayLoadingIndicator(this.domElement, 'documents');
395-
396-
this.documentsService.getRecentDocuments(this.properties.startFrom)
397-
.then((documents: IDocument[]): void => {
398-
const element: React.ReactElement<IRecentDocumentsProps> = React.createElement(
399-
RecentDocuments,
400-
{
401-
documents: documents
402-
}
403-
);
404-
405-
this.context.statusRenderer.clearLoadingIndicator(this.domElement);
406-
ReactDom.render(element, this.domElement);
407-
});
408-
}
409-
// ...
410-
}
411-
```
412-
413-
<br/>
414-
415-
Even if there are multiple web parts on the page referencing the same service, its bundle is downloaded only once, and the SharePoint Framework creates only one instance of the service on the page. This offers you a convenient mechanism for centralizing processing and storing data on a page.
416-
417-
While working with SharePoint Framework services is more complex than the previously described approaches, it offers you the great benefits of isolating the data from other components on the page and better handling of its integrity.
418-
419316
## See also
420317

421-
- [Tutorial: Share data between web parts by using a global variable](./tutorial-share-data-between-web-parts-global-variable.md)
318+
- [Tutorial: Share data between web parts by using a global variable](./tutorial-share-data-between-web-parts-global-variable.md)

0 commit comments

Comments
 (0)