Power Apps: Customize A SharePoint List Form
Overview:
In this blog, we take an in-depth look into how to set up and customize SharePoint List Forms using Power Apps. Starting with the creation of a SharePoint list tailored for job interviews, we move onto integrating this list with Power Apps. The guide covers detailed steps on adding an Edit Form, customizing it, adjusting layout positions, and incorporating unique features like replacing a text input with a rating control. Special attention is also given to data validation, particularly ensuring that email inputs adhere to the correct format, ensuring data integrity and user experience.
Let's set up a SharePoint list for Job Interviews with these columns
- Title (Single Line of Text)
- Candidate’s Full Name (Single Line of Text)
- Candidate’s Phone Number (Single Line of Text)
- Candidate’s Email Address (Single Line of Text)
- Rating (Number)
- Interview Notes (Multiple Lines of Text)
- Interviewed By (Person or User)
This setup will help you keep track of job interviews and candidate information effectively.
After this connect the share point list with power app
After connecting your SharePoint list to Power Apps, you can add an Edit Form and customize it to manage and update your SharePoint data more efficiently. Here’s how to do it:
In Power Apps
- Open your Power App project.
- Make sure you’re on the screen where you want to add the Edit Form.
Insert Edit Form
- From the left-hand menu, click on “Insert.”
- Choose “Edit form” under the “Forms” section.
- Select your SharePoint list as the data source for the form.
Customize the Edit Form
- With the Edit Form selected on your screen, you can now customize it to display and edit your SharePoint list data.
- Add labels and input fields to the form to display the columns from your SharePoint list.
- Adjust the form layout, style, and design as per your requirements.
Position and Resize
On the right, you’ll find settings to move and size the Edit
Here’s how to do it:
X: Header_label.X.
Y: Header_label.Y+Header_label.Height
Width: Parent.Width.
Height: Parent.Height-Header_label.Height-100
After this connect form with share point list
And change the form Columns
Columns: 2
Switch the Text Input to Rating Control
Normally, a number column in a SharePoint list displays as a text input in the form. To change this, follow these steps:
Remove Text Input
Delete the text input control that’s currently displaying for the “Rating” column in your SharePoint list form.
Replace with Rating Control
Now, insert a rating control in place of the text input. First, select the existing text input (e.g., DataCardValue8), and then click the icon to unlock it.
By following these steps, you can easily replace the text input with a rating control for the “Rating” column in your SharePoint list form.
Give the same name to the rating control
To position the Rating Control where the Text Input used to be
Horizontal Position (X)
Use the same X value as the Text Input. This will keep the Rating Control in line with the previous horizontal placement.
Vertical Position (Y)
Likewise, set the Y value to match the Text Input’s Y value. This ensures the Rating Control is in the same vertical spot as the Text Input. By doing this, you’ll place the Rating Control exactly where the Text Input was on your app’s layout.
X: 30
Y: DataCardKey7.Y + DataCardKey7.Height + 5
Then change the Update property to this value.
Value(DataCardValue8.Value)
Also, use this code in the Default property to ensure the property rating appears when editing an item.
Parent.Default
And now this time to fix the other error
Insert a Button
- Click on “Insert” from the left-hand menu.
- Choose “Button” under the “Input” section
And change the Text
Text: Submit
OnSelect:
// Check if the input in the "Candidate Email" field resembles a valid email address.
If(
!IsMatch(DataCardValue11.Text, Match.Email),
// If the input is not in a valid email format, show an error message to the user.
Notify("Invalid email address. Please enter a valid email.", NotificationType.Error),
// If the email is valid, proceed to submit the form.
SubmitForm(Form2)
)
To make sure that the emails entered in the SharePoint list form are correct and follow the format [email protected], we need to validate the email data.
Here’s how we can do it:
Email Validation
We want to check that the email entered is in the right format. It should look like “[email protected].”
Validation Action
- If the email format is not correct, we need to take an action.
- We can show a message to the user indicating that the email they entered is invalid
Form Submission
- f the email is valid, we can proceed to submit the form as usual.
- By implementing this validation, we ensure that only properly formatted email addresses are accepted in our SharePoint list form
After this we need add one more code on form OnSuccess
Notify("Save Data Successfully",NotificationType.Success);ResetForm(Form2)
Boost your Customize forms with email checks and easy submissions. No errors, just happy users! It’s the smart way to keep data clean and users satisfied.
Reference:
Conclusion:
Customizing SharePoint List Forms in Power Apps provides an opportunity to enhance data management and user experience. With the right steps, as illustrated in this guide, one can seamlessly optimize forms, ensuring easy data entry, effective validation, and efficient form submissions. Incorporating these practices into your Power Apps design can revolutionize data collection, paving the way for clean data and satisfied users. If you’re utilizing SharePoint and Power Apps, integrating these customization techniques is the key to a more refined and effective workflow.
Additional Reads:
For readers keen on deep-diving into Power Apps, the article recommends two intriguing reads:
Need Help with SharePoint Forms in Power Apps?
Facing challenges with customization? Our experts are here to guide you. Share feedback, get assistance, and enhance your Power Apps journey.
