Create your First form using Microsoft PowerApps in SharePoint Online

In this PowerApps tutorial, we will discuss What is Microsoft PowerApps? How you can create your first form or app using Microsoft PowerApps? Where we can run the PowerApps?

We will also discuss how to create a PowerApps Form in an existing SharePoint Online list. How to create a blank App using Microsoft PowerApps from powerapps.microsoft.com.

What is Microsoft PowerApps?

PowerApps is a service or an interface design tool used to built and share a business application that connects to your data and work across the web and mobile, using any device within a few minutes.

Check Out Microsoft PowerApps and Flow Training Course (Lifetime Access)

In the other word using Microsoft PowerApps, we can create a form and screen for the user to perform a various operation like create, update connects.

The beautiful thing about Microsoft PowerApps is for developing an application using PowerApps coding knowledge is not required. It is completely an out of box featured integrated with SharePoint.

We can create a PowerApps form from a SharePoint Online existing list. Here I will show you how to create a registration form using Microsoft PowerApps which can save the data in the SharePoint list.

How to create a PowerApps form in SharePoint Online Modern List?

To create a form using Microsoft PowerApps in a SharePoint Online existing list follow the below steps.

I have created one list in SharePoint Online. In SharePoint Online Modern experience list or document library we can find out the PowerApps option in the command bar. From the PowerApps dropdown click on Create an app.

microsoft powerapps
How to create an Microsoft PowerApp in an existing List

Now we can able to see a Create an app page. Give a name for the application. Then click on Create.

PowerApps sharepoint list
Display Create PowerApps page

Wait for Some time our application is building.

customize sharepoint list forms with powerapps
Building PowerApps

One popup “Welcome to PowerApps Studio” window will come asking for “See a preview of this app” and “Skip“. If we want to see how our application looks then click on Preview this app otherwise click on Skip.

microsoft powerapps tutorial
PowerApps Welcoming Page

When clicking on Skip we can able to see the designer page. Where we can customize our application form. In the PowerApps designer page, we can able to find out various option to customize our form.

Under the Insert option, we can able to see different control like a button, textbox, etc. We can change the look of the form we can change the background color font size. One more thing by click on the play button we can able to see Preview of Application. We can add the rule and action in the designer page.

microsoft powerapps examples
PowerApps Designer Page

After all the customization done for save the designed form click on File. We will get the below page.If we want to change the logo or icon of application then go for “App settings” otherwise click on Save.

microsoft powerapps training
PowerApps Change Icon

Here I have changed the icon and change the color of the icon. Then I have added some description and then click on Save.

microsoft powerapps download
PowerApps Change Icon Color

To save the new icon and form click on Save. We can able to see “Publish“. To publish the PowerApps click on Publish.

powerapps tutorial
Publish the PowerApps

After our app published one more page will come asking for “Publish this version“.

powerapps examples
Publish this PowerApp Version

After successfully the app is saved it will ask for “Share this app“. If you want to share this app with another click on “Share this app

powerapps microsoft
Sharing PowerApp with external user

Here one box is there where we can enter the name, email address of user. Click On the “Save

powerapps in sharepoint
Share PowerApps with External user

Below page is displaying the app details like Owner name, Created date and timing, modified date and timing.

microsoft powerapps
 PowerApps Details

When we click on Apps we can able to see all the PowerApps is created for particular site.

microsoft powerapps tutorial
Display all the PowerApps Created in the site

Open the list in which we created the PowerApps. Click on Open to use the PowerApps.

powerapps sharepoint online
Displying PowerApps in SharePoint List

When click on Open we can able to see the new icon which I have changed.

microsoft powerapps in sharepoint
Open the PowerApps from SharePoint List

Now we will get the form which we designed using PowerApps. I have added some item to the list.

microsoft powerapps training
PowerApps add new item

Our item is added to the form and list.

microsoft powerapps
Saved item in PowerApps

Open the SharePoint list click on “All items”.

microsoft powerapps tutorial
PowerApps form item displaying in the List

When Click on all items we can able to see all the item including the item which I have added using the form to the list.

microsoft powerapps examples
 PowerApp form item Save to the SharePoint list

Develop PowerApps form from PowerApps.com

We can devlope the PowerApps directly from “PowerApps.com”.

Open the “PowerApps.com” site. Click on “GET STARTED FREE”.

sharepoint powerapps
Devlope an PowerApps From PowerApps.com directy

