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.

Overview

The SPFx solution calls the PowerApps form using Modal Dialog with IFrame. PowerApps form then saves the data into SharePoint Online List.

SPFx (SharePoint Framework) control is designed to render the web part at SharePoint Online Modern Framework Page.
PowerApps is designed to add data into SharePoint Online List without REST API call.
SharePoint Online List is created to store the data.

Step 1 - Create and Navigate to SPFx Folder

yo @microsoft/sharepoint

Step 2 - Describe SPFx solution artifacts

Provide Solution Name: SPFX_PowerAppsForm
Provide the Target Solution: SharePoint Online
Provide Web Parts Name: SPFX_PowerAppsForm
Provide WebParts Description: SPFX_PowerAppsForm
Select Framework: React

After a few minutes, the "Congratulations!" screen will appear to notify the successful generation of the package.

Step 3 - Import and Add References

Browse the solution and navigate to filename SpfxpowerappsForm.tsx.

import { Modal } from 'office-ui-fabric-react/lib/Modal';
import Iframe from 'react-iframe';
import { Icon } from 'office-ui-fabric-react/lib/Icon';
import { css, classNamesFunction, DefaultButton, IButtonProps, IStyle, Label, PrimaryButton } from 'office-ui-fabric-react';

Install "react-iframe" package using the following command.

npm install --save react-iframe

Step 4 - Add State and Initialize the Contractor

Add State with ShowModalNew variable.

export interface ISpfxPowerAppsFormState {
showModalNew: boolean;
}

Create Constant with Close button icon.

const CloseModal = () => (
<Icon iconName="ChromeClose" className="ms-IconExample" style={{fontWeight : "bold"}} />
);

Add Constructor and initalize the State Variable.

constructor(props: any) {
super(props);
this.state = {
showModalNew: false,
};
}

Look at the reference screenshot to place the code.

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,

public render(): React.ReactElement<ISpfxPowerAppsFormProps> {
return (
<div>
<DefaultButton id="requestButton" onClick={this._showModalNew} text="Raise Leave Request"></DefaultButton>
<Modal
titleAriaId="titleId"
subtitleAriaId="subtitleId"
isOpen={this.state.showModalNew}
onDismiss={this._closeModalNew}
isBlocking={false}
containerClassName="ms-modalExample-container">
<div >
<span ><b>Leave Request Form </b> </span>
<DefaultButton onClick={this._closeModalNew} className={styles.CloseButton} ><CloseModal/></DefaultButton>
</div>
<div id="subtitleId" className="ms-modal-body">
<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"}
width="1024px" height="550px"
position="relative"
allowFullScreen>
</Iframe>
</div>
</Modal>
</div>
);
}

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.

Step 6 - Add CSS class to float cross icon to right.

Add CSS to SpfxPowerAppsForm.module.scss at the end.

.CloseButton
{
float: right;
background-color: #3860b2;
height: 40px;
color: antiquewhite;
&:hover{
background-color: #3860b2;
}
}

Step 7 - Test Solution locally

Navigate to View -> Integrated Terminal

type gulp serve

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.

Step 9 - Raise a leave request

The button will invoke the PowerApps form created in the previous post.

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.

Hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

5 Comments

Join the conversation! Your thoughts help the community grow.

Timothy Magsino6y ago
I'm new in developing an app with SPFX integration and following the guide you have provided, I encountered these errors, Can you help me fix this? - Property '_showModalNew' does not exist on type 'SpfxPowerAppsForm'.ts(2339) - Property '_closeModalNew' does not exist on type 'SpfxPowerAppsForm'.ts(2339) In <DefaultButton id="requestButton" onClick={this._showModalNew} text="Test Button"> ... isOpen={this.state.showModalNew} onDismiss={this._closeModalNew} Thank you very much
audrey boudiere6y ago
Good ! Thanks a lot ! how can we open different PowerApp Form dynamically ?
Sagar Pardeshi7y ago
Good concept to explore Manoj..keep it up
Aakash Maurya7y ago
Thats awesome.. This was out of my vision that we can integrate PowerApp form into SpFx webpart.. Good One.. THanks !!!
- Manoj Mittal7y ago
  Glad you like it.