M365 SharePoint Online – Customized List form using PowerApp

Hello Everyone

In the last article we discuss about How to create list in SharePoint , How to insert item in SharePoint list.

Today we are going to discuss about how to customized List form using PowerApp.

Introduction:

• PowerApp is a service that lets you build business app that run in a browser or on a phone or tablet.
• PowerApp is used for –
• To build customized form
• Build individual form with database connection.

To customized forms:

Step 1:

• Open list which created in out site.

Step 2:

• To customized the created list form click on-

Integrate

Power App

Customized Forms

• After clicking on this option the form will open in PowerApp. During loading process it automatically connect to list schema and out of the box form.

Step 3:

We have to connect the list to the PowerApp through SharePoint connector.

Click on

•  Data on the left hand side of PowerApp

• Click on Add data and search for SharePoint connector and click on SharePoint connector.

• After Selecting SharPoint connector select the list which we want to connect with PowerApp
• We can select the list by giving the site url

• After connection we can see our list field appear in the PowerApp form.

Step 4:

• On the right hand side we can see the properties of the form
  • Data Source is the list name where we connect our PowerApp form

• Fields where we can manage the form fields such as add fields , edit fields.

• We can change the columns of the form from Column option
• We want the form in vertical format then we can change the layout of the form from Layout option.

• We can set the visiblety option through Visible option
• We can set the height and width of the form.

Step 5:

• On the left hand side of the form we can see the screen and form.
• In Form we can see the fields that field called as DataCard.

Step 6:

• We can insert the
  • Label shows values such as text , number , dates or currency.
  • Button lets users click or tap to perform an action
  • Text add different type of control such as text and pen input .
• in the form through Insert option.

• We can insert the
  • Radio button Lets user choose one option from set of two ormore choices.
  • Pen input Lets user draw , erase, and highlight areas of the image.
  • Drop Down Lets user choose one item from an expandible list of option.
  • Date picker Lets user pick a date from calender.
  • List Box Lets user one or more items from a list.
  • Check Box Lets user specify a value of true or false by selecting or clearing.
  • Toggle Allow user to switch a selection on or off.

Step 7:

We can insert

• Image Display image from a file , Data Source or other Source.
• Camera Lets user take photos from device camera.
• Barcode Scanner scan barcodes , QR code etc.
• Video a video player for user to play video from file ,you tube.
• Audio a audio player for user to play audio clip from file or a recording from your app.
• Microphone Lets user record the audio clip.
• Add picture Lets user upload image file through your app.

Step 8:

We can insert

• Charts to show values in vertical bars in a two dimensional graph.
  • Column Chart
  • Line Chart
  • Pie Chart

Step 9:

• We can inert icon in PowerApp form through Icons option.

Step 10:

• We can insert custom component such as Header Component , footer Component through Custom option in PowerApp form.

• After all the customization we can preview the form by clicking on Play Button.

Hope you understand the customization of the form.

Thanks!

Have a nice day 🙂