In this code example, we are going to pass data between two web part. We will change a data in one web part and a change will reflect in other web part.
Implementation
- Create a directory called “Connected Web parts”
- Scaffold the solution by running a Yeoman generator using the below command.
yo @microsoft/sharepoint
- 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 show 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.
Install 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.
- 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.
Like and share this post with your friends and collegues.
Happy SharePointing!!!
courtesy: Ravi Ruparel
Technical Solutions Professional | Modern Workplace Architect Lead | Microsoft 365 | SharePoint | Power Platform | MS Teams | React
Leave a Reply