Integrate PowerApps With SPFX WebPart

PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes, using any device. You can create a PowerApps for an existing list in SharePoint Online.
Let’s get started on how we can integrate PowerApps form with SPFx and leverage the PowerApps out of the box capability.
Integrate PowerApps with SPFX WebPart


The SPFx solution calls the PowerApps form using Modal Dialog with IFrame. PowerApps form then saves the data into SharePoint Online List. 
  1. SPFx (SharePoint Framework) control is designed to render the web part at SharePoint Online Modern Framework Page.
  2. PowerApps is designed to add data into SharePoint Online List without REST API call.
  3. SharePoint Online List is created to store the data.
Step 1 - Create and Navigate to SPFx Folder
  1. yo @microsoft/sharepoint  
Integrate PowerApps with SPFX WebPart
Step 2 - Describe SPFx solution artifacts 
  1. Provide Solution Name: SPFX_PowerAppsForm
  2. Provide the Target Solution: SharePoint Online
  3. Provide Web Parts Name: SPFX_PowerAppsForm
  4. Provide WebParts Description: SPFX_PowerAppsForm
  5. Select Framework: React
Integrate PowerApps with SPFX WebPart
After a few minutes, the "Congratulations!" screen will appear to notify the successful generation of the package.
Integrate PowerApps with SPFX WebPart
Step 3 - Import and Add References
Browse the solution and navigate to filename SpfxpowerappsForm.tsx.
  1. import { Modal } from 'office-ui-fabric-react/lib/Modal';  
  2. import Iframe from 'react-iframe';  
  3. import { Icon } from 'office-ui-fabric-react/lib/Icon';  
  4. import { css, classNamesFunction, DefaultButton, IButtonProps, IStyle, Label, PrimaryButton } from 'office-ui-fabric-react';  
Install "react-iframe" package using the following command.
  1. npm install --save react-iframe  
Integrate PowerApps with SPFX WebPart
Step 4 - Add State and Initialize the Contractor
Add State with ShowModalNew variable.
  1. export interface ISpfxPowerAppsFormState {  
  2.   showModalNew: boolean;  
  3. }  
Create Constant with Close button icon.
  1. const CloseModal = () => (  
  2.   <Icon iconName="ChromeClose" className="ms-IconExample" style={{fontWeight : "bold"}}    />  
  3. );  
Add Constructor and initalize the State Variable.
  1. constructor(props: any) {  
  2.     super(props);  
  3.     this.state = {  
  4.       showModalNew: false,  
  5.       };  
  6.   }  
Look at the reference screenshot to place the code.
Integrate PowerApps with SPFX WebPart 
Step 5 - Add Button to invoke Model Dialog
Add Office-UIiFabric default button and Modal Dailog.
Initilize the Iframe tag inside the Modal Dialog to call the power apps form,
  1. public render(): React.ReactElement<ISpfxPowerAppsFormProps> {  
  2.    return (  
  3.      <div>  
  4.       <DefaultButton id="requestButton" onClick={this._showModalNew} text="Raise Leave Request"></DefaultButton>   
  5.       <Modal  
  6.          titleAriaId="titleId"  
  7.          subtitleAriaId="subtitleId"  
  8.          isOpen={this.state.showModalNew}  
  9.          onDismiss={this._closeModalNew}  
  10.          isBlocking={false}  
  11.         containerClassName="ms-modalExample-container">  
  12.          <div >  
  13.            <span ><b>Leave Request Form  </b> </span>   
  14.            <DefaultButton onClick={this._closeModalNew} className={styles.CloseButton} ><CloseModal/></DefaultButton>  
  15.          </div>  
  16.          <div id="subtitleId" className="ms-modal-body">  
  17.            <Iframe url={",101,171,1)&appId=/providers/Microsoft.PowerApps/apps/f33f9511-5001-467f-8238-fddc36665299"}  
  18.                width="1024px" height="550px"  
  19.                position="relative"  
  20.                allowFullScreen>  
  21.            </Iframe>  
  22.          </div>  
  23.        </Modal>  
  24.       </div>  
  25.    );  
  26.  }  
To hide the Powerapps ribbon into modal dialog, we need to use below define format in the Iframe URL.,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/<PowerAppsFormID>
PowerApps form was created in the previous article, details can be found here.
Navigate to
Navigate to designed apps and click the "Detail" section.  
Integrate PowerApps with SPFX WebPart
Step 6 - Add CSS class to float cross icon to right.
Add CSS to SpfxPowerAppsForm.module.scss at the end.
  1. .CloseButton     
  2. {    
  3. floatright;    
  4. background-color#3860b2;    
  5. height40px;    
  6. color: antiquewhite;     
  7.   &:hover{    
  8.     background-color#3860b2;    
  9.   }    
  10. }     
Step 7 - Test Solution locally
Navigate to View -> Integrated Terminal
  1. type gulp serve  
Integrate PowerApps with SPFX WebPart
Step 8 - Browse the Workbench 
Browse the workbench with <<SitecollectionUrl>>/_layouts/15/workbench.aspx 
Click the + Icon and add the Web Part since the web part has the only button with Modal Popup.
Integrate PowerApps with SPFX WebPart
Step 9 - Raise a leave request
The button will invoke the PowerApps form created in the previous post.
Integrate PowerApps with SPFX WebPart
Fill the details and click the submit. On click of Submit, it will navigate to a different screen with a success message and add an item to SharePoint Online List.
Integrate PowerApps with SPFX WebPart
Hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.