In SharePoint Online's modern user interface, showcasing vital page details such as the Page Owner Name, Edited By, Approved By, and Approved Date can greatly enhance transparency and user experience. Many users encounter challenges when attempting to display these metadata properties on site pages. This article provides a clear and straightforward approach to solving this problem.
Problem Scenario
Many users of SharePoint Online may find themselves needing to display important information about a site page, including who owns the page, who edited it last, who approved it, and the date of approval. Unfortunately, the default layout does not readily show these details, which can lead to confusion.
Original Code for the Problem
While there isn't a direct code snippet for displaying these specific details out of the box, you can utilize SharePoint's built-in capabilities such as site columns, content types, and custom scripts to achieve this.
Solution to Display Page Details
Step 1: Set Up Custom Columns
- Navigate to Site Settings: From your SharePoint site, go to settings (gear icon) and select Site Settings.
- Create Site Columns: Under the Web Designer Galleries, click on Site columns. Create new columns to store information like:
- Page Owner (Single line of text)
- Edited By (Person or Group)
- Approved By (Person or Group)
- Approved Date (Date and Time)
Step 2: Create or Modify Content Types
- Create Content Type: In the same Site Settings area, under Web Designer Galleries, click on Site content types. You may want to create a new content type or modify an existing one to include your new columns.
- Link Columns: Attach the previously created site columns to your content type.
Step 3: Use Page Properties
- Edit the Page: Open the page where you want to display the details. Click on Edit.
- Add a Web Part: You can use the Text or List web part to display these properties. Alternatively, you may want to create a Hero web part that highlights this information.
- Utilize Power Automate (optional): If you want to automatically populate these fields, consider using Power Automate to trigger flows that update the necessary fields when actions are taken on the page (like editing or approving).
Step 4: Displaying the Metadata
To showcase the metadata, you can utilize JSON formatting in SharePoint views or even create a custom web part using SPFx (SharePoint Framework).
Example JSON Formatting
You can format a list or library view to display these properties. Here's a simplistic JSON example:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/column-formatting.schema.json",
"elmType": "div",
"children": [
{
"elmType": "span",
"txtContent": "Owner: [$PageOwnerName]"
},
{
"elmType": "span",
"txtContent": "Edited By: [$Editor]"
},
{
"elmType": "span",
"txtContent": "Approved By: [$ApprovedBy]"
},
{
"elmType": "span",
"txtContent": "Approved Date: [$ApprovedDate]"
}
]
}
Step 5: Review Permissions
Ensure that users who need to view these details have the appropriate permissions to see the information stored in these columns.
Conclusion
Displaying page details in SharePoint Online can significantly enhance the collaboration and clarity of information among team members. By creating custom site columns, modifying content types, and utilizing web parts or JSON formatting, you can effectively showcase important page metadata such as Page Owner, Edited By, Approved By, and Approved Date.
Additional Resources
- Official Microsoft Documentation on Site Columns
- SharePoint Framework Documentation
- Power Automate Documentation
By following the steps outlined in this guide, you will have the tools necessary to create a more informative and engaging SharePoint page for your users.
