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.
SharePoint Online tutorial contents:
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.
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.
Now we can able to see a Create an app page. Give a name for the application. Then click on Create.
Wait for Some time our application is building.
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.
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.
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.
Here I have changed the icon and change the color of the icon. Then I have added some description and then click on Save.
To save the new icon and form click on Save. We can able to see “Publish“. To publish the PowerApps click on Publish.
After our app published one more page will come asking for “Publish this 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“
Here one box is there where we can enter the name, email address of user. Click On the “Save“
Below page is displaying the app details like Owner name, Created date and timing, modified date and timing.
When we click on Apps we can able to see all the PowerApps is created for particular site.
Open the list in which we created the PowerApps. Click on Open to use the PowerApps.
When click on Open we can able to see the new icon which I have changed.
Now we will get the form which we designed using PowerApps. I have added some item to the list.
Our item is added to the form and list.
Open the SharePoint list click on “All items”.
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.
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”.
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.
Now we can able to see Homepage of PowerApps. Go for Apps.
In the page we can able to see below components of PowerApp.
- Apps: In Apps
optionwe can able to see all the application which we have created.
- Business Logic
- Notification: We can get any notification from PowerApps here.
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.
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
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“ .
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.
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.
Below one is My PowerApp form Preview form. Our PowerApp form look like below. When I have Clicked On “>”.
We can able to see all details of the Particular item. Title, CapitalOfTheState, Population, FamousFor.
To change the Page Layout Go for “View” then “Datasource” then Click on “BrowseGallery”.
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
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.
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.
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.
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.
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
When we go for Preview and try to Add New Item we can able to see only “Title” and “CapitalOfTheState” field.
To change the heading of page select the Heading and in the Fx change the name.
Now all things
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.
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.
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”
When we have Clicked on “Customize in PowerApps” or “Customize Forms”, we can directly
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.
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.
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”.
Now we can able to see the form in Landscape and large size when we want to add new item to the List.
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.
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”.
We can add the control or any customization we can do when we select the “SharePointForm1”.
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.
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.
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.
Go for “PowerApps.com” then”Create an App”. Select the Canvas App. Choose the “Blank app” and Click on “Phone Layout”.
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.
To Add a label in the form Select “Insert” and click the “Label”.
I have changed the Text to “Registrtaion Form”.
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.
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”.
I have added one more Label and change the Input text to “Full Name”. I have changed the label name to Label_FullName.
Now I have added one “Text Input” from the “Text”. Changed the Text Input Name to Full_Name.
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)” .
In the Preview when we give the wrong “Email” it is displaying in red colour.
I have add one label then add one Slider from “Controls”. I have changed the Label name to Label_Age.
Set the Slider default value as 0.
Set the Min value 0 and Max value 100.
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)”.
When we preview the PowerApp form We can able to see blue boarder in the Slider. I want to change the color completly red.
So chnage the colour to completly red choose the “ValueFill” from the dropdown. In the Fx I have added the rule to “Age.HandelFill”
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.
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.
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.
I have Added one Button. Select the fill from the “
From Icon I have added one Reload icon.
To change the Reload Icon color choose color and in the Fx add Black colour.
Now I have added the rule in the Reload OnSelect.
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”.
I have added the Toggle from the control and set the True Text(from the dropdown) “Yes” and false text No.
I have added one more label and set the text “Email?” We should remember the email should not be overlapping to Toogle.
For Toggle, select Default from the drop-down and set value false.
Finally, our PowerApps form look like below and for
Where we can Run Our PowerApps?
Where can we run our PowerApps? We can run our PowerApps from the below options.
- SharePoint List
- On the mobile device
- On the web
You may like following PowerApps tutorial:
- Create PowerApps App for SharePoint List
- PowerApps show hide fields based on Yes/No column
- PowerApps update data table columns
- How to use PowerApps Table() Function
- PowerApps gallery control filter example
- PowerApps Functions Tutorial
- Export PowerApps from one Tenant to another Tenant
- How to create and use PowerApps Collection
- How to create tabs in PowerApps in SharePoint Online List Form
- PowerApps navigate between screens
- PowerApps: Create a navigation menu using the Gallery Control
- Customize SharePoint online list forms like new, edit and display form using Microsoft PowerApps
- PowerApps Employee Engagement Survey Example
- PowerApps upload file to SharePoint Online document library using Microsoft Flow
- 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?
I am Bijay from Odisha, India. Currently working in my own venture TSInfo Technologies in Bangalore, India. I am Microsoft Office Servers and Services (SharePoint) MVP (5 times). I works in SharePoint 2016/2013/2010, SharePoint Online Office 365 etc. Check out My MVP Profile.. I also run popular SharePoint web site EnjoySharePoint.com