In Focus

Integrate PowerApps With SPFX WebPart

In this article, we will learn how to integrate custom PowerApps forms with SPFx (SharePoint framework).

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

Overview

 
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={"https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(104,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.
https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(104,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/<PowerAppsFormID>
 
Note
PowerApps form was created in the previous article, details can be found here.
 
Navigate to https://web.powerapps.com
 
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.