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.
M365 - List Page
                         Figure 1 M365 – List Page

Step 2:

  • To customized the created list form click on-

Integrate

 M365 - Integrate Option
Figure 2 M36Integrate Option

Power App

M365 - Customized Option
Figure 4 M365 – Customized Option

Customized Forms

M365 - Customized Option
Figure 4 M365 – Customized Option
  • 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.
M365 - PowerApp Form
                                                               Figure 5 M365 – PowerApp 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
M365 – Data
                 Figure 6 M365 – Data
  • Click on Add data and search for SharePoint connector and click on SharePoint connector.
M365 - SharePoint Connector
                 Figure 7 M365 – 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
M365 - Site url
                        Figure 8 M365 – Site url
  • After connection we can see our list field appear in the PowerApp form.
M365 – 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
M365 – Data Source
  • Fields where we can manage the form fields such as add fields , edit fields.
M365 - Form Fields
M365 – Form 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.
M365 - Form Fields
M365 – Form Fields
  • We can set the visiblety option through Visible option
  • We can set the height and width of the form.
M365 – Form Field

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.
M365 – DataCard Fields

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.
M365 - Insert Option
M365 – 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.
M365 – Input Field

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.
M365 - Media Fields
M365 – Media Fields

Step 8:

We can insert

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

Step 9:

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

Step 10:

  • We can insert custom component such as Header Component , footer Component through Custom option in PowerApp form.
M365 - Custom Fields
M365 – Custom Fields
  • After all the customization we can preview the form by clicking on Play Button.
M365 - Preview App
M365 – Preview App

Hope you understand the customization of the form.

Thanks!

Have a nice day 🙂

Shruti Wani

Microsoft365 developer at OS InfoTech.

You may also like...

2 Responses

  1. Yogesh Meher says:

    Good article Shruti. Thanks for sharing this Sharepoint article. Keep it up 👍👍

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers like this: