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.

SharePoint Online: Approval Request via email comment and update response in List

In this article, we are going to discuss the process of creating an approval workflow. We will work on functionality so that the Approver or Manager can approve and reject the request via email instead to navigate webforms. 

Scenario

1. Employee raises a leave request.
2. The request goes to the employee manager or whoever is assigned as AD or synced with the O365 account.
3. Manager can approve or reject the request with comments via email.
4. The employee will get notified based on the manager comments. 

Prerequisites

1. Microsoft Flow.
2. A SharePoint Online list.
3. Office 365 Outlook and Office 365 Users account.

Let's get started 

The overall Microsoft Flow structure will look like this.

Step1

To create a leave request, I am using a List at SharePoint Online. Employee submits a request and the associated MS Flow gets triggered on item creation.

Step 2

Create a string variable as a name Manager (This step can be optional too).

Step 3

Get user manager from O365 profile using "created by"; i.e., who has created the request. User Manager should be assigned at O365 User Profile.

Set Manager email id to the created variable to send the request.

Step 4

Add an action “Start and Wait for an approval”.

Select the approval type: Approve/Reject – First to respond and assign the request to Manager with title and details.

The advantage of this action is that the workflow will not proceed until the manager approves or rejects the workflow via email body button.

Step 5

Check for condition and accordingly, update the manager comments provided in an email to SharePoint Online List.

Step5.1

If Request status is approved, then update the action. The "Send email" section will look like this.

Step5.2

If the Request status is rejected, then update the action. The "Send email" section will look like this.

Now, we will talk about the flow process.

The user creates a request via form (Created a list at SharePoint Online with a required column for demo purpose). Here, I have created the first request.

The designated Microsoft Flow gets triggered and waits until the request is not responding.

Switch to "manage email" box and check for email. Manager will get an approval email.

Approval of request assigned manager can act over a request with approving or rejecting a request with comments.

As approver responded to an email with comment and approved status. The Leave request item will get updated with a response,

The employee gets a final notification along with the approve/reject status.

I hope you have learned something new in this article. Stay tuned for related articles to get more insights and learning.

MSFlow | Best Practice | Lookup Threshold Issue

Here, we are going to discuss a very common problem statement faced during the runtime of Microsoft Flow:

The query cannot be completed because the number of lookup columns it contains exceeds the lookup column threshold enforced by the administrator.

This problem statement occurs whenever Microsoft Flow executes over SharePoint Online list or library where the Lookup column exceeds the limit of 12 columns. The administrator cannot change the threshold limit at SharePoint Online, either at the Tenant or Site Collection level.

Why does Microsoft set the magic number 12 as the threshold limit?

Reason

Each lookup column creates a join with other tables. So, Microsoft decided to set the limit at 12 to avoid performance degradation.

Let's get started with detailed resolution.

Custom lookup column can be created using the below types.

1. Standard Lookup column
2. People Pickers
3. Managed Metadata
4. Workflow
5. Share With

OOTB Lookup columns

1. Created by (both for List & Library)
2. Modified by (both for List & Library)
3. Name (linked to Document)
4. Link (Edit to edit item)
5. Name (linked to Document with edit menu)
6. Type (icon linked to document)

Lookup column is quite useful but we should be cautious about the threshold limit while designing the schema.

I created a list with 13 lookup columns. See the below list for your reference.

Problem statement with Get Items

When we run flow to get an item from a List or Library having more than 12 lookup columns, it throws the following error.

Resolution with Get Items

Create a list or library view with 12 or fewer than 12 lookup columns and set the view at the Get Items action. During a custom View creation, we can ignore the OOTB column or the ones that are not required for this operation.

After setting the list View with 12 lookup columns, once I execute the flow, it succeeds.

Problem statement with Update Item

A similar issue occurs when we want to update the items using MS Flow.

Resolution with Update Item 

I created a View with 12 lookup columns and set “Limit Column by View” with a newly created View.

Once I executed the flow with the View which is having 12 lookup columns, it succeeded and updated the item.

I hope you have learned something new in this article. Stay tuned for related articles to get more insights and learning.

Speaking at C# Corner Annual Conference 2019

Automate the Business Process using AI Services and O365 Suites.

I am very excited to going as speaker at C # corner Annual conference 2019  this Saturday at Delhi 

Address:-
The Leela Ambience Convention , 1,CBD, Near Yamuna Sports Complex,
Maharaja Surajmal Marg, Delhi, 110032



Definitely you folks will learn a good use case for this. 

More 

Annual conference 2019 : https://conference.c-sharpcorner.com/

Happy Coding.