honeymoose
/
sp-dev-fx-webparts
mirror of https://github.com/pnp/sp-dev-fx-webparts.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity
sp-dev-fx-webparts/samples/react-rxjs-event-emitter/README.md

106 lines
6.5 KiB
Markdown
Raw Normal View History

Added telemetry to every README.md file
2020-04-04 02:18:47 -04:00
---
page_type: sample
products:
- office-sp
languages:
- javascript
- typescript
extensions:
contentType: tools
technologies:
- SharePoint Framework
platforms:
- react
createdDate: 9/1/2017 12:00:00 AM
---
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
# SPFx ReactiveX (RxJs) Event Emitter Sample #
## Summary
Added links to issue templates
2021-04-26 02:08:59 -04:00
This sample shows how we can use the [ReactiveX (RxJs)](http://reactivex.io/) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern). It enables a web part or component to emit event (broadcast message) and that event is received by other web parts or components that have been subscribed to receive it. Please note this is custom implementation of the [Publish–subscribe pattern](https://en.wikipedia.org/wiki/Publish–subscribe_pattern) by using the [ReactiveX (RxJs)](http://reactivex.io/) library. The SPFx will nativelly support this in future without the need of custom implementation through new SPFx api called Event Aggregator, but it is still in Alpha.
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
![SPFx ReactiveX (RxJs) Event Emitter Sample](./assets/spfx-event-emitter.gif)
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
## Compatibility
Added compatibility warning on readme and template
2023-02-10 10:22:32 -05:00
| :warning: Important |
|:---------------------------|
| Every SPFx version is only compatible with specific version(s) of Node.js. In order to be able to build this sample, please ensure that the version of Node on your workstation matches one of the versions listed in this section. This sample will not work on a different version of Node.|
|Refer to <https://aka.ms/spfx-matrix> for more information on SPFx compatibility. |
Added more contributions
2023-03-15 01:23:34 -04:00
![SPFx 1.7.0](https://img.shields.io/badge/SPFx-1.7.0-green.svg)
![Node.js v8](https://img.shields.io/badge/Node.js-v8-green.svg)
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
![Compatible with SharePoint Online](https://img.shields.io/badge/SharePoint%20Online-Compatible-green.svg)
![Does not work with SharePoint 2019](https://img.shields.io/badge/SharePoint%20Server%202019-Incompatible-red.svg "SharePoint Server 2019 requires SPFx 1.4.1 or lower")
![Does not work with SharePoint 2016 (Feature Pack 2)](https://img.shields.io/badge/SharePoint%20Server%202016%20(Feature%20Pack%202)-Incompatible-red.svg "SharePoint Server 2016 Feature Pack 2 requires SPFx 1.1")
![Local Workbench Compatible](https://img.shields.io/badge/Local%20Workbench-Compatible-green.svg)
![Hosted Workbench Compatible](https://img.shields.io/badge/Hosted%20Workbench-Compatible-green.svg)
Added 1.7.x containers
2022-02-16 01:12:30 -05:00
![Compatible with Remote Containers](https://img.shields.io/badge/Remote%20Containers-Compatible-green.svg)
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
## Applies to
Changed docs links to learn
2022-10-24 09:42:45 -04:00
* [SharePoint Framework](https://learn.microsoft.com/sharepoint/dev/spfx/sharepoint-framework-overview)
* [Office 365 developer tenant](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-developer-tenant)
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
## Prerequisites
Added more contributions
2023-03-15 01:23:34 -04:00
* Office 365 subscription with SharePoint Online.
* SharePoint Framework [development environment](https://learn.microsoft.com/sharepoint/dev/spfx/set-up-your-development-environment) already set up.
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
Changed authors to contributors
2023-02-18 22:58:44 -05:00
## Contributors
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
Added more contributions
2023-03-15 01:23:34 -04:00
* [Velin Georgiev](https://github.com/VelinGeorgiev)
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
## Version history
Version|Date|Comments
-------|----|--------
0.0.1|August 22, 2017 | Initial commit
updated to 1.4.1 (#484) tests updated, package removed
2018-04-27 11:26:48 -04:00
0.0.2|April 20, 2018 | Updated to SPFx v1.4.1
react-rxjs-event-emitter upgraded to SPFx version 1.7.0 (#721)
2018-12-19 02:19:53 -05:00
0.0.3|December 10, 2018 | Updated to SPFx v1.7.0
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
## Minimal Path to Awesome
Added more contributions
2023-03-15 01:23:34 -04:00
* Clone this repository.
* Open the command line, navigate to the web part folder and execute:
* `npm i`
* `gulp serve`
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
Added more contributions
2023-03-15 01:23:34 -04:00
> This sample can also be opened with [VS Code Remote Development](https://code.visualstudio.com/docs/remote/remote-overview). Visit <https://aka.ms/spfx-devcontainer> for further instructions.
Added 1.7.x containers
2022-02-16 01:12:30 -05:00
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
## Features
This Web Part illustrates the following concepts on top of the SharePoint Framework:
Added more contributions
2023-03-15 01:23:34 -04:00
* Using React for building SharePoint Framework client-side web parts.
* Using Office UI Fabric React styles for building user experience consistent with SharePoint and Office.
* The use the ReactiveX (RxJs) Event Emitter to broadcast messages (events).
* The use the ReactiveX (RxJs) Event Emitter to subscribe and receive broadcasted messages (events).
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
Added more contributions
2023-03-15 01:23:34 -04:00
## Making the RxJsEventEmitter external SPFx library
Two samples on communication between web parts through broadcasting events utilizing the Publish–subscribe pattern (#290) * Sample added that shows how we can use the SPFx Event Aggregator to communicate between web parts * Sample added that shows how we can use the ReactiveX (RxJs) library with the SharePoint Framework to communicate between web parts through broadcasting events utilizing the Publish–subscribe pattern * Event Emitter sample README.md updated
2017-09-05 05:05:47 -04:00
The RxJsEventEmitter library can be turned into external library so it can be used by multiple SPFx solutions.
There is a very good [blog post](https://blog.mastykarz.nl/dll-code-sharepoint-framework/) by @waldekmastykarz how this can be done.
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
## Help
We do not support samples, but this community is always willing to help, and we want to improve these samples. We use GitHub to track issues, which makes it easy for community members to volunteer their time and help resolve issues.
If you're having issues building the solution, please run [spfx doctor](https://pnp.github.io/cli-microsoft365/cmd/spfx/spfx-doctor/) from within the solution folder to diagnose incompatibility issues with your environment.
Fixed query labels without the sample tag
2021-11-21 00:14:21 -05:00
You can try looking at [issues related to this sample](https://github.com/pnp/sp-dev-fx-webparts/issues?q=label%3A%22sample%3A%20react-rxjs-event-emitter") to see if anybody else is having the same issues.
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
Fixed discussion query to remove labels
2021-11-21 00:00:02 -05:00
You can also try looking at [discussions related to this sample](https://github.com/pnp/sp-dev-fx-webparts/discussions?discussions_q=react-rxjs-event-emitter) and see what the community is saying.
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
Fixing hungry regex
2021-11-20 23:55:10 -05:00
If you encounter any issues while using this sample, [create a new issue](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Abug-suspected%2Csample%3A%20react-rxjs-event-emitter&template=bug-report.yml&sample=react-rxjs-event-emitter&authors=@VelinGeorgiev&title=react-rxjs-event-emitter%20-%20).
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
Fixing hungry regex
2021-11-20 23:55:10 -05:00
For questions regarding this sample, [create a new question](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aquestion%2Csample%3A%20react-rxjs-event-emitter&template=question.yml&sample=react-rxjs-event-emitter&authors=@VelinGeorgiev&title=react-rxjs-event-emitter%20-%20).
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
Fixing hungry regex
2021-11-20 23:55:10 -05:00
Finally, if you have an idea for improvement, [make a suggestion](https://github.com/pnp/sp-dev-fx-webparts/issues/new?assignees=&labels=Needs%3A+Triage+%3Amag%3A%2Ctype%3Aenhancement%2Csample%3A%20react-rxjs-event-emitter&template=question.yml&sample=react-rxjs-event-emitter&authors=@VelinGeorgiev&title=react-rxjs-event-emitter%20-%20).
Updated all SPFx 1.7.0 readmes
2021-11-07 00:35:20 -04:00
Moved disclaimer to bottom
2021-11-07 02:11:17 -05:00
## Disclaimer
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
Updated telemetry link
2023-03-12 21:16:15 -04:00
<img src="https://m365-visitor-stats.azurewebsites.net/sp-dev-fx-webparts/samples/react-rxjs-event-emitter" />