SPFx – Pass Data between connected web parts

By Sigar Dave No comments

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

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

  • The generator will ask the below information about the new SPFx solution.
Pass Data Between Web Parts (Connected Web Parts) Using SPFx
  • 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.
Pass Data Between Web Parts (Connected Web Parts) Using SPFx
  • 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.
Pass Data Between Web Parts (Connected Web Parts) Using SPFx
  • 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.
Pass Data Between Web Parts (Connected Web Parts) Using SPFx
  • Once the web part is created, open the solution code in the code editor (like Visual Studio Code) using the below command.
Pass Data Between Web Parts (Connected Web Parts) Using SPFx

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. 
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.

Like and share this post with your friends and collegues.

Happy SharePointing!!!

courtesy: Ravi Ruparel

Please follow and like us:

Leave a Reply