SPFX webpart with PowerApps Form

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.

PowerApps Form Creation

Step 1 - Navigate to the PowerApps application here.

Log in with your O365 credentials, provided your credentials have been assigned the PowerApps license.

Due to network traffic, sometimes the request navigates to here. In the end, it also provides the same interface and functionality.

Step 2 - Create a Canvas App

There are two types of Apps, i.e., Canvas App or Model Apps. In a nutshell, both seem similar, but they have a very basic difference,

• Canvas AppIt's used to create a simple visual design without complicated coding or programming tools.
• Model AppIt's used to design complex business logic with the ability to generate data model.

Select “+Create” >> Canvas app from blank.

Step 3 - Canvas App Name

Provide the App name and select the format as Tablet. Click "Create" to proceed.

Step 4 - Add Data Source

Once a blank app is created, select View -> Data Source. Type SharePoint to select the connection.

Create an OOTB generic SharePoint List name "Leave Request" with below schema.

S.NO	Column Name	Data Type
1	Leave Comment	Single Line of Text
2	StartDate	Date
3	EndDate	Date

Step 5 - Connect to SharePoint Online Site Collection

Select the desired site collection from the availble list.

Step 6 - Select the List Name

Step 7 - Add Form to Screen

1. Select Forms 
2. Edit Form
3. Select the Data Source from the left-hand side; i.e., List Name
4. Edit Form will appear on the screen with a 3-column layout with all fields in the default views. Change the column and layout with 2 and vertical respectively.
5. Select Mode to New.
6. All controls appear on the form with a 2-column layout.

This form is going to create a new request.

Step 8 - Change the form setting

Click the File menu.

1. Select App Settings >> Screen Size and Orientation >>Choose custom width and height.

Click "Apply" to save the changes.

Step 9 - Resize the Form and Control

Increase the width and height of the form.

1. Select Title Data card >> set the width in the property as 1024.
2. Select Data Card Value >> set the width of the text box in the property as 1000.

Follow the same steps for "Leave comments". Select an attachment and remove it.

Step 10 - Add Form Submit Button

1. Add button to form and rename the text  “Submit” and select the form
2. Choose the form “On Select” from the dropdown
3. Change the value to “SubmitForm(Form1)

Once the "Submit" button is clicked, it will save the created form.

Step 11 - Add new screen 

Select Home -> New Screen -> Blank. It will add a new blank screen into an app.

New screen used for navigation after successful submission of the form.

Step 12 - Add Success message to screen

1. Select newly added screen2 -> Select insert ribbon -> Select Text
2. Click HTML Text control.
3. Select HTML Text control
4. Add HTML Text to control like “Request Submitted successfully”

Step 13 - Navigate form on Success

Once the form gets submitted, it will navigate the form to screen 2 and show the success message.

1. Select screen1 Form
2. Select On Success from dropdown
3. set value “Navigate (Screen2)  

Step 14 - Execute the Form

Press F5 to run the form and set all the details and click submit.

SPFX Webpart integerate with Powerapps Form

Step 15 - Create and Navigate to SPFx Folder

1. yo @microsoft/sharepoint  

Step 16 - 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 17 - Import and Add References

Browse the solution and navigate to filename SpfxpowerappsForm.tsx.

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

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

1. npm install --save react-iframe  

Step 18 - Add State and Initialize the Contractor

Add State with ShowModalNew variable.

1. export interface ISpfxPowerAppsFormState {  
2.   showModalNew: boolean;  
3. }  

Create Constant with Close button icon.

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

Add Constructor and initalize the State Variable.

1. constructor(props: any) {  
2.     super(props);  
3.     this.state = {  
4.       showModalNew: false,  
5.       };  
6.   }  

Look at the reference screenshot to place the code.

Step 19 - 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,

1. public render(): React.ReactElement<ISpfxPowerAppsFormProps> {  
2.    return (  
3.      <div>  
4.       <DefaultButton id="requestButton" onClick={this._showModalNew} text="Raise Leave Request"></DefaultButton>   
5.       <Modal  
6.          titleAriaId="titleId"  
7.          subtitleAriaId="subtitleId"  
8.          isOpen={this.state.showModalNew}  
9.          onDismiss={this._closeModalNew}  
10.          isBlocking={false}  
11.         containerClassName="ms-modalExample-container">  
12.          <div >  
13.            <span ><b>Leave Request Form  </b> </span>   
14.            <DefaultButton onClick={this._closeModalNew} className={styles.CloseButton} ><CloseModal/></DefaultButton>  
15.          </div>  
16.          <div id="subtitleId" className="ms-modal-body">  
17.            <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"}  
18.                width="1024px" height="550px"  
19.                position="relative"  
20.                allowFullScreen>  
21.            </Iframe>  
22.          </div>  
23.        </Modal>  
24.       </div>  
25.    );  
26.  }  

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>

Navigate to https://web.powerapps.com

Navigate to designed apps and click the "Detail" section. 

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

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

1. .CloseButton     
2. {    
3. float: right;    
4. background-color: #3860b2;    
5. height: 40px;    
6. color: antiquewhite;     
7.   &:hover{    
8.     background-color: #3860b2;    
9.   }    
10. }     

Step 21 - Test Solution locally

Navigate to View -> Integrated Terminal

1. type gulp serve  

Step 22 - 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 23 - Raise a leave request

The button will invoke the PowerApps form 

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.

Finally, the record gets added to the SharePoint List.

How easy and quick it was to build a custom PowerApps form solution, without a single line of code.

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

Fetch azure SQL data into SharePoint Online

