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. 

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

yo @microsoft/sharepoint

 

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

 

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.