Now we will get a Sign up page. Give the “Logged In Name“. By using the “Logged In Name” we can use our new PowerApps from any device like mobile and tablet.

powerapps examples
PowerApps SignUp Page

Now we can able to see Homepage of PowerApps. Go for Apps.

In the page we can able to see below components of PowerApp.

  1. Home
  2. Learn
  3. Apps: In Apps option we can able to see all the application which we have created.
  4. Create
  5. Date
  6. Business Logic
  7. Notification: We can get any notification from PowerApps here.
microsoft powerapps in sharepoint
PowerApps HomePage

Go for Apps Then CLick on “Create an Apps”. Then select the Canvas App. For Model-driven app Data model is required. I have created a Canvas App. Here we can able to see all the PowerApps Application is created.

microsoft powerapps training
Create An Canvas App Of PowerApps

Here we can able to see diferent option to create an New PowerApp.

SharePoint, Dynamic 365, One Drive For business, Salesforce etc. Here I have selected the SharePoint. So I have clicked on Phone Layout of SharePoint.

microsoft powerapps download
Create a PowerApps In SharePoint existing Data

After clicking on SharePoint “Phone Layout”. One page will come and the for “SharePoint site URL”. Give the SharePoint site URL and Click on GO .

microsoft powerapps review
PowerApps Connect to SharePoint Site

Now we can able to see all the List of the SharePoint site. Choose one list which list item you want to display in the PowerApp form. I have choose “StateInTheCountry”. Then click on Conect.

microsoft powerapps templates
Choose a List In PowerApps

Now Wait for Some time our App is building. After building the App one popup window will come. The Popup window will ask “You want to customize your form or Preview the form” like when we want to create an app in the existing list. Click on “Skip“. To preview the App Click on the right side symbol which is highlighted.

microsoft powerapps review
PowerApps Preview

Below one is My PowerApp form Preview form. Our PowerApp form look like below. When I have Clicked On “>”.

powerapps samples
PowerApps Preview Page

We can able to see all details of the Particular item. Title, CapitalOfTheState, Population, FamousFor.

powerapps microsoft
PowerApps Display each item

To change the Page Layout Go for “View” then “Datasource” then Click on “BrowseGallery”.

powerapps in sharepoint
Change PowerApps form Layout

We able to see “Layout“. Here we can change the “Layout“. I have selected “Layout” Title, Body and Subtitle. Now we can able to see in Body “Population“. We can change to Population to “title”. We can display title in the “Body”.

microsoft powerapps
PowerApps Page 

When we select on Particular item In the fx we can able to see “ThisItem.Title”. Click on Colour and we can change the all title item.

customize sharepoint list forms with powerapps
Change PowerApps form items

We can change Details form Layout. To change the Details form layout Go to “View” then “Datasource”. Then Select the “Details Form1”. We can disable Some item which I do not want to display in the form. I have disabled the “Famous for”. So it is not showing in the form.

powerapps samples
Disable Item in PowerApps form

Now I have enable Created, Created By, Modified, Modified By show it is showing in the form. I want to Show the “Modified By” in the Top So I have drag the “Modified by” option to Top.

microsoft powerapps templates
PowerApps Change Sequence of items 

When I went for Preview and Edit Items we can able to see Title, CapitalOfState,Population,FamousFor and Attachments. I donot want to display all the field in the edit screen.

microsoft powerapps tutorial
PowerApps EditScreen

So for disable the edit screen item Go for “View“, “DataSource“. Then Click on “EditForm1”. I have changed the Layout structure from Vertical to Horizontal. In the field I have disabled all the fields except “Title” and “Capital of State”.

microsoft powerapps examples
Change Edit Form look in PowerApps

When we go for Preview and try to Add New Item we can able to see only “Title” and “CapitalOfTheState” field.

microsoft powerapps tutorial

Add item In PowerApps form
  

To change the heading of page select the Heading and in the Fx change the name. 

microsoft powerapps in sharepoint
Change heading of the Form

Now all things done for save the App go for file. For Save the App follow the above process which I have explained in “Create an PowerApps” in SharePoint existing List.

To Open the App in Your Mobile or Tablet or any other device, Install the “PowerApp” from PlayStore. Give the Email id which we have given when developing the PowerApp. Now enjoy the App in Your mobile with in a few second.

How to Customize an existing SharePoint Online List form using Microsoft PowerApps?

Now we will see how to customize the existing List form using PowerApp. Below one is My SharePoint list Morden look and feel. In the Top we can able to see “Customize forms” below “PowerApps”. Click on Customize form.