This tutorial demonstrate, How to fetch azure SQL data into SharePoint Online using Business Connectivity Services and Secure Store Services.

SharePoint Secure Store Service

Quoting MSDN, the definition of SharePoint Secure Store Service is:

"Secure Store Service is a shared service that provides storage and mapping of credentials such as account names and passwords. It enables you to securely store data that provides credentials required for connecting to external systems and associating those credentials to a specific identity or group of identities. It is very common for solutions to try to authenticate to an external system in which the current user is known differently or has a different account for authentication. In such cases, Secure Store Service can be used to store and map user credentials required by the external system. You can configure Secure Store Service so that multiple users can access an external system by using a single set of credentials on that external system."

Business Connectivity Services

Business Connectivity Services (BCS) connections to data sources, such as SQL Azure databases or Windows Communication Foundation (WCF) web services, that are outside the SharePoint site.

Migrate SharePoint on Premises document library’s or list to SharePoint Online using SPO API

SharePoint Point Online migration PowerShell is cmdlets is another ways of content migration without using the tool.

Below is the step by step SharePoint Online PowerShell cmdlets to migrate the content. It requires minimal CSOM (Client object model) call to avoid the threshold. It leverages temporary Azure Blob Storage container to hold the content and Azure Queue, which schedule parallel jobs.

Prerequisites to use the SPO Migration API

Here are the steps for using SPO Migration PowerShell to upload your on-premises data into SharePoint Online

Step1:- Export your document library content

This cmdlets export on-premises content to define folder structure.

Parameter

SiteUrl: - Source site url ( i.e. https://dev.northeurope.cloudapp.azure.com/sites/TeamSite)

ItemUrl: - relative path of document library or list (i.e. /sites/teamsite/contentlib )

Path: - folder structure path (C:\MigrationAPI\Contentlib)

Example

Export-SPWeb -Identity "<<SiteUrl>>" -ItemUrl "<<document library relative path>>" -Path "<<physical folder path>>" -NoFileCompression -IncludeVersions All

Step2:- Get your credentials into variables

$username = "manoj@sharepointtimes.onmicrosoft.com"

$cred = Get-Credential $username

Step3:- Set Source Package & File Path

At initial stage source file & package is same as export path of document library

$sourceFiles = "C:\MigrationAPI\Contentlib "

$sourcePackage=" C:\MigrationAPI\Contentlib "

Step4:- Set Output Package Path

$outputPackagePath = "C:\MigrationAPI\outputPackagePath"   

Step5:- Get target web & library

$targetWebUrl = "https://sharepointtimes.sharepoint.com/sites/teamsite"  

$targetLibrary = "contentlib"

Step6:- Convert Package for your target site

This creates a content package from a backup folder, the New-SPOMigrationPackage command reads the list of content targeted by the source path and will generate XML to perform the migration.

The following parameters are required:-

sourceFiles: points to the content you want to migrate

sourcePackage: points to content you want to migrate

targetWebUrl: point to your destination web

targetLibrary: point to the document library inside the web.

OutputPackagePath: points to your Temporary folder

Example:-

This example show how to convert a package to a target one by looking into source

ConvertTo-SPOMigrationTargetedPackage -SourceFilesPath $sourceFiles -SourcePackagePath $sourceFiles -OutputPackagePath $outputPackagePath -TargetWebUrl $targetWebUrl -TargetDocumentLibraryPath $targetLibrary -Credentials $cred

Step7:- Set Azure Storage Path & Variable

$fileContainerName = "onlinefile01”

$packageContainerName ="onlinepackage01"

$azureAccountName = "onlineazurestorage"

$azureAccountKey = “TQDKxHnHUDCG7uCjlfk646fzH5BV+mjjrocA9p6P0ENCJ2aHoY4+F6xOfdhnUslQ=="

$azureAzureQueueName = "migrationqueue01"

Step8:- Set SharePoint Online Migration Package source

This cmdlet help to create a defined file & package container into Azure blob storage as well as move the content from source file & output package path

The following parameters are required & optional:-

source files: points to the content you want to migrate

source package: points to your Temporary folder

FileContainerName:- temporary file container to hold the content (optional)

PackageContainerName:- temporary package container to hold the package (optional)

AccountName:- Azure blob storage account name

AccountKey:- Azure blob storage account access key

AzureQueueName:- Azure storage queue name (optional)

Example

$azurelocations=Set-SPOMigrationPackageAzureSource -SourceFilesPath $sourceFiles -SourcePackagePath $outputPackagePath -FileContainerName $fileContainerName -PackageContainerName $packageContainerName -AccountName $azureAccountName -AccountKey $azureAccountKey –Overwrite  -AzureQueueName $azureAzureQueueName

Step9:- List down the Azure Storage File container, Package Container & Queue URI

$azurelocations|fl

Step10:- Submit the Migration Job

This cmdlets help to generate the parallel queue to migrate the content from temporary storage to target web

There are three required parameter

TargetWebUrl:- target weburl where content need to migrate

MigrationPackageAzureLocations:- above set variable

Example

Submit-SPOMigrationJob -TargetWebUrl $targetWebUrl -MigrationPackageAzureLocations $azurelocations -Credentials $cred

Step11:- Monitoring the job status (Optional)

After the job is submitted, Only Azure Migration Queue interact to fetch and migrate the content to target SharePoint Online Site. This process is timer-job based.

Example

This cmdlet gives the running job status, If it doesn’t return any value – it means processing has been completed else it shows In Processing.

Get-SPOMigrationJobStatus -TargetWebUrl $targetWebUrl -Credentials $cred