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.

STEP 2

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

STEP 3

Below is the view when the PowerApps form opens.

Click on Settings.

STEP 4

Select Display.

Orientation - Landscape

Set Height and Width of the 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.

STEP 7

Select the Label and fill in the background color.

Home -> Fill -> choose the color.

STEP 8

Applying background color to form.

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

STEP 9

Applying Layout to the form.

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

STEP 10

Set Datacard Height and Width.

select each Datacard and provide width and height.

STEP 11

Add Buttons to the form.

Select Insert tab --> Select button.

STEP 12

Apply color to buttons.

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

Apply font size and font size from Properties.

STEP 13

Save button should save the data in the SharePoint list.

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

STEP 14

The cancel button should reset the form.

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

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)

STEP 16

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

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

STEP 17

Applying color to the date field.

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

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).

STEP 19

Now Custom Form is ready.

STEP 20

Save the Form.

File --> Save

STEP 21

Publish Form.

STEP 22

Navigate to the SharePoint list and go to List settings.

STEP 23

Navigate to Form settings.

STEP 23

Set PowerApps as default form and click ok.

OUTPUT

New Form

Edit Form

View Form

Summary

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