Customize SharePoint list forms with Power Apps based on conditions

Microsoft Power Apps allows us to customize the default SharePoint Online list form to an attractive one. In this Power Apps tutorial, we will see how to customize SharePoint list forms based on conditions.

Here, in this example, I have a SharePoint Online list named ‘Hotel Reservations‘ having a choice column named ‘Room Type’. This choice column contains choices such as Standard, Deluxe, and Suit.

As per the customization, when the user selects the below room types then some specified symbol will appear. Such as:

• Room type = Standard, then a 3-star symbol will appear
• Room type = Deluxe, then a 4-star symbol will appear
• Room type = Suit, then a 5-star symbol will appear

When a user picks a room type on the above SharePoint customized list form, the symbol changes accordingly. In addition, when the user clicks the camera icon, a camera opens to take the user’s live photo and store it in the attachment column.

Below, we are displaying how the SharePoint list form will appear once it is customized by Power Apps.

Let’s see how to customize a SharePoint Online list form with a step-by-step guide.

Prepared SharePoint List

Here I have created a SharePoint list having the below columns:

Columns	Data type
Guest Name	Single line of text
Email	Single line of text
Contact	Number
Room Type	Choice
Check-in Date	Date and Time
Check-Out Date	Date and Time
Adults	Choice
Children	Choice
Business Justification	Multiple lines of text
Supervisor	Person or Group
Supervisor Contact	Number
Attachments	Attachments

Customize SharePoint list forms with Power Apps based on conditions

Follow the below steps:

• On the SharePoint Online list, from the command bar, navigate to Integrate > Power Apps > Customize forms.

• When you click the Customize forms button, you are redirected to Power Apps, where you can see that it will create a modified form within the Power Apps studio, as seen below:

Change Form Orientation

• As per the requirement, we need to change the Power Apps screen orientation from Portrait to Landscape.
• Go to App Settings > Display > Orientation > Landscape > Apply.

• As a result, we can see the customized form will appear in landscape format.

Add Header to Power Apps Forms

• Now, we will add a header to the above-customized Power Apps form. For this, add a rectangle control to the above Power Apps and place it above the SharePointForm.
• Again, add a Power Apps text label control and insert a text on the Text property for the form. Ex: Hotel Reservation Form. Also, customize the text label’s properties as below:

Text = "Hotel Reservations Form"
Font = Lato Black
Font Size = 35
Text Alignment = Center
Text Color = White 

• I’ve also included another text label with the hotel’s address. In addition, I’ve added a hotel logo using the Power Apps Image control, as shown below:

Display rating control based on dropdown selected value in Power Apps form

• Next, unlock all the data cards and maximize the data card fonts.
• On the Room Type data card, we will add conditions where when the user selects Standard, 3 stars will appear. Similarly, while selecting Deluxe, 4 stars will appear, and while selecting Suite, 5 stars will appear.
• Add 3 stars to the Room type data card to work with this conditional validation and group them. Insert the below expression on the Visible property of the grouped-3 stars.

Visible = If(
    RoomTypeDataCardValue.Selected.Value = "Standard",
    true,
    false
)

Where RoomTypeDataCardValue is the name of the Room type’s dropdown control.

• Similarly, add 4 stars to the Room Type data card and place that above the dropdown control. Again group those 4 stars and insert the below expression on the group’s Visible property as well as the Fill Color.DarkGreenproperty.

Visible = If(
    RoomTypeDataCardValue.Selected.Value = "Deluxe",
    true,
    false
)

Fill = Color.DarkGreen

• Again, add five stars to the Room Type Data card and make them a group and insert the below expression on the group’s Visible property as well as Fill property. As a result, when the user selects the room type as Suit, a 5-star will appear with a different color.

Visible = If(
    RoomTypeDataCardValue.Selected.Value = "Suit",
    true,
    false
)

Fill = Color.DarkRed

• That’s all! We can see that when the user picks Standard as the room type, a 3-star appears, similarly in the case of Deluxe, a 4-star appears, and in the case of Suit, a 5-star appears.

Show/Hide a PowerApps camera control on the SharePoint Customize list form

Here, we will see how to show/hide a camera control on the above SharePoint customized list form to capture the current picture of the user.

For this, the following steps are:

• On the above Power Apps customized form, add a camera icon to the Attachment data card.
• Insert the below expression on the camera icon’s OnSelect property.

OnSelect = UpdateContext({CameraVisible:!CameraVisible})

Where CameraVisible is the name of the update-context variable.

• Add a Power Apps camera control to the attachment data card. Set the context variable name inside the camera control’s Visible property.

Visible = CameraVisible

• Again, insert the below expression on the camera control’s OnSelect property to store the captured picture in a collection with the guest’s name.

OnSelect =  Collect(
    ImageCollection,
    {
        DisplayName: DataCardValue1 & ".jpg",
        Id: GUID() & ".jpg",
        Value: Self.Photo
    }
);
Reset(DataCardValue13);

Where DataCardValue1 is the name of the guest name’s data card value and DataCardValue13 is the name of the attachment Datacard name. And, ImageCollection is the name of the collection to collect the images.

• Now, set the collection’s name (i.e., ImageCollection) in the attachment data card’s Default property.

Default = ImageCollection

That’s it! Let’s save the app and publish it to the SharePoint list. We can see the customized form will be visible in the SharePoint list as shown below from where users can reserve a room for their client with a captured image and attachments.

When we click the save button, the data with the attachments are saved to the SharePoint list as well.

This is how to design a customized SharePoint list form using Power Apps with conditions and camera control.

Conclusion

In Power Apps, we saw, how easily we can change the form orientation from Portrait to Landscape. And also, how to add a header text and image in the Power Apps form.

I have also shown you how to show ratings based on drop-down selection conditions inside a customized SharePoint list form. Finally, we saw, how to show/hide camera control based on the click of an icon inside the Power Apps form.

Now, I hope you have learned, how to customize a SharePoint Online list form based on conditions in Power Apps.

You may also like:

• Alternate Row Color in Power Apps Gallery
• Power Apps Form field validation on submit
• Power Apps CRUD Operations
• Power Apps Rich text editor control