Skip to main content

Customize New Form, Edit Form, And Display Form In Modern SharePoint Page Using PowerApps

Overview
Nowadays, people are using Modern SharePoint Pages for their sites. Earlier, when we were using the classic layout, it was very easy for the end-users to inject the JavaScript code within the page and design a new form, edit a form and display the forms. With the modern SharePoint pages, we can’t inject JavaScript and customize the OOTB form. In order to customize the Modern SharePoint Form, we need to use the PowerApps.
Let’s get started with the customization using PowerApps.
Problem Statement
We have a Holiday List to apply for the leave. The list has the following columns, as shown in the below screenshot. We want to customize the form for the holiday list.
Let’s get started.
Step 1
Open the List and from PowerApps, select "Customize Forms".
Step 2
It will redirect you to PowerApps Studio.
Step 3
The first important step we need to perform is to uncheck the option “Snap to Grid”.
The “Snap to Grid” option is very important while you are customizing a very complex form. Here, you can select the fields based on your requirement.
Step 4
Now, let’s change the size of the canvas. To change the screen size, click on the File menu.
From "App Settings", select Screen size.
We will select Portrait mode with Large size.
Based on the requirement, we can select the Landscape orientation too.
Step 5
Now, let’s edit the card. In PowerApps, every field is considered as a card.
A card has the following four default items.
  • Star Visible
  • Error Message
  • Data Card Value
  • Data Card Key
   
To edit any property of the card, first, we need to unlock the card.

To edit the card, select any card. From advanced, click "Unlock to change properties".
Step 6
We have modified the form based on our requirement. Let’s apply the background color for the form.
Step 7
Once the form is created successfully, we need to set the default mode for the form.
In order to do that, select the Form. From Properties, select Default Mode as New, so whenever you click on the New button, it will open your newly customized form.
Step 8
Once the form has been created, it is time to save and publish our changes.
Save the PowerApps form and publish the changes.
Step 9
Now, let’s test the form. Click on the "New" button. It will open the following New Form.
In the same way, the following screenshot shows the Edit mode of the form. 
The below screenshot represents how a form is displayed.
This is how we can customize our modern SharePoint Forms.
Conclusion
This is how we can customize our New, Default, and Edit form in modern SharePoint page using the PowerApps approach without writing a single line of the code. Isn’t it amazing? Stay connected with me for more amazing articles!
Happy SharePointing!!

Comments

Popular posts from this blog

How to partition or split DataTable in C#?

Today we will discuss how we can divide or split a very large data table into fixed size of chunks? Scenario: Suppose there is a data table which has 1000 Rows. When you perform for each loop on data table and read each row at that time it will take too much time. If we devide 1000 Rows datatable into 10 fixed sizes (e.g. 100 Rows) datatable, It will take less time. Let's check how to achieve it. Here is a code. private static List<DataTable> SplitTable(DataTable originalTable, int batchSize) { List<DataTable> tables = new List<DataTable>(); int i = 0; int j = 1; DataTable newDt = originalTable.Clone(); newDt.TableName = "Table_" + j; newDt.Clear(); foreach (DataRow row in originalTable.Rows) { DataRow newRow = newDt.NewRow(); newRow.ItemArray = row.ItemArray; newDt.Rows.Add(newRow); i++; if (i == batchSize) ...

How To Lock Objects In Power BI

Overview Sometimes, there is a situation where when we open a report and click on any visual it accidentally nudges a chart a little bit to the right or left. Sometimes, by mistake when viewing a report, the arrangement of visuals scatters a little bit. Microsoft rolls out one new amazing feature to resolve this issue, that is, Lock Objects in Power BI. Advantages of using this feature When our purpose is to only view a report, this feature is a boon for us. Visualization’s position is not changed. Saves a lot of the developer's time to resolve the position related issues. Note   -  This feature is not saved with the report. So, every time you open a report, you need to enable this feature. Now, let’s understand this feature in a brief manner. To understand this, I will first show you one report in which I have not enabled “Lock Objects” feature. Step 1 The below screenshot shows my report which doesn’t have the enabled Lock Objects feature. ...

Use SharePoint Online List As A Data Source In Power BI

Introduction In this article, we will check how we can use SharePoint List as a data source in Microsoft Power BI. Please follow the below steps to establish the connection of SharePoint Online list with Power BI.  Step 1 Open Power BI Desktop > Get Data > Click More.   Step 2 Search for SharePoint > SharePoint Online List.   Step 3 Enter the URL of your SharePoint site.   Step 4 Click on Organizational account > Sign In.   Step 5 It will open the screen of Office 365 Login > Enter Credentials.   Step 6 Click on Connect.   Step 7 It will show all the lists available in the SharePoint - lists are on the left corner and their preview is on the right. Select all the lists which you want to use directly in the Power BI. Click on Load.   Step 8 It will load all the lists. Expand "Fields" column to view all the fields shown in the SharePoint List.   We can also view all the...