powerapps tutorial pdf
Customize the SharePoint List forms using PowerApps

In the one more way we can see customize the existing form. Go to “List Settings” then go for “Form Settings” then click on “Customize in PowerApp”

powerapps in sharepoint online
PowerApps Customize List Form

When we have Clicked on “Customize in PowerApps” or “Customize Forms”, we can directly reached to PowerApp designer form. In the designer page we can able to see by default list form design. Here we can customize our list form. We can change the look and able to add the controls. We can also able add the rule here. 

powerapps in sharepoint online office 365
Change List formTheme Using PowerApps

To see the new form design in Our SharePoint existing list Save the Form. To Save the form go for File then Click on Save. One small page will come with displaying “Saving to PowerApps”.Then Click on “Publish To SharePoint”.

Now we can able to see the Save message that the customize form saved to your existing list.

sharepoint powerapps
The PowerApps form Save

Open the SharePoint site list in which we customized the form. When we want to Edit item and Add more item we can able to see the new look which we had changed in the PowerApp. 

microsoft powerapps in sharepoint
SharePoint List form

For change, the Size of form goes to File. Click On “App settings’. Go for “ScreenSize + Orientation” We can able to see Orientation and Size Option. I have change the Orientation to “Landscape” and Size to “Large”.

Then Clck on “Apply”.

microsoft powerapps
Change PowerApps form Size

Now we can able to see the form in Landscape and large size when we want to add new item to the List. 

microsoft powerapps tutorial
SharePoint List Form In Big Size

Now we want to display the field in two column. Go the “SharePoint Form1” then Select the “Properties”. Select the Data then ‘DataSource” page will come. In the Snap to Column, I have selected 2. So my fields are displaying in two column like below screen. We can change the Layout also from Vertical to Horizontal. We can disable the fields which we do not want to display in the Forms.

microsoft powerapps examples
PowerApps Form displaying in multiplecolumn

The below page actual like a view. The “FormScren1” is a view how our form look like we can not add the control When we Slect the “FormScreen1”.

microsoft powerapps templates
PowerApps View Form

We can add the control or any customization we can do when we select the “SharePointForm1”.

microsoft powerapps in sharepoint
PowerApps Add Control into form

To Add a Button Control Click on “Insert” then select the “Button”. Now Our “button Click” is added to the Form. I want to customize the form in such a way that when user click on Button Click all the item will saved in Our SharePoint List.

powerapps ebook
Add a button in PowerApps Form

To add the rule in the button Click “OnSelect” In the above, we can able to see one “Fx” box. We can able to See the Button1 is added to the “left side navigation”. In the “Fx box”  we can add the Rule. I have Added “SubmitForm(NewSharePointForm)”.SubmitForm is a built-in method.

I have chnage the button click name from “Button” to “Submit”. Then Save the form.

microsoft powerapps training
PowerApps Add Button Click

Open the form in “SharePoint List”. Add items and Click on Submit. We can able to see all items saved in the “SharePointList”.

How to Attach PenInput In the PowerApp Form:

I want to design a form like below using PowerApp.So for design a form like below Go for some Steps.

powerapps tutorial for beginners
Add PenInput to PowerApps form

Go for “PowerApps.com” then”Create an App”. Select the Canvas App. Choose the “Blank app” and Click on “Phone Layout”.

powerapps tutorial pdf
Create a Blank App

Now our PowerApp designer page will open. Then One popup window will come asking for “Do you want to preview the App” or “Skip”. Click on “Skip”. The designer page will open. Select the “Screen1”. Choose the “Fill” from the drop-down.  In the Fx box which colour we will put our form colour will chnage. Here I have changed the colour to Pink.

powerapps demo
PowerApps Change Form Color

To Add a label in the form Select “Insert” and click the “Label”.

microsoft powerapps
PowerApps Insert label

I have changed the Text to “Registrtaion Form”.

microsoft powerapps tutorial
Change PowerApps Label text

I want to set the text to center and Bold and Increease the letter Size. Below the Home We can able to see one option for “Alignment”. I have set the Text to “Center” alignment. Bold the text letter and chnage the Letter size 21 to 40.

microsoft powerapps examples
Change aligenment PowerApps Label Text

I have change the bydefault name of Label. Because when we want to add the rule it will be easy to use for us. I have give the Label name as “Label_RegistrationForm”.

microsoft powerapps in sharepoint
Change PowerApps Label Name

