Pass Data Between Web Parts (Connected Web Parts) Using SPFx

Overview

This solution contains two web parts where we are passing the data between them by changing the data into one web part that will reflect the change into the other web part. They are the connected web parts.

Implementation

Create the directory with the name ‘Connected Web parts’.
Create the solution by running Yeoxman generator using the below command.
The generator will ask the below information about the new SPFx solution.
Yeoman generator will scaffold the process to add the node packages to the existing SPFx solution. Once it is added to the solution, it will be shown with the below message.
Create another web part, which will receive the data from the Source connected web part.
To create the new web part into the existing solution, run the below command.
It will ask which type of component to create. We will use the ‘WebPart’ component in our case as shown below with providing the below information about the new web part.
Once the web part is created, open the solution code in the code editor (like Visual Studio Code) using the below command.

NPM Packages

Run the below command to add the packages into the solution.

npm install rx-lite --save
npm install @types/rx-lite --save

Update the Solution

Create the separate state files (‘IDataSenderWpState.ts’ and ‘IDataReceiverWpState.ts’) for both the web parts.

Create the new folder ‘RxJsEventEmitter’ inside the ‘webparts’ folder and create the ‘IEventData.ts’ and ‘RxJsEventEmitter.ts’ in the ‘RxJsEventEmitter’ folder.

The code structure for the current solution will be as below,

Pass Data Between Web Parts (Connected Web Parts) Using SPFx

Open the ‘IDataSenderWpState.ts’ and define the state object as shown below.

export interface IDataSenderWpState {
userName: string;
password:string;
}

Open the ‘IDataReceiverWpState.ts’ and define the state object as shown below.

export interface IDataReceiverWpState {
userName: string;
password:string;
}

Open ‘IEventData.ts’ and copy the below code.

export interface IEventData {
sharedUserName: string;
sharedUserPassword:string;
}
export default IEventData;

Open ‘RxJsEventEmitter.ts’ and copy the below code.

import { Subject } from "rx-lite";
import IEventData from "./IEventData";
export class RxJsEventEmitter {
public subjects: Object;
private constructor() {
this.subjects = {};
}
public static getInstance(): RxJsEventEmitter
{
if (!window["RxJsEventEmitter"]) {
window["RxJsEventEmitter"] = new RxJsEventEmitter();
}
return window["RxJsEventEmitter"];
}
public emit(name: string, data: IEventData): void
{
if (!this.subjects[name]) {
this.subjects[name] = new Subject();
}
this.subjects[name].onNext(data);
}
public on(name: string, handler: any): void
{
if (!this.subjects[name]) {
this.subjects[name] = new Subject();
}
this.subjects[name].subscribe(handler);
}
}

Open the 'DataSenderWp.tsx' file and add the below imports.

import { IDataSenderWpState } from './IDataSenderWpState';
import IEventData from '../../RxJsEventEmitter/IEventData';
import { RxJsEventEmitter } from '../../RxJsEventEmitter/RxJsEventEmitter';

Update the render method and add the other functions. The code for the 'DataSenderWp.tsx' is as below. On change of the UserName or password text field value update, it will pass the data into the other web part using the 'SendData' method. Also, define the object of 'RxJsEventEmitter' inside the class.

import * as React from 'react';
import styles from './DataSenderWp.module.scss';
import { IDataSenderWpProps } from './IDataSenderWpProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { IDataSenderWpState } from './IDataSenderWpState';
import IEventData from '../../RxJsEventEmitter/IEventData';
import { RxJsEventEmitter } from '../../RxJsEventEmitter/RxJsEventEmitter';
export default class DataSenderWp extends React.Component<IDataSenderWpProps, IDataSenderWpState> {
private readonly eventEmitter: RxJsEventEmitter = RxJsEventEmitter.getInstance();
public constructor(props:IDataSenderWpProps, state:IDataSenderWpState){
super(props);
this.state = {
userName: "",
password : ""
};
}
public render(): React.ReactElement<IDataSenderWpProps> {
return (
<div className={styles.dataSenderWp}>
<h2>Sender Web Part</h2>
<div>User Name:</div>
<div>
<input type="text" value={this.state.userName} onChange={this._onChangeUserName.bind(this)} />
</div>
<div>Password:</div>
<div>
<input type="text" value={this.state.password} onChange={this._onChangePassword.bind(this)} />
</div>
</div>
);
}
private _onChangeUserName(event: any)
{
this.setState({
userName : event.target.value
});
this.sendData(event.target.value, this.state.password);
}
private _onChangePassword(event: any)
{
this.setState({
password : event.target.value
});
this.sendData(this.state.userName, event.target.value);
}
private sendData(userName:string, password:string): void
{
var eventBody = {
sharedUserName: userName,
sharedUserPassword:password
} as IEventData;
this.eventEmitter.emit("shareData", eventBody);
}
}

