Extend SharePoint Framework Solution with Microsoft Power Apps

Introduction 
 
PowerApps is an enterprise service that lets you connect, create, and share business apps with your team in minutes and helps to build a highly tailored application with an optimized user experience. You can expedite the business solution with Power Apps as well as SharePoint Online.
 
PowerApps is known as a powerful platform that allows for less code and more power.
 
Let's get started and learn how to extend a SharePoint Framework SPFx solution with PowerApps. I am going to take a simple problem statement, i.e. The user needs to upload the reference document. There are multiple way to achieve this scenario, so let's see how easy it is using a low code solution. 
 
Extend SharePoint Framework Solution With Microsoft Power Apps
Solution Overview
  1. Build an SPFx extension i.e. Application Command List View. It will appear as a button in the Library List view.
  2. On Library List view button click invoke Office UI Fabric, Modal Dialog window.
  3. Modal Dialog call designed Power Apps Canvas form in an iframe with document id as parameter.
  4. PowerApps Canvas form store reference document to different list as attachment with corresponding library document id as metadata.
Step 1 - Create and Navigate to SPFx extension Folder
  1. yo @microsoft/sharepoint   
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Create SPFx extension solution with below option
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Set Command Name and Description
 
Extend SharePoint Framework Solution With Microsoft Power Apps 
After a few minutes, the "Congratulations!" screen will appear to notify the successful generation of the package. 
 
Extend SharePoint Framework Solution With Microsoft Power Apps 
 
Step 2 - Import and Add References
 
Browse the solution and navigate to filename ModalDialogReference.tsx.
 
Install "react-iframe" package using the following commands:
  1. import { Modal } from 'office-ui-fabric-react/lib/Modal';  
  2. import { DefaultButton } from 'office-ui-fabric-react/lib/Button';  
  3. import { Icon } from 'office-ui-fabric-react/lib/Icon';  
  4. import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';  
  5. import Iframe from 'react-iframe';  
  1. npm install --save react-iframe  
Step 3 - Set Extension to Specific Library
 