I have added one more Label and change the Input text to “Full Name”. I have changed the label name to Label_FullName.

microsoft powerapps training
Add  PowerApps labels

Now I have added one “Text Input” from the “Text”. Changed the Text Input Name to Full_Name.

microsoft powerapps download
PowerApps add Text Inputs

Like full name label and text box, I have added one more label and a text box. I have changed the label name to Email. In the Email text box, I have added some rule. I want to display when the user put wrong email address it will display in red color.

When a user adds correct email id then it will display in black color. So I have select the “color” from the dropdown option then add the rule. I have Added IsMatch inbuilt function here. In the left side, we can able to see I have changed all the text box and label name. I have put the rule “If(Ismatch(EmailAddres.Text,Email)Black,Red)” .

Add  PowerApps labels
PowerApps Add rule in TextBox

In the Preview when we give the wrong “Email” it is displaying in red colour.

powerapps ebook
Preview PowerApps Form

I have add one label then add one Slider from “Controls”. I have changed the Label name to Label_Age.

microsoft powerapps pdf
Add PowerApps Slider

Set the Slider default value as 0.

microsoft powerapps review
Slider default value in PowerApps

Set the Min value 0 and Max value 100.

powerapps tutorial pdf
Set Min and Min Value In PowerApps Slider

I want to display when the age of person is below 18 then the slider will display in red colour when the user age is more then 18 displaying in White colour. I have chosen the “HandelFill” from the dropdown and Add the rule “If(Age >=18,White,Red)”.

microsoft powerapps pdf
Add Slider Rule in PowerApps form

When we preview the PowerApp form We can able to see blue boarder in the Slider. I want to change the color completly red.

powerapps tutorial
Preview Of PowerApp

So chnage the colour to completly red choose the “ValueFill” from the dropdown. In the Fx I have added the rule to “Age.HandelFill”

powerapps ebook
Change the Slider handel colour

I want to see the age value in the “Label_Age”.

So I have added in the Fx “Age:”&Age . Now we can see the integer value in the Age.

powerapps demo
PowerApps Display value In slider

We are going to add one Label and display one message that “Put the Signature Here” and add one “Pen input”. In the left side we can able to see I have changed label name and Input control name.

powerapps tutorial for beginners
Add Pen input to PowerApp form

I want to chnage the pen input colour to white so I have select the Fill from the dropdown option and put white colour. So our PenInput box color automatically changed.

powerapps submit form to sharepoint list
Change PowerApps PenInput Colour

I have Added one Button. Select the fill from the “dropdown” and change the colour to black.

sharepoint powerapps forms
PowerApps Add Button Control 

From Icon I have added one Reload icon.

powerapps examples
Add icon in PowerApps Form

To change the Reload Icon color choose color and in the Fx add Black colour.

powerapps microsoft
Change PowerApp icon colour

Now I have added the rule in the Reload OnSelect.

“Reset(Full_Name);Reset(EmailAddress);Reset(Age);Reset(Signature)”.

powerapps in sharepoint
Add icon rule in PowerApps

To add the Hint text in the text box select the Hint Text from the dropdown. In the First text box I have added the hint as “Put your name here”  and email text box I have added “Put Your Emil Address here”.

powerapps tutorial for beginners
Add Hint Text in PowerApps Form

I have added the Toggle from the control and set the True Text(from the dropdown) “Yes” and false text No.

powerapps tutorial pdf
Add Toggle in PowerApps form

I have added one more label and set the text “Email?” We should remember the email should not be overlapping to Toogle.

microsoft powerapps
Add PowerApps Label

For Toggle, select Default from the drop-down and set value false.

Finally, our PowerApps form look like below and for save the form go to file and save the form.

microsoft powerapps tutorial
PowerApps Preview

Where we can Run Our PowerApps?

Where can we run our PowerApps? We can run our PowerApps from the below options.

  1. SharePoint List
  2. On the mobile device
  3. On the web

You may like following PowerApps tutorial:

Conclusion

In this sharepoint powerapps forms article we were discussed below things:

  • What is Microsoft PowerApps?
  • How to create a new PowerApps form in an existing SharePoint Online List?
  • How to customize an existing list form for example change the Theme of List form using Microsoft PowerApps?
  • How to create an PowerApps form directly from the browser?
  • How to add the control and rule in PowerApps forms?
  • How to Use the PowerApps form or app in Mobile?
  • How to create an blank app or form and add Pen input in Microsoft PowerApps?
  • Where we run the PowerApps forms?
  • >