Hiding unwanted master page controls_SharePoint 2013 WCM Advanced Cookbook-QQ阅读男生玄幻网

上QQ阅读APP看书，第一时间看更新

Hiding unwanted master page controls

By default, SharePoint has a large number of SharePoint-specific controls and content zones added to each master page. SharePoint requires most of these controls in order to work correctly. When removing an undesirable control from the master page, we generally hide the control rather than removing it completely. This ensures SharePoint has access to the control, but does not render it to the end user.

Many of the controls included on the SharePoint master pages are required for the page to render correctly. When removing a control we can test whether it can be removed completely. If the page generates errors about the missing control, we know we need to hide it instead of removing it completely.

In this recipe, we will hide the suite bar branding (SharePoint or Office 365) and suite bar links (Newsfeed, SkyDrive, and Sites) using our customized master page.

How to do it...

Follow these steps to hide unwanted master page controls:

Open SharePoint Designer.
Select Open Site. Enter the complete URL to the SharePoint site and select Open.
From the Navigation pane, select Master Pages.
In the list of files in the Master Pages library, make a copy of seattle.master (in our example, we have renamed it Seattle_HideControls.master).
When modifying master pages included with SharePoint, do not modify the included master page. Make a copy of the master page and make your changes to the copy and then check out the new Seattle_HideControls.master master page.
Open the Seattle_HideControls.master master page.
Locate the </SharePoint:SharePointForm> closing tag for the SharePointForm element as shown in the following screenshot:

Tip

The <SharePoint:SharePointForm> tag results in the <form> tag when rendered in the browser. It is important to ensure our SharePoint controls remain inside the <SharePoint:SharePointForm> tag to prevent errors on the page.
Add a <div> container to hide our controls before the </SharePoint:SharePointForm> element as shown in the following code:
```
<div style="display: none;">
</div>
```
The following screenshot shows these elements:
Locate the <div id="suiteBarLeft"> element.
Cut the contents of the <div id="suiteBarLeft"> element to remove them from this location and allow us to paste them later. The following screenshot shows this <div> element:

Paste the following contents into the <div> tag that we created earlier to hide the elements:

<div style="display: none;">
<SharePoint:DelegateControl id="ID_SuiteBarBrandingDelegate" ControlId="SuiteBarBrandingDelegate" runat="server"/>

<SharePoint:AjaxDelta runat="server" id="DeltaSuiteLinks" BlockElement="true" CssClass="ms-core-deltaSuiteLinks">
    <div id="suiteLinksBox">
        <SharePoint:DelegateControl id="ID_SuiteLinksDelegate" ControlId="SuiteLinksDelegate" runat="server" />
    </div>
</SharePoint:AjaxDelta>
</div>

We can remove the <div> elements we pasted, which surround the SharePoint controls. All we need to ensure is that the controls are on the page.

Save the master page.
Check in and publish the master page using the Check In and Publish options.
Set the master page as the Site Master Page.
Navigate to the site in your preferred web browser to observe the results. You will see a screen similar to the following screenshot:

How it works...

In order for SharePoint pages to render correctly, most of the server controls included on the default master pages are required. Using CSS to hide server controls allows for SharePoint to render the control while the browser hides it for the end user. Rendering the control, even though hidden, still requires server and browser resources. It will still impact the page load performance.