Update 'DataSenderWp.module.scss' file as below.

@import '~office-ui-fabric-react/dist/sass/References.scss';
.dataSenderWp {
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
h2{
background-color: blue;
color:white;
padding: 10px 5px;
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
}

Open the 'DataReceiverWp.tsx' file and add the below imports.

import { IDataReceiverWpState } from './IDataReceiverWpState';
import IEventData from '../../RxJsEventEmitter/IEventData';
import {RxJsEventEmitter} from '../../RxJsEventEmitter/RxJsEventEmitter';

Update the Render method and add the constructor which calls the function 'receiveData' to get the data from the Sender web part. The entire code for this file is as below.

import * as React from 'react';
import styles from './DataReceiverWp.module.scss';
import { IDataReceiverWpProps } from './IDataReceiverWpProps';
import { escape } from '@microsoft/sp-lodash-subset';
import { IDataReceiverWpState } from './IDataReceiverWpState';
import IEventData from '../../RxJsEventEmitter/IEventData';
import {RxJsEventEmitter} from '../../RxJsEventEmitter/RxJsEventEmitter';
export default class DataReceiverWp extends React.Component<IDataReceiverWpProps, IDataReceiverWpState>
{
private readonly eventEmitter: RxJsEventEmitter = RxJsEventEmitter.getInstance();
public constructor(props:IDataReceiverWpProps, state:IDataReceiverWpState){
super(props);
this.state = {
userName:"",
password:""
};
this.eventEmitter.on("shareData", this.receiveData.bind(this));
}
public render(): React.ReactElement<IDataReceiverWpProps> {
return (
<div className={styles.dataReceiverWp}>
<h2>Receiver web part</h2>
<div><span>User Name: </span><span>{this.state.userName}</span></div>
<div><span>Password: </span><span>{this.state.password}</span></div>
</div>
);
}
private receiveData(data: IEventData) {
this.setState({
userName: data.sharedUserName,
password:data.sharedUserPassword
});
}
}

Update 'DataSenderWp.module.scss' file as below.

@import '~office-ui-fabric-react/dist/sass/References.scss';
.dataReceiverWp
{
h2{
background-color: blue;
color:white;
padding: 10px 5px;
}
.container {
max-width: 700px;
margin: 0px auto;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
}
.row {
@include ms-Grid-row;
@include ms-fontColor-white;
background-color: $ms-color-themeDark;
padding: 20px;
}
.column {
@include ms-Grid-col;
@include ms-lg10;
@include ms-xl8;
@include ms-xlPush2;
@include ms-lgPush1;
}
.title {
@include ms-font-xl;
@include ms-fontColor-white;
}
.subTitle {
@include ms-font-l;
@include ms-fontColor-white;
}
.description {
@include ms-font-l;
@include ms-fontColor-white;
}
.button {
// Our button
text-decoration: none;
height: 32px;
// Primary Button
min-width: 80px;
background-color: $ms-color-themePrimary;
border-color: $ms-color-themePrimary;
color: $ms-color-white;
// Basic Button
outline: transparent;
position: relative;
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
-webkit-font-smoothing: antialiased;
font-size: $ms-font-size-m;
font-weight: $ms-font-weight-regular;
border-width: 0;
text-align: center;
cursor: pointer;
display: inline-block;
padding: 0 16px;
.label {
font-weight: $ms-font-weight-semibold;
font-size: $ms-font-size-m;
height: 32px;
line-height: 32px;
margin: 0 4px;
vertical-align: top;
display: inline-block;
}
}
}

Once all the changes in the file have been done, run the 'gulp serve' command to see the output into the Workbench.aspx page. It will have the below output for updating into the sender web part for the 'username' or 'password' controls, it will reflect the values into the receiver web part.

Code

The code can be found here.