Create A Simple PowerApps Customized Form

Introduction

PowerApps customized form can be used when we need View, Edit, and New mode. All 3 modes can be achieved by designing a single screen. If SharePoint is a connector, publishing the form will add the form to the New button of the SharePoint list and also in edit mode and view mode.

STEP 1

Create a Custom List in SharePoint.

Create a Customized PowerApps Form

STEP 2

From the SharePoint list navigate to PowerApps using Customize forms option.

Create a Customized PowerApps Form

STEP 3

Below is the view when the PowerApps form opens.

Click on Settings.

Create a Customized PowerApps Form

STEP 4

Select Display.

Orientation - Landscape

Set Height and Width of the form.

Create a Customized PowerApps Form

STEP 5

Click on Save.

STEP 6

Drag the Form and add a Label above the form.

Insert -> Label -> drag and fit the label to the form width and height.

Create a Customized PowerApps Form

STEP 7

Select the Label and fill in the background color.

Home -> Fill -> choose the color.

Create a Customized PowerApps Form

STEP 8

Applying background color to form.

Select the form --> Choose Home Tab --> Fill --> choose the color.

Create a Customized PowerApps Form

STEP 9

Applying Layout to the form.

Select the form --> Properties --> Horizontal Layout.

Create a Customized PowerApps Form

STEP 10

Set Datacard Height and Width.

select each Datacard and provide width and height.

Create a Customized PowerApps Form

STEP 11

Add Buttons to the form.

Select Insert tab --> Select button.

Create a Customized PowerApps Form

STEP 12

Apply color to buttons.

Select button --> Fill --> select the color.

Apply font size and font size from Properties.

Create a Customized PowerApps Form

STEP 13

Save button should save the data in the SharePoint list.

Select button --> Onselect --> SubmitForm(FormName)

Create a Customized PowerApps Form

STEP 14

The cancel button should reset the form.

Select button --> Onselect --> ResetForm(FormName),

Create a Customized PowerApps Form

STEP 15

In all the above images we see the is a warning symbol below the label, let's fix that.

Replace the First by Defaults,

Default Formula

If(IsBlank(SharePointIntegration.Selected) || IsEmpty(SharePointIntegration.Selected),First([@'Leave Request']),SharePointIntegration.Selected)

New Formula

If(IsBlank(SharePointIntegration.Selected) || IsEmpty(SharePointIntegration.Selected),Defaults([@'Leave Request']),SharePointIntegration.Selected)

Create a Customized PowerApps Form

STEP 16

Since there is extra space below the button, Let's reduce the height of the from.

Settings ---> Display --> Change Height.

Create a Customized PowerApps Form

STEP 17

Applying color to the date field.

Select Date field --> Advanced --> IconBackground --> Brown.

Create a Customized PowerApps Form

STEP 18

There is a default value in the date field as 12/31/2001.

To remove this value , select the date field --> Advanced --> InputTextPlaceholder --> remove the value (keep it blank).

Create a Customized PowerApps Form

STEP 19

Now Custom Form is ready.

Create a Customized PowerApps Form

STEP 20

Save the Form.

File --> Save

STEP 21

Publish Form.

STEP 22

Navigate to the SharePoint list and go to List settings.

Create a Customized PowerApps Form

STEP 23

Navigate to Form settings.

Create a Customized PowerApps Form

STEP 23

Set PowerApps as default form and click ok.

Create a Customized PowerApps Form

OUTPUT

New Form

Create a Customized PowerApps Form

Edit Form

Create a Customized PowerApps Form

View Form

Create a Customized PowerApps Form

Summary

In this article, we have learned to build a customized PowerApps form.