You can add extension to specific library as per below command and refer my previous article set extension to specific library here.
  1. @override  
  2.  public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {  
  3.    const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');  
  4.    var Libraryurl = this.context.pageContext.list.title;  
  5.    if (compareOneCommand) {  
  6.        
  7.      // This command should be hidden unless exactly one row is selected.  
  8.      compareOneCommand.visible = (event.selectedRows.length === 1 && (Libraryurl == "AuditReport"));  
  9.    }  
  10.  }  
  11.   
  12.  @override  
  13.  public onExecute(event: IListViewCommandSetExecuteEventParameters): void {  
  14.    switch (event.itemId) {  
  15.      case 'COMMAND_1':  
  16.      if (event.selectedRows.length > 0) {  
  17.        // Check the selected rows  
  18.        event.selectedRows.forEach((row: RowAccessor, index: number) => {  
  19.            const dialog = new Index({ id: row.getValueByName('ID'), showModal: true})  
  20.          dialog.show().then(() => {  
  21.          });  
  22.          
  23.        });  
  24.    }  
 Add Row Accessor to LibraryExtensionCommandSet.ts file
  1. import {  
  2.   BaseListViewCommandSet,  
  3.   Command,RowAccessor,  
  4.   IListViewCommandSetListViewUpdatedParameters,  
  5.   IListViewCommandSetExecuteEventParameters  
  6. } from '@microsoft/sp-listview-extensibility';  
Step 3 - Browse ModalDialogReference.tsx file and add modal dialog window
 
Add close button for pop up. 
  1. const CloseModal = () => (  
  2.     <Icon iconName="ChromeClose" className="ms-IconExample" style={{fontWeight : "bold"}}  />  
  3.   );  
Add State and Props for Modal Dialog and Item ID
  1. export interface IModalWindowState {  
  2.   showModal: boolean;  
  3.   id: number;  
  4.   
  5. }  
  6. export interface IModalWindowProps{  
  7.   id:number;  
  8.   close:any;  
  9.   showModal: boolean;  
  10.   
  11. }  
Set State for Modal Show and Close
  1. private _showModal = (): void => {  
  2.     // renderOnDom()  
  3.     this.setState({ showModal: true });  
  4.   };  
  5.   
  6.   private _closeModal = (): void => {  
  7.     this.props.close()  
  8.     this.setState({ showModal: false });  
  9.   };  
Add  Render  method to class, which consists of a modal dialog window with IFrame
  1. export default class ModalWindow extends React.Component<IModalWindowProps,IModalWindowState> {  
  2.   constructor(props) {  
  3.     super(props);  
  4.     this.state = {  
  5.       showModal: props.showModal,  
  6.       id: props.id  
  7.        
  8.     };  
  9.   }  
  10.    
  11.   componentWillReceiveProps(nextProps,prevState){  
  12.     if(nextProps.id !== prevState.id){  
  13.       this.setState({  
  14.         id:nextProps.id,  
  15.         showModal: nextProps.showModal  
  16.          
  17.       })  
  18.     }  
  19.       
  20.   }  
  21.   
  22.   public render(): JSX.Element {  
  23.     var libraryUrl = window.location.href;  
  24.     libraryUrl= libraryUrl.toLowerCase()  
  25.     let fields="";  
  26.      let headertext =""  
  27.       headertext ="Audit Report Relase Form"  
  28.        fields = "https://web.powerapps.com/webplayer/iframeapp?source=iframe&screenColor=rgba(104,101,171,1)&appId=/providers/Microsoft.PowerApps/apps/8a7896aa-ff75-4bdf-b297-399d6785aec3&Input=" + this.state.id ;       
  29.     return (  
  30.       <div>  
  31.   
  32.       <Modal   
  33.      isOpen={this.state.showModal}  
  34.      onDismiss={this._closeModal}  
  35.      isBlocking={true}  
  36.      containerClassName="ms-modal-container">  
  37.       <div className="ms-modal-head">  
  38.         <span className="ms-modal-headerTitle">{headertext}</span>   
  39.        
  40.         <DefaultButton onClick={this._closeModal}  className="CloseButton"  ><CloseModal/></DefaultButton>  
  41.       </div>  
  42.         <div id="subtitleId" className="ms-modal-body">  
  43.           <Iframe url={fields}  
  44.             width="1024px" height="550px"  
  45.             position="relative"  
  46.             allowFullScreen>  
  47.           </Iframe>  
  48.         </div>  
  49.       </Modal>  
  50.     </div>  
  51.     );  
  52.   }  
Note
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>
 
Step 4 - Set reference for document library
 
Client Side Instance.XML for List to Library i.e. 101  
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Element .XML form List to Library i.e. 101 
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Let's create a quick power apps solution to invoke in the above solution.
 
Step 5 - Navigate to PowerApps 
 
https://web.powerapps.com
 
Step 6 - Create Canvas Form
 
Click on ‘Canvas app from blank’.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Step 7 - Set PowerApp Name
 
Select app name as ‘Audit Report Reference’, click ‘Create’.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Step 8 - Rename the Screen
 
Rename default Screen1 as ‘EditScreen’. Clicking on 3 dots will give the option to rename.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
After that, select insert option and insert form and rename the form to Edit Form 
 
Step 9 - Connect tp SPO Datasource
 
Extend SharePoint Framework Solution With Microsoft Power Apps
Search for SharePoint in data source options and select SharePoint.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
Type/paste your site URL, and click ‘connect’.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Select the list ‘Audit Reference’. Click ‘Connect’. 
 
Extend SharePoint Framework Solution With Microsoft Power Apps
Step 10 - Change Form DataSource and Form Mode
 
Select ‘EditForm’, and select the data source as ‘Auditreference’ and default mode as ‘New’ from right pane properties.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Step 11 - Populate Fields at Form
 
Edit form populate with fields.
 
Select datacardvalue of ‘Title’ field.
 
Change the default formula as ‘Param("Input")’  
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Step 12 - Add Control Button and set navigation
 
Select ‘EditScreen’. Click on ‘insert ’ on the menu bar. Click on the button.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Button will get added to screen, rename the button as ‘Save’, in the left side tree view.
 
Place (Drag and drop) the button below the screen,
 
Select the button and change the button text as ‘Save’
 
Step 13 - Add new screen for display message
  • Select ‘Insert’ in the menu bar. Add a new blank screen.
  • Rename that screen as ‘DisplayScreen’ in the left side tree view.
  • Select displayScreen and add a label from the menu bar insert option.
  • Rename the label as ‘DisplayMessage’.
  • Select label text option and give text as ‘Reference saved successfully, Please click the close button to exit the window’
  • Select label. From the menu bar select home, change the font size to 24. Align it as center-aligned.
  • Change the text color to blue.
  • Update the label position, size and padding in label properties as shown in the below screenshot.
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Step 14 - Update Navigation
 
Select EditScreen. Then select ‘Save' button and update ‘OnSelect’ Property to ‘SubmitForm(EditForm);Navigate(DisplayScreen,ScreenTransition.Fade)’
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Step 15 - Save and Publish the Form
 
Go to ‘File’ from the menu bar. Click on Save & Publish
 
Extend SharePoint Framework Solution With Microsoft Power Apps 
 
Store the app id, we need to use the same in SPfx Extension.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Now we are ready with PowerApps form and go back to SPFX solution at steps no. 3 replace the guide of the field variable. 
 
Step 16 - Build Bundle, Package the SPFx Solution
 
npm install "react-iframe" --save
gulp build
gulp bundle --ship
gulp package-solution –ship 
 
Step 17 - Deploy package to app catalog
 
Login to the SharePoint site and redirect to ‘Site Contents’.
 
Click on ‘Apps for SharePoint’.
 
Click on ‘Upload’ button
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Select .sppkg package from your solution and click on ‘Ok’
 
Click on ‘Deploy’ in the dialog window.
 
Verify for successful deployment. Also, verify for deployment errors.
 
Step 18 - Add an App to SPO Site
 
Redirect to ‘Site Contents’.
 
Click on ‘New’ then ‘App’.
 
Add the solution ‘m-365-Bangalore-client-side-solution’.
 
Verify app is available in SharePoint ‘site contents’
 
Extend SharePoint Framework Solution With Microsoft Power Apps 
Output
 
Finally, this is what the output will look like.
 
Select Item at Library and select List View extension
 
Upload the Document to Document Library and Select the Document & Select Audit Report Reference.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
PopUp will appear as PowerApps Form against the selected document ID. Upload the required reference document. 
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
Click on the Save button and it will save the reference document to a list as an attachment and navigate to the display screen.
 
Extend SharePoint Framework Solution With Microsoft Power Apps 
 
Navigate to List and Click on the Item Display, you can find all reference documents, as well as document id against which reference document has uploaded.
 
Extend SharePoint Framework Solution With Microsoft Power Apps
 
See how easy and quick it was to build a custom PowerApps solution with SharePoint Framework Extension.
 
Hope you have enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.