SharePoint Online, Viva , Teams, Power Platform, Azure, Identity: PowerApps Form

Introduction

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 create a fully functional PowerApps based on a standalone application. I am going the cover all of the steps throughout multiple articles.

Design Home Page Screen
Navigation among screen
Item List View Screen
Item Detail View Screen
Item Detail Edit Screen

Previous article for reference:- https://manojmittalblogs.blogspot.com/2020/03/build-low-code-and-no-code-solutions-ie.html

Let's get started with next steps,

Step 1 - Add a Display screen with SPO list connection.

Select and click to add a new screen
Rename the screen "Flight Display Screen"
Select and click to add a display form.
FormViewer1 will appear in the tree view and a blank canvas without datasource connection.
Select the form view canvas and click "Connect to Data"
Select the data source from the Form View Property section.

Step 2 - Design Display screen

Select DataSource as list name i.e. Flight Details.
Set the Column Layout (i.e. 2) and Layout as vertical.
Add a Label for the heading of the screen and change the text to "Flight Detail View Screen".
Add a Home icon from the Icons section to navigate to the home screen.
Add an Edit icon from the Icons section to navigate to the Edit Screen.
Add the Close icon from the Icons section to navigate to the previous screen.

Step 3 - Add Navigation for Home Icon

Select the Home icon and write a function, i.e:

Navigate(HomeScreen)  

On a click of the home icon, it will navigate to the home screen.

Step 4 - Add Navigation for Edit Icon

Select the Edit icon and it will write a function, i.e:

Navigate(FlightEditScreen)

On a click of the edit icon, it will navigate to the flight edit screen

Step 5 - Populate View Screen on Item Selection

Select FormView
Set the function for item property i.e. "DataTable1.Selected". This data table exists in the list view form. View get the selected item based on this property.
Once the item property is set, the selected item value appears in the view screen.

Step 5 - Add and Populate Edit Screen on Item Selection

Select and click to add a new screen
Rename the new screen "Flight Edit Screen"
Add an Edit from the Form Section
Add a data source from Form Property section (i.e. List Name)
Select a Form and set the item property to "DataTable1.Selected.
As the item property is set, select the item value to start appearing in the Edit screen

Step 6 - Add a Save icon functionality on the Edit Screen

Select the save icon and write a function on On Select:

SubmitForm(Form1);Navigate(FlightListView);  

It will save the data to SharePoint Online List and redirect the user to the list view screen. The user will get an updated record on the list view screen.

Step 7 - Define navigation from List View Screen

Select the Flight List View screen, followed by DataTable1

Select the first column (i.e. Flight Name)

On Select property, write the below function to navigate to the Flight Display Screen

Navigate(FlightDisplayScreen)  

Step 8 - Save , Publish and Test

Save the application, click file -> Save.
Click save button to save the application
Click the Publish button to publish the application and make it available to other intended audiences.

Press F5 or click the published version of the app to run.

The power apps home screen will execute like this and select for the click first image.

I hope that you enjoyed and learned something new in this article. Thanks for reading and stay tuned for the next article.

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.

SPFx (SharePoint Framework) control is designed to render the web part at SharePoint Online Modern Framework Page.
PowerApps is designed to add data into SharePoint Online List without REST API call.
SharePoint Online List is created to store the data.

PowerApps Form Creation

Step 1 - Navigate to the PowerApps application here.

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

Select Forms

Edit Form

Select the Data Source from the left-hand side; i.e., List Name

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.

Select Mode to New.

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.

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.

Select Title Data card >> set the width in the property as 1024.

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

Add button to form and rename the text “Submit” and select the form

Choose the form “On Select” from the dropdown

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

Select newly added screen2 -> Select insert ribbon -> Select Text

Click HTML Text control.

Select HTML Text control

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.

Select screen1 Form

Select On Success from dropdown

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

yo @microsoft/sharepoint  

Step 16 - Describe SPFx solution artifacts

Provide Solution Name: SPFX_PowerAppsForm

Provide the Target Solution: SharePoint Online

Provide Web Parts Name: SPFX_PowerAppsForm

Provide WebParts Description: SPFX_PowerAppsForm

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.

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

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

npm install --save react-iframe  

Step 18 - Add State and Initialize the Contractor

Add State with ShowModalNew variable.

export interface ISpfxPowerAppsFormState {  
  showModalNew: boolean;  
}  

Create Constant with Close button icon.

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

Add Constructor and initalize the State Variable.

constructor(props: any) {  
    super(props);  
    this.state = {  
      showModalNew: false,  
      };  
  }  

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,

public render(): React.ReactElement<ISpfxPowerAppsFormProps> {  
   return (  
     <div>  
      <DefaultButton id="requestButton" onClick={this._showModalNew} text="Raise Leave Request"></DefaultButton>   
      <Modal  
         titleAriaId="titleId"  
         subtitleAriaId="subtitleId"  
         isOpen={this.state.showModalNew}  
         onDismiss={this._closeModalNew}  
         isBlocking={false}  
        containerClassName="ms-modalExample-container">  
         <div >  
           <span ><b>Leave Request Form  </b> </span>   
           <DefaultButton onClick={this._closeModalNew} className={styles.CloseButton} ><CloseModal/></DefaultButton>  
         </div>  
         <div id="subtitleId" className="ms-modal-body">  
           <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"}  
               width="1024px" height="550px"  
               position="relative"  
               allowFullScreen>  
           </Iframe>  
         </div>  
       </Modal>  
      </div>  
   );  
 }  

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.

.CloseButton     
{    
float: right;    
background-color: #3860b2;    
height: 40px;    
color: antiquewhite;     
  &:hover{    
    background-color: #3860b2;    
  }    
}     

Step 21 - Test Solution locally

Navigate to View -> Integrated Terminal

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, Viva , Teams, Power Platform, Azure, Identity

Build Low-Code and No-Code Solutions i.e. Home , View, Edit Screen with Navigation With PowerApps

Introduction

SPFX webpart with PowerApps Form

Overview