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. 

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

yo @microsoft/sharepoint   

Create SPFx extension solution with below option

Set Command Name and Description

 

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

 

Step 2. Import and Add References

Browse the solution and navigate to filename ModalDialogReference.tsx.

Install "react-iframe" package using the following commands:

import { Modal } from 'office-ui-fabric-react/lib/Modal';  
import { DefaultButton } from 'office-ui-fabric-react/lib/Button';  
import { Icon } from 'office-ui-fabric-react/lib/Icon';  
import { UrlQueryParameterCollection } from '@microsoft/sp-core-library';  
import Iframe from 'react-iframe';  

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.

@override  
 public onListViewUpdated(event: IListViewCommandSetListViewUpdatedParameters): void {  
   const compareOneCommand: Command = this.tryGetCommand('COMMAND_1');  
   var Libraryurl = this.context.pageContext.list.title;  
   if (compareOneCommand) {  
       
     // This command should be hidden unless exactly one row is selected.  
     compareOneCommand.visible = (event.selectedRows.length === 1 && (Libraryurl == "AuditReport"));  
   }  
 }  
  
 @override  
 public onExecute(event: IListViewCommandSetExecuteEventParameters): void {  
   switch (event.itemId) {  
     case 'COMMAND_1':  
     if (event.selectedRows.length > 0) {  
       // Check the selected rows  
       event.selectedRows.forEach((row: RowAccessor, index: number) => {  
           const dialog = new Index({ id: row.getValueByName('ID'), showModal: true})  
         dialog.show().then(() => {  
         });  
         
       });  
   }

Add Row Accessor to LibraryExtensionCommandSet.ts file

import {  
  BaseListViewCommandSet,  
  Command,RowAccessor,  
  IListViewCommandSetListViewUpdatedParameters,  
  IListViewCommandSetExecuteEventParameters  
} from '@microsoft/sp-listview-extensibility';  

Step 4. Browse ModalDialogReference.tsx file and add modal dialog window

Add close button for pop up. 

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

Add State and Props for Modal Dialog and Item ID

export interface IModalWindowState {  
  showModal: boolean;  
  id: number;  
  
}  
export interface IModalWindowProps{  
  id:number;  
  close:any;  
  showModal: boolean;  
  
}

Set State for Modal Show and Close

private _showModal = (): void => {  
    // renderOnDom()  
    this.setState({ showModal: true });  
  };  
  
  private _closeModal = (): void => {  
    this.props.close()  
    this.setState({ showModal: false });  
  }; 

Add  Render  method to class, which consists of a modal dialog window with IFrame

export default class ModalWindow extends React.Component<IModalWindowProps,IModalWindowState> {  
  constructor(props) {  
    super(props);  
    this.state = {  
      showModal: props.showModal,  
      id: props.id  
       
    };  
  }  
   
  componentWillReceiveProps(nextProps,prevState){  
    if(nextProps.id !== prevState.id){  
      this.setState({  
        id:nextProps.id,  
        showModal: nextProps.showModal  
         
      })  
    }  
      
  }  
  
  public render(): JSX.Element {  
    var libraryUrl = window.location.href;  
    libraryUrl= libraryUrl.toLowerCase()  
    let fields="";  
     let headertext =""  
      headertext ="Audit Report Relase Form"  
       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 ;       
    return (  
      <div>  
  
      <Modal   
     isOpen={this.state.showModal}  
     onDismiss={this._closeModal}  
     isBlocking={true}  
     containerClassName="ms-modal-container">  
      <div className="ms-modal-head">  
        <span className="ms-modal-headerTitle">{headertext}</span>   
       
        <DefaultButton onClick={this._closeModal}  className="CloseButton"  ><CloseModal/></DefaultButton>  
      </div>  
        <div id="subtitleId" className="ms-modal-body">  
          <Iframe url={fields}  
            width="1024px" height="550px"  
            position="relative"  
            allowFullScreen>  
          </Iframe>  
        </div>  
      </Modal>  
    </div>  
    );  
  }  

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 5. Set reference for document library

Client Side Instance.XML for List to Library i.e. 101  

Element .XML form List to Library i.e. 101 

Let's create a quick power apps solution to invoke in the above solution.

Step 6. Navigate to PowerApps 

https://web.powerapps.com

Step 7. Create Canvas Form

Click on ‘Canvas app from blank’.

Step 8. Set PowerApp Name

Select app name as ‘Audit Report Reference’, click ‘Create’.

Step 9. Rename the Screen

Rename default Screen1 as ‘EditScreen’. Clicking on 3 dots will give the option to rename.

After that, select insert option and insert form and rename the form to Edit Form 

Step 10. Connect tp SPO Datasource

Search for SharePoint in data source options and select SharePoint.

Type/paste your site URL, and click ‘connect’.

Select the list ‘Audit Reference’. Click ‘Connect’. 

Step 11. Change Form DataSource and Form Mode

Select ‘EditForm’, and select the data source as ‘Auditreference’ and default mode as ‘New’ from right pane properties.

Step 12. Populate Fields at Form

Edit form populate with fields.

Select datacardvalue of ‘Title’ field.

Change the default formula as ‘Param("Input")’  

Step 13. Add Control Button and set navigation

Select ‘EditScreen’. Click on ‘insert ’ on the menu bar. Click on the button.

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 14. 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.

Step 15. Update Navigation

Select EditScreen. Then select ‘Save' button and update ‘OnSelect’ Property to ‘SubmitForm(EditForm); Navigate(DisplayScreen, ScreenTransition.Fade)’

Step 16. Save and Publish the Form

Go to ‘File’ from the menu bar. Click on Save & Publish

 

Store the app id, we need to use the same in SPfx Extension.

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 17. Build Bundle, Package the SPFx Solution

npm install "react-iframe" --save

gulp build

gulp bundle --ship

gulp package-solution –ship 

Step 18. Deploy package to app catalog

Login to the SharePoint site and redirect to ‘Site Contents’.

Click on ‘Apps for SharePoint’.

Click on ‘Upload’ button

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 19. 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’

 

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.

Popup will appear as PowerApps Form against the selected document ID. Upload the required reference document. 

Click on the Save button and it will save the reference document to a list as an attachment and navigate to the display screen.

 

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.

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.