When working with SharePoint, customizing the master page is a common task. The master page in SharePoint serves as the central template for a site, defining its layout and structure. It affects all pages within the site by determining how content is presented, including navigation, headers, footers, and other components. Often, there’s a need to dynamically manage content like a footer or other elements without involving developers or direct editing of the master page. A frequent challenge arises when users need to add content that can be easily edited or updated without modifying the underlying code of the master page itself.
One of the typical methods for adding content to a master page is by using a content editor web part. While it’s possible to add a web part directly into a master page, this solution has limitations. Primarily, the issue is that web parts embedded within the master page cannot be easily edited via the browser. The content editor web part becomes nearly useless for dynamic content management because it doesn’t offer a straightforward method for non-developers to manage content directly.
Fortunately, SharePoint offers a workaround to this problem. The solution is to use a SharePoint list to control and manage the content displayed in the master page. This method allows the content, such as a footer, to be easily updated via the SharePoint list interface, without requiring any direct access to the master page code. Instead of embedding static content directly in the master page, content will be dynamically fetched from the list, making it easier to manage for site administrators and users.
The Benefits of Using SharePoint Lists for Dynamic Content
The core idea behind this approach is to use SharePoint lists as the content source for elements in the master page. For example, in the case of a footer, the footer content is stored in a SharePoint list, and the master page is linked to that list. The list serves as the content repository, where administrators can easily add or modify the content. Whenever changes are made to the SharePoint list, they are automatically reflected in the master page, ensuring that content is always up-to-date without needing to directly modify the page itself.
This solution brings several advantages. First, it gives content editors more control over site content without needing to dive into the complexities of SharePoint’s codebase or the master page file. Second, it ensures that the content remains consistent across the site since the content is managed in one central location. Third, it enhances the flexibility of the site by making it easier to scale. As more elements of the master page require dynamic content, they can all be linked to SharePoint lists in the same way, without requiring a complete overhaul of the master page.
Using a SharePoint List to Manage Footer Content
For this specific example, the solution involves managing the footer content in SharePoint through a list. The footer will be divided into two columns, with each column containing text that can be easily edited via the list interface. The idea is to store the content of each column in a separate column in the SharePoint list. This method avoids the need for developers to manually alter the code and allows site administrators or content editors to modify the footer’s content at any time, directly through the SharePoint list.
By leveraging SharePoint’s list functionality and combining it with a custom solution developed in Visual Studio, the approach ensures that the content remains dynamic and editable from the SharePoint interface. Furthermore, it allows the footer content to be pulled from the list and rendered automatically in the master page when the page is loaded, making the process efficient and user-friendly. This approach eliminates the need for users to have direct access to the master page files or the underlying code to make updates, thus reducing the risk of errors or unintended changes.
The Concept of Dynamically Controlled Content
This approach goes beyond just managing the footer. It demonstrates the potential of using SharePoint lists to control any part of the master page’s content dynamically. For example, it could be extended to manage headers, banners, or even navigation elements through similar techniques. SharePoint lists provide a flexible and scalable solution for managing content, making it easier for administrators to maintain and update content across the entire site.
Through this solution, SharePoint administrators and content editors can ensure that the site remains up-to-date without requiring development intervention. This dynamic content management is crucial for organizations where content needs to be updated frequently but without the overhead of maintaining complex code or requiring specific development skills. This approach represents a significant step towards making SharePoint sites more user-friendly and adaptable for organizations of all sizes.
Structuring the Footer Content Using SharePoint Lists
Designing the Footer Layout
To begin the process of dynamically controlling the footer content via SharePoint, the first step is designing how the footer will look on the page. In this particular example, the footer will be structured as a two-column layout, each column containing a block of text. The layout will be simple yet effective, providing clear visual separation between the two sections of content. The goal is to ensure that the footer is both functional and easy to update through the SharePoint list interface, without requiring direct modification of the master page or HTML code.
The two-column layout can be easily implemented using standard HTML and CSS, specifically leveraging the Bootstrap framework. Bootstrap offers a flexible grid system that allows developers to quickly create responsive layouts, and it works well for structuring the footer in this case. The two-column design allows for clear organization of content, such as contact information, legal disclaimers, or other relevant information. Using a responsive grid ensures that the footer remains properly formatted on different devices and screen sizes.
Using Bootstrap for the Footer Layout
The HTML structure for the footer is created using Bootstrap’s grid system. Here’s a simple example of how the footer is structured:
html
CopyEdit
<div class=”row”>
<div class=”col-md-6″>
<p>First Column</p>
</div>
<div class=”col-md-6″>
<p>Second Column</p>
</div>
</div>
In this structure, the row class represents a container for the columns, and the col-md-6 class indicates that each column should take up half of the available width (50%). This results in two equally sized columns, which is ideal for a footer layout. Within each column, a paragraph tag (<p>) holds the text content. This layout is flexible and can easily be customized to include other HTML elements, such as links, images, or additional styling.
Using Bootstrap’s grid system is advantageous because it ensures the layout is responsive. This means that the footer will adjust based on the screen size, which is particularly important as users might access the SharePoint site from various devices, including desktops, tablets, and smartphones. The columns will automatically stack on smaller screens to ensure the content remains legible and well-organized.
Creating the SharePoint List for Footer Content
Once the footer layout is designed, the next step is to create a SharePoint list to store and manage the content for each column. SharePoint lists serve as a data repository, where content can be easily added, modified, or removed without directly editing the page’s code. For this scenario, a custom list will be created to hold the text content for each column of the footer.
The list will contain two custom columns corresponding to the two columns in the footer. Each column will store the text content for one section of the footer. For simplicity, let’s name these columns “Column1Text” and “Column2Text.”
To set up the SharePoint list:
- Create a New SharePoint List: Go to the SharePoint site and create a new custom list. You could name it something like “FooterText.”
- Add Custom Columns: Add two custom columns to the list:
- Column1Text (Multiple lines of text, Rich Text enabled).
- Column2Text (Multiple lines of text, Rich Text enabled).
- Column1Text (Multiple lines of text, Rich Text enabled).
- Set Required Fields: The Title column can be set as a required field to uniquely identify each list item.
By using “Rich Text” for these columns, you can store more than just plain text. This setting ensures that you can also include simple formatting, such as bold text, bullet points, and hyperlinks. It provides flexibility in case you need to include more advanced content in the footer, such as external links or formatted paragraphs.
Advantages of Using Rich Text
Choosing the “Rich Text” option over “Plain Text” or “Enhanced Rich Text” is an intentional decision. The “Plain Text” option would limit the ability to include any kind of formatting, such as bold or italicized text, which might be necessary for emphasizing key points in the footer. On the other hand, “Enhanced Rich Text” could introduce unnecessary HTML elements, leading to potential formatting issues or complications with rendering content on the page.
“Rich Text” strikes a balance by allowing for basic formatting (such as links or paragraphs) without introducing the complex HTML tags that come with “Enhanced Rich Text.” This makes it easier to manage content while ensuring that it displays correctly in the master page.
Once the SharePoint list is set up, it serves as a central repository for managing the footer content. Site administrators or content editors can now modify the text in the list items, and those changes will be automatically reflected in the footer of the site, without needing to alter the master page or any code.
Mapping the List to the Footer in the Master Page
With the SharePoint list set up and the content structure defined, the next task is linking the list to the footer in the master page. This is done by creating a custom user control in Visual Studio, which will query the SharePoint list for the content and inject it into the master page dynamically.
The user control will be responsible for retrieving the content from the SharePoint list and rendering it in the appropriate place within the master page. The two columns of content will be pulled from the “Column1Text” and “Column2Text” fields in the list, and the content will be displayed in the corresponding columns of the footer on the page.
This approach eliminates the need for hardcoding content directly into the master page. Instead, the content is dynamically loaded from the list, ensuring that it can be updated easily by non-developers through the SharePoint list interface.
By leveraging SharePoint’s native list functionality and combining it with custom development in Visual Studio, you create a powerful solution for managing footer content dynamically. This solution not only simplifies the process of updating content but also ensures that the footer remains consistent across the entire site without requiring ongoing development work.
Developing the Solution in Visual Studio
Setting Up the SharePoint Project in Visual Studio
After designing the layout of the footer and setting up the SharePoint list, the next step is to develop the solution that will retrieve and display the content from the list in the master page. This process involves creating a SharePoint project in Visual Studio, where you will develop a custom user control that can dynamically display the footer content pulled from the SharePoint list.
To start, open Visual Studio and create a new SharePoint project. Since you will be creating a custom user control, select a farm solution as the type of SharePoint project. A farm solution allows the solution to be deployed directly to the SharePoint farm, making it accessible to all sites within the farm. The solution will need access to SharePoint’s object model and other farm-level resources, which makes a farm solution the most appropriate choice.
Once the SharePoint project is created, Visual Studio will automatically generate the necessary files and directories for the project. One of these directories will be the “ControlTemplates” folder. This folder is important because it corresponds to the _catalogs_controltemplates directory on the SharePoint server, which is where user controls are stored for use across the SharePoint farm.
Creating a User Control for the Footer
In your Visual Studio project, the next step is to create a user control that will render the footer content dynamically in the master page. A user control is a reusable component that can be embedded in SharePoint pages, including master pages, content pages, or web parts. This control will query the SharePoint list for the footer content and render it as HTML on the page.
To create the user control, right-click the “ControlTemplates” folder in the Solution Explorer and select “Add” -> “New Item.” Choose the “User Control” template, and name it something like Footer.ascx. This file will define the structure of your footer and contain the necessary markup and logic to retrieve and display the content from the SharePoint list.
Inside the Footer.ascx file, you will add an asp:Literal control. The Literal control is a simple server-side control that can be used to render raw HTML content. This is ideal for our scenario, where you want to inject the dynamic content (pulled from the SharePoint list) into the master page.
Here is an example of how the Footer.ascx file might look:
html
CopyEdit
<asp:Literal ID=”FooterContent” runat=”server” ViewStateMode=”Disabled”></asp:Literal>
The Literal control is placed at the point in the user control where you want the dynamic footer content to appear. The ViewStateMode=”Disabled” property is used to disable the ViewState for this control, which can improve performance when rendering dynamic content.
Writing the Code to Retrieve List Data
The logic to query the SharePoint list and fetch the footer content is written in the code-behind file (Footer.ascx.cs). This is where you will define the methods to interact with the SharePoint object model and retrieve the data.
In SharePoint, to query a list, you use the SPQuery class, which allows you to construct CAML (Collaborative Application Markup Language) queries. The goal is to retrieve the content stored in the “Column1Text” and “Column2Text” fields of the SharePoint list you created earlier. The query will look for all items in the list where the “Title” field is not empty.
To ensure that the query runs with the necessary permissions, you will use the SPSecurity.RunWithElevatedPrivileges method. This method runs the enclosed code with elevated privileges, which is useful when you need to access resources that require higher permissions than the current user might have.
Here’s an example of how the Page_Load method in the Footer.ascx.cs file might look:
csharp
CopyEdit
protected void Page_Load(object sender, EventArgs e)
{
SPSecurity.RunWithElevatedPrivileges(delegate()
{
using (SPSite siteCollection = new SPSite(“http://sharepoint-site”))
{
SPWeb rootWeb = siteCollection.OpenWeb();
SPList list = rootWeb.Lists.TryGetList(“FooterText”);
if (list != null)
{
SPQuery query = new SPQuery();
string camlQuery = “<Where><IsNotNull><FieldRef Name=’Title’/></IsNotNull></Where>”;
query.Query = camlQuery;
SPListItemCollection items = list.GetItems(query);
StringWriter stringWriter = new StringWriter();
using (HtmlTextWriter writer = new HtmlTextWriter(stringWriter))
{
if (items.Count > 0)
{
foreach (SPListItem item in items)
{
writer.Write(“<div class=\”col-md-6\”>”);
writer.RenderBeginTag(HtmlTextWriterTag.P);
writer.Write(item[“Column1Text”]);
writer.RenderEndTag();
writer.Write(“</div>”);
writer.Write(“<div class=\”col-md-6\”>”);
writer.RenderBeginTag(HtmlTextWriterTag.P);
writer.Write(item[“Column2Text”]);
writer.RenderEndTag();
writer.Write(“</div>”);
}
FooterContent.Text = stringWriter.ToString();
}
else
{
FooterContent.Text = “No footer content available.”;
}
}
}
}
});
}
Explanation of the Code
- The SPSecurity.RunWithElevatedPrivileges method ensures the code inside the delegate is executed with the necessary permissions. This is critical because it allows the solution to query SharePoint lists even if the user does not have sufficient permissions to access them directly.
- The SPQuery object is used to construct a CAML query. This query searches the “FooterText” list for items where the “Title” field is not empty. You can modify the query if you need to filter based on other conditions or retrieve more specific data.
- The SPListItemCollection stores the list items returned by the query. Each item represents a single row in the “FooterText” list.
- The StringWriter and HtmlTextWriter classes are used to generate the HTML output dynamically. These classes allow you to render HTML tags programmatically, which is helpful when building a structure like a footer that needs to be populated with content dynamically.
- After retrieving the list items, the content is written to the FooterContent control. This will dynamically populate the footer in the master page with the text stored in the SharePoint list.
Testing the Solution
After the solution has been developed, the next step is to deploy it to your SharePoint farm. The farm solution can be deployed using Visual Studio’s built-in deployment features or manually through SharePoint Central Administration. Once deployed, you can test the solution by updating the SharePoint list with different footer content and refreshing the page. You should see the footer content dynamically updated based on the list items.
This approach ensures that the content of the footer is controlled centrally via the SharePoint list, and changes to the content are reflected on the site without the need for direct modifications to the master page.
Deploying the Solution and Integrating with the Master Page
After developing the custom user control in Visual Studio, the next critical step is to deploy the solution to your SharePoint farm. Since the solution involves creating a custom user control, it needs to be deployed as a farm solution, which allows it to be used across multiple SharePoint sites within the farm.
To deploy the solution:
- Build the Solution: First, build the solution in Visual Studio to ensure that all the necessary files and components are generated and compiled correctly.
- Deploy the Solution: Once the solution is built, deploy it to your SharePoint farm. This can be done either directly through Visual Studio or manually by uploading the solution package to SharePoint Central Administration.
- Deploying via Visual Studio: In Visual Studio, right-click on the project and select “Deploy.” This will automatically upload the solution to the SharePoint farm and deploy it.
- Manual Deployment: If you prefer to deploy the solution manually, use SharePoint Central Administration to upload the .wsp solution file to the farm’s solution gallery, and then activate the solution across the desired web applications.
- Deploying via Visual Studio: In Visual Studio, right-click on the project and select “Deploy.” This will automatically upload the solution to the SharePoint farm and deploy it.
Once the solution is deployed, it will be available for use in SharePoint. The custom user control will now be located in the _catalogs/_controltemplates folder of your SharePoint farm, making it accessible to all SharePoint sites that reference it.
Registering the User Control in the Master Page
To integrate the custom user control into the master page and display the dynamic footer content, you need to register and reference the user control within the master page file.
Registering the User Control
In your master page (.master file), you need to register the user control so that SharePoint knows where to find it. This is done by using the <%@ Register %> directive. The syntax for this registration looks like the following:
html
CopyEdit
<%@ Register TagPrefix=”custom” TagName=”Footer” src=”~/_catalogs/_controltemplates/15/MPListControl/Footer.ascx” %>
Here’s what each part means:
- TagPrefix=”custom”: This is the prefix used to reference the user control in the master page.
- TagName=”Footer”: This is the tag name that will be used to insert the user control in the master page.
- src=”~/_catalogs/_controltemplates/15/MPListControl/Footer.ascx”: This is the relative path to the user control that has been deployed to the _catalogs/_controltemplates folder.
Once the user control is registered, SharePoint will be able to use the control anywhere in the master page or other SharePoint pages by referencing the custom tag.
Referencing the User Control
After registering the user control, you can now reference it within the master page wherever you want the footer content to appear. To insert the footer control into the page, simply use the following tag in the master page:
html
CopyEdit
<custom:Footer Runat=”server” ControlId=”Footer” />
This tag will instruct SharePoint to insert the custom footer control at the specified location in the master page. You can place this tag inside the <body> tag or wherever you want the footer to be rendered.
For example, if you want the footer to appear at the bottom of every page, you would add this tag just before the closing </body> tag in your master page.
html
CopyEdit
<div class=”footer-container”>
<custom:Footer Runat=”server” ControlId=”Footer” />
</div>
The Runat=”server” attribute tells SharePoint to treat this tag as a server-side control that will be processed on the server before the page is sent to the client.
Testing the Footer Content on the Site
After registering and referencing the user control in the master page, the next step is to test the solution to ensure that the dynamic footer content is being displayed correctly. Here’s how to do this:
- Update the SharePoint List: Go to the SharePoint site where the footer content is being managed and update the list item with new content for the footer columns.
- Clear Cache and Refresh the Site: Sometimes, SharePoint might cache certain elements, so it’s a good practice to clear the browser cache or perform a hard refresh to ensure the latest changes are reflected.
- View the Site: After refreshing, navigate to a page that uses the updated master page and check the footer. The content from the SharePoint list should now be displayed in the footer, based on the latest changes you made to the list.
If everything is working correctly, the footer should dynamically update based on the content in the SharePoint list, allowing you to modify the footer text without needing to directly edit the master page. This makes managing site content more efficient and less reliant on developers.
Handling Missing or Empty List Data
It’s important to handle scenarios where the SharePoint list is empty or the footer content is not available. To do this, you can provide a fallback message or default content in case the list does not contain any items.
In the code-behind file (Footer.ascx.cs), you can modify the logic to check whether the list contains any items. If no items are found, you can display a default message, such as “No footer content available.”
For example:
csharp
CopyEdit
if (items.Count > 0)
{
foreach (SPListItem item in items)
{
writer.Write(“<div class=\”col-md-6\”>”);
writer.RenderBeginTag(HtmlTextWriterTag.P);
writer.Write(item[“Column1Text”]);
writer.RenderEndTag();
writer.Write(“</div>”);
writer.Write(“<div class=\”col-md-6\”>”);
writer.RenderBeginTag(HtmlTextWriterTag.P);
writer.Write(item[“Column2Text”]);
writer.RenderEndTag();
writer.Write(“</div>”);
}
}
else
{
FooterContent.Text = “No footer content available.”;
}
This ensures that even if the list is empty or the expected data is missing, users will see a message indicating that the footer content is unavailable, rather than a broken or empty footer.
Scaling the Solution for Other Parts of the Master Page
While this solution focuses on managing the footer content dynamically, it can easily be extended to manage other parts of the master page, such as headers, banners, or any other area where content might need to be updated regularly.
For example, you could create additional user controls for different sections of the page, each linked to its own SharePoint list. This would allow different teams or content editors to manage various parts of the site without requiring access to the master page itself.
By using SharePoint lists and custom user controls, you can ensure that the site content remains flexible and easily managed, even as the site evolves over time.
Final Thoughts
Using SharePoint lists to manage content on the master page offers a powerful solution for creating dynamic, easily updatable pages. By combining SharePoint’s built-in list functionality with custom development in Visual Studio, you can provide an efficient way to manage content without requiring direct access to the master page or complex development skills. This approach not only streamlines content management but also makes SharePoint more accessible to non-developers, giving them more control over the site’s appearance and content.