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.

Customize SharePoint list forms with Power Apps based on conditions

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:

ColumnsData type
Guest NameSingle line of text
EmailSingle line of text
ContactNumber
Room TypeChoice
Check-in DateDate and Time
Check-Out DateDate and Time
AdultsChoice
ChildrenChoice
Business JustificationMultiple lines of text
SupervisorPerson or Group
Supervisor ContactNumber
AttachmentsAttachments
Power Apps customized SharePoint form

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.
Power Apps customize SharePoint form
  • 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:
Power Apps customized SharePoint List form

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.
PowerApps Customized SharePoint list form
  • As a result, we can see the customized form will appear in landscape format.
PowerApps customize SharePoint form orientation

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 
PowerApps customize SharePoint form
  • 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:
Power Apps customize SharePoint list form

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.

Power Apps customized form conditional validation
  • 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
Power Apps sharePoint list conditional validation customization
  • 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
Power Apps customize SharePoint form using conditions
  • 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.
See also  Registration form design in HTML and CSS with code

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.

Power Apps customize SharePoint form using camera control
  • 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
Power Apps customized SharePoint form
  • 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.

Attach camera control to Power Apps customized form
  • Now, set the collection’s name (i.e., ImageCollection) in the attachment data card’s Default property.
Default = ImageCollection
SharePoint customized form in Power Apps
SharePoint customized form in Power Apps

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.

SharePoint customized form in Power Apps based on condition

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.

See also  Power Automate toLower() Function [How to Use]

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:

>