Extend SharePoint Framework Solution with Microsoft Power Apps

Manoj Mittal

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

Build an SPFx extension i.e. Application Command List View. It will appear as a button in the Library List view.
On Library List view button click invoke Office UI Fabric, Modal Dialog window.
Modal Dialog call designed Power Apps Canvas form in an iframe with document id as parameter.
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

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:

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

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 6. Navigate to PowerApps

https://web.powerapps.com

Step 7. Create Canvas Form

Click on ‘Canvas app from blank’.

Extend SharePoint Framework Solution With Microsoft Power Apps

Step 8. Set PowerApp Name

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

Extend SharePoint Framework Solution With Microsoft Power Apps

Step 9. 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 10. 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 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.

Extend SharePoint Framework Solution With Microsoft Power Apps

Step 12. 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 13. 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 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.

Extend SharePoint Framework Solution With Microsoft Power Apps

Step 15. 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 16. 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 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

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

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.

1 Comment

Join the conversation! Your thoughts help the community grow.

Siddharth Vaghasia7y ago
Interesting...how we can combine two concepts to build a solution which is cost-effective plus maintainable...thanks for sharing..!

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';

@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(() => { }); }); }

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

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

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

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> ); }

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 6. Navigate to PowerApps

https://web.powerapps.com

Step 7. Create Canvas Form

Click on ‘Canvas app from blank’.

Extend SharePoint Framework Solution With Microsoft Power Apps

Step 8. Set PowerApp Name

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

Extend SharePoint Framework Solution With Microsoft Power Apps

Step 9. 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 10. 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 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.

Extend SharePoint Framework Solution With Microsoft Power Apps

Step 12. 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 13. 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 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.