7. Work with webpages
In this chapter
Practice files
For this chapter, use the practice files from the SP2016SBSCh07 folder. For practice file download instructions, see the introduction.
In previous chapters, you learned how to organize your content into site collections, sites, lists, and libraries; however, Microsoft SharePoint sites are similar to other websites in that they can contain multiple webpages. In fact, you could think of storing information in a file, such as a Microsoft Word document or a Microsoft Excel worksheet, as hiding that information. Before a user can see the information in such files, the file has to be downloaded to the user’s computer, and then a separate program or app has to be opened to display the contents of the file. With a webpage, your browser displays the information immediately when you select the link to the page. Therefore, it is just as important to place content on pages as it is to use lists and libraries.
This chapter guides you through procedures related to creating pages, adding content to pages, managing pages, and using app parts and web parts.
Understand SharePoint pages
SharePoint Server includes four types of webpages. The ones you see and can create for a site depend on the site template used to create the site. These are:
Wiki pages
Web part pages
Publishing pages
Application pages
On team sites and community sites, the two types of pages you will work with are wiki pages and web part pages. Publishing pages are available on sites you create by using one of the publishing site templates, such as the Publishing Portal, Enterprise Wiki, Product Catalog, Publishing Site, Publishing Site with Workflow, or Enterprise Search Center site templates.
You can customize the first three types of pages by using the following tools:
Your browser
A SharePoint-compatible webpage-editing tool, such as Microsoft SharePoint Designer 2013
A professional development tool, such as Microsoft Visual Studio
No one tool can do everything; therefore, it is likely that when you use SharePoint, either in an on-premises installation of SharePoint Server or SharePoint Online, your organization will use all three tools at some point.
Web part pages
Web part pages consist of web part zones that can contain app parts and web parts. Multiple web parts can be added to each zone. After a web part is added to a zone, you can alter the location of the web part within the zone, and you can move the web part from one zone to another. The web part zones are visible only when you are editing a page.
Some zones allow web parts to be stacked in a horizontal direction, whereas others stack them in a vertical direction. The illustration in the Layout section of the New Web Part Page page displays the selected Layout template. If you do not add a web part to a zone, the zone collapses (unless it has a fixed width), and the other zones expand to fill the unused space when you go to the web part page. Therefore, if you currently believe you only need two zones, displayed as two columns, a good choice would be the Header, Footer, 4 Columns, Top Row layout template, because this layout allows for other layout combinations if you need them in the future.
When you create a web part page, you can choose the layout of the zones.
Important
You cannot change the zone layout after you create the web part page.
Web parts are reusable components that can contain any type of web-based information, including analytical, collaborative, and database information. App parts are used in conjunction with apps you add to your site from your organization’s app store or from the online SharePoint Store.
Tip
To include free-format static text or images on a web part page, you must use the Content Editor web part (CEWP) or the Image Viewer web part.
App parts can also be used to display content from lists and libraries, so the content dynamically changes as you upload, modify, and delete list items in the lists or files in the libraries. These app parts are used on the web part pages that are created when you create views in your lists and libraries.
Web part pages can be configured to send data from one web part or app part to another by using a mechanism called a web part connection. This allows you to create interactive pages.
There are a couple of disadvantages of using web part pages: many users find the mechanism of changing such pages not intuitive, and after you create a web part page with a specific layout of web part zones, you cannot change the layout.
Web part pages are the default pages on sites that are created from the Project, Document Center, Record Center, Community Portal, and Compliance Policy Center site templates. On these sites, you need the Add And Customize Pages permission to edit the default web part page. If you do want to create multiple pages on these sites, you can create a wiki page library where you can create wiki and web part pages.
Wiki pages
Wiki pages are easy to use and their layout is easy to change. When you edit the home page of a team site, you’ll see that it consists of three content areas, each containing a web part or an app part:
Get Started With Your Site This web part displays five tiles that you can select to quickly complete common SharePoint actions. As you point to each tile, a description of the task is displayed. You can remove this web part by selecting Remove This.
Site Feed This web part displays a newsfeed on your site; its use is also known as microblogging. These microblogging conversations are stored in the MicroFeed list.
Documents This app part displays the contents of the Documents library.
When you create a team site or community site, SharePoint creates a wiki page library named Site Pages, where webpages are stored and where new pages can be created. The Site Pages wiki library inherits its permissions from the site. Therefore, anyone who is mapped to the Edit permission level at the site level—that is, anyone who is a member of the site’s Members SharePoint group—is allowed to change any page or create new pages in the Site Pages library. This is known as open editing. Any member of the site can edit it as he or she wants if, for example, the member thinks the page is incomplete or poorly organized. Therefore, as users share their information, knowledge, experience, ideas, and views, the content evolves. Site members can work together to change or update information without needing to send emails or attend meetings or conference calls. All users are allowed to control and check the content, because open editing relies on the assumption that most members of a collaboration site have good intentions.
Wiki pages can also contain app parts and web parts. Although you cannot use web part connections on wiki pages, the ease with which you can mix free-format static text and images on wiki pages in addition to web parts and app parts make them a popular page choice on team sites.
Wiki page libraries can be created on any site where the Team Collaboration Lists site feature has been activated. There is a second type of wiki page that you can create when you create a site collection based on the Enterprise Wiki site template. This wiki page is a type of publishing page. For more information about Enterprise Wiki sites, see Chapter 9, “Work with wikis, blogs, and community sites.”
Publishing pages
For Internet sites and company portals, when the content on a page is to be viewed by a large number of people, pages might need to go through a formal approval process before users can view them. In such cases, publishing sites and publishing pages are a better choice than team sites and wiki pages. Most visitors to a publishing site want to consume information displayed on the page. They will not be allowed to edit the pages. Only a few users will be able to create, edit, and delete publishing pages.
Publishing pages, also known as Web Content Management (WCM) pages, are stored in the Pages library and are created from publishing templates known as page layouts. After you create a publishing page, you can change the layout of the page by choosing a different layout.
Publishing pages can have both content areas and web part zones. Content areas on a publishing page can be similar to the content areas that you use on a wiki page in that they can contain text, images, app parts, and web parts. However, some content areas can be very restrictive—for example, they might allow you to insert only an image or plain text. The name of the content area usually indicates the type of content you can add. The content area names and the web part zone names are displayed only when you are editing the page. The layout and the type of content you can add to the content areas is dependent on the layout chosen for the publishing page.
Content areas with a grey background are displayed only when you edit the page
Application pages
Application pages, also known as system pages, look very similar no matter which site you go to. Examples of such pages are the List Settings page and the Site Settings page. These pages contain _layouts in their URLs, as in intranet.wideworldimporters.com/_layouts/15/viewlsts.aspx, which is the web address for the Site Content page on the Wide World Importers intranet site.
Tip
Application pages cannot be created, modified, or managed by using your browser or SharePoint Designer, so they are not covered in the following topics.
Create pages
The first page displayed on a SharePoint site is known as the home page. This is the page on which all site visitors start. In your organization, the home page might be known as the default page, the welcome page, or the landing page. Home pages tend to aggregate information from elsewhere and direct users to other pages. For instance, in the Quick Launch for a home page, when you select Documents, you are taken to the default view of the Documents library.
There are many reasons why adding content to just the home page is not enough. Although you can add a vast amount of content on one page, this can result in the page taking a long time to render, and it can be difficult for users to find content if they have to scroll down the page many times. Try to compose your content into multiple pages, each with no more than two or three screens of information; and never add content to a page so that users have to scroll to the right to see the content. Link your pages together so that users can navigate easily between them in an organized manner.
There are several methods for creating a new page; however, the recommended method for creating pages that contain content that relates to content on existing pages is to create a forward link, also known as a wiki link, by entering the name of the page within two sets of double square brackets. This is quicker and easier than using the Links command on the Insert tab.
Tip
If you want to enter double open or closed square brackets in the content of a page without making a link, enter a backslash before the two brackets, as in [[ or ]].
1. Go to the team site where you want to create a new wiki page, and then, on the Settings menu, select Add a page.
Use the Setting menu to create or edit pages
2. In the Add a page dialog, enter the name of your new page.
Enter the name of your page
Tip
The name of the page will appear at the top of the page and is also used to create the web address (URL) of the page.
3. Select Create.
Or
1. On the home page of your team site or community site, go to the Page tab and then, in the Page Library group, select View All Pages to display the default view of the Site Pages library.
Use the Page tab to manage pages
2. Do one of the following to display the New Item page:
• Below the title for the Site Pages library, select New.
Use the New command below the title of the Site Pages library to create a new page
• On the Files tab, select New Document.
3. Enter the name of the page, and then select Create.
On the New Item page, enter the name of the new page
1. On the home page of your team site or community site, go to the Page tab and then, in the Page Library group, select View All Pages to display the default view of the Site Pages library.
2. On the Files tab, select the New Document arrow (not the button), and then select Web Part Page.
3. On the New Web Part Page page, in the Name box, enter the name of your page, and then in the Layout section, select the layout template that has the web part zone arrangement you want.
Use the New Web Part Page page to choose a name and zone layout for your webpage
4. In the Save Location section, in the Document Library list, select Site Pages.
Although you can save web part pages in any library, if you want to create wiki links from your wiki pages to a web part page, your web part page must be stored in the Site Pages library.
5. Select Create.
1. Go to the publishing site where you want to create the publishing page and then, on the Settings menu, select Add a page.
2. In the Add a page dialog, enter the name of your new page, and then select Create.
Or
1. Go to the home page of your publishing site.
2. If no tabs are displayed, on the Settings menu, select Show Ribbon.
3. Go to the Page tab, and then, in the Edit group, select New.
Use the Page tab to create, edit, and manage your page
4. In the Add a page dialog, enter the name of your new page, and then select Create.
Or
1. Go to the home page of your publishing site.
2. Go to the Page tab, and then, in the Page Library group, select View All Pages to display the default view of the Pages library.
3. On the Files tab, select New Document to display the Create Page page.
4. In the Title box, enter the name of the new page that you want to display to users.
5. In the Description box, enter the purpose of the page, including any search keywords that people can use to find the page.
6. Select the URL Name box. The name you entered in the Title box appears, with spaces replaced with hyphens.
7. In the Page Layout section, select the layout you want to use to control how the content on the page will be displayed.
Use the Create Page page to enter a URL name, title, description, and page layout for the page
8. Select Check Spelling.
9. Correct any spelling mistakes, and then select OK to close the Spell Checker dialog.
10. Select Create.
To create a wiki page or publishing page that is displayed by selecting a forward link
1. On the page where you want to add the forward link, activate edit mode.
2. Positon the cursor where you want to add the link to the page you will create.
3. Enter [[name of page|words that you want to display on the page for the link]]. An example is [[BedroomFurniture|exotic bedroom furniture]].
Creating a forward link to a page
As you enter the name for the new page, a list of existing pages is displayed. You could select a name from this list to create a forward link to a page you previously created.
4. Save the page. The forward link is indicated by a dotted underline.
A forward link to a page that has not been created is denoted by a dotted underline
5. Select the underlined text to open the Add A Page dialog.
Creating a page from the Add A Page dialog
6. Select Create.
Add content to pages
After a page has been created, you can add content, such as text, tables, images, and links to other pages or websites. When you have finished entering your content, save the page. You can re-edit any page at a later time as necessary.
Tip
The only way to add content to web part pages is by adding app parts or web parts. This is covered in the “Use app parts and web parts” topic later in this chapter.
Modify pages
To prevent two people from editing a page at the same time, anyone intending to modify content should always check out the page before he or she begins. When you edit a publishing page, the page is automatically checked out to you. You must check out wiki pages and web part pages yourself.
When another member of your team has checked out a page, the Check Out command on the Page tab is inactive, and a yellow notification area is displayed at the top of the page, stating who the page is checked out to.
The Pages library, where publishing pages are stored, is configured for major and minor (draft) versions. Only users who can edit items can see the draft items; therefore, after you have checked in a page, the page must be published as a major version before visitors to the site can see the amendments you have made to the page.
See Also
For more information about checking in, checking out, and versioning, see Chapter 3, “Work with content in lists and libraries.”
As you modify a page, you might find that the layout you originally chose does not now suit the content you want to display. On both wiki pages and publishing pages, you can change the page layout.
To activate a wiki or publishing page for editing
1. Go to the page that you want to edit, and then do one of the following:
• On the Settings menu, select Edit page.
• In the upper-right corner of the page, select Edit.
Use the links in the upper-right corner to share a site, follow a site, edit a page, or focus on content
• On the Page tab, select Edit.
Use the Page tab to edit and check out a page
Tip
On publishing pages, if the Page tab is not displayed, on the Settings menu, select Show Ribbon.
1. On the wiki page, on the Page tab, select Check Out. A yellow notification area is displayed at the top of the page, stating that the page is checked out and editable.
The yellow notification area at the top of a page is used to display the page status
Tip
If you are already editing a wiki page, you can also select Check Out on the Format Text tab.
1. On the wiki page, on either the Page tab or the Format Text tab, do one of the following:
• If you have the page checked out, to check in your changes, select Check In.
• If you have the page checked out, to discard any changes you have made to your checked out version and release the checkout, select the Check In arrow, and then select Discard Check Out.
• If the page is currently checked out to another user and you have the Override List Behaviors permission, which allows you to check in the page and discard any changes that user might have made to the checked-out version, select Override Check Out.
Use the Check In menu to check out, check in, discard a checkout, or override a checkout
To check in and publish a publishing page
1. On the publishing page, do one of the following:
• In the yellow notification message, select Check it in.
The yellow notification area displays the status of the page and allows you to check in the page
• Use one of the options described in the previous procedure, “To check in a wiki page.”
2. In the Check In dialog, enter a comment, and then select Continue.
3. Do one of the following:
• In the yellow notification message, select Publish this draft.
• On the Publish tab, select Publish.
To save or discard your modifications to a wiki or publishing page
1. After you have added content to a page, do one of the following:
• To the right of the tabs, select Save.
When you edit a page, the upper-right Edit link is replaced with Save
• If you are done adding content to the page, on the Page tab or the Format Text tab, select Save.
• If you want to save the content you have added so far but intend to continue adding content to the page, on the Page tab or the Format Text tab, select the Save arrow and then select Save and Keep Editing.
• On the Page tab or the Format Text tab, select the Save arrow, and then select Stop Editing. You will then be prompted to save or discard the content you have added to the page. To discard your modification, select Discard changes.
Use the Save Changes dialog to save or discard the changes you have made to a page, or select Cancel to return to editing the page
Format and display content
SharePoint provides you with a What You See Is What You Get (WYSIWYG) environment for adding content to your pages. When a wiki page or publishing page is in edit mode and the cursor is within the body of the page, two tabs are displayed: Format Text and Insert.
Tip
The Format Text and Insert tabs also appear when you enter content by using the Content Editor web part on a web part page.
The commands on these tabs are similar to the commands on the Home and Insert tabs in Word: you use them to format the text, check spelling, and control the layout of the page, and to insert tables, images, videos, audio, hyperlinks, app parts, web parts, and embedded code.
You can also use keyboard shortcuts similar to those in other Office programs. If a tab command has a keyboard shortcut, you can display it by pointing to the command on the tab to display the screen tip.
Screen tips can include the command name, keyboard shortcut, and a description
The Format Text tab
The Format Text tab contains ribbon groups you will not find on the Home tab in Word. These include:
Layout This group appears on the Format Text tab only for wiki pages. Use the Text Layout command to create additional editing areas and to change the structure of your page. You can reformat the page by using any of eight options. For publishing pages, the Layout group is on the Page tab. Developers can create additional publishing page layouts, but no additional wiki page layouts can be added to SharePoint.
You can control the layout of a wiki page
Markup This group provides four commands:
• Edit Source Selecting this command opens a dialog that contains a plain-text box in which you can enter HTML code. The text box displays the HTML tags for the content area where the cursor was located before you selected Edit Source. For example, if your wiki page has a two-column layout and the cursor is in the left column when you select the command, only the HTML for the left column is displayed in the dialog. You will need to know HTML to use this method of entering content on your page, because no IntelliSense help is provided; therefore, you might find it easier to use an HTML editing tool to create the content, and then paste it into the text box. To prevent the entry of malicious code, SharePoint does sanitize user-entered HTML content, so you might find that some of the code you enter is removed when you save the page.
• Languages When you create a SharePoint site, it has a default language. When you enter text in a different language, you can select the text and use this command to tag the language of the text. The SharePoint search functionality can then identify pages that include text in specific languages; some screen reader programs, such as the Job Access With Speech (JAWS) screen reader, use this so they can pronounce words correctly when they read them aloud.
• Select Use this command to select the HTML tag you want to work with. For example, to edit the HTML for a row in a table, place the cursor in a cell in the row, and then select the Select command to display the list of HTML tags that apply to that row, including the row itself and any parent HTML tags, such as for the table or the entire content area. A red dotted line surrounds the area related to the HTML tag when you point to each tag in the Select list. To format or style the row, select the HTML for just the row.
• Convert to XHTML Most SharePoint pages adhere to and generate HTML to the XHTML 1.0 Strict specification; however, when you use the Edit Source command to create HTML, you might introduce errors into the page. By using this command, you might be able to fix those errors.
The Insert tab
The Insert tab also contains ribbon groups you will not find on the Insert tab in Word. These include:
Media This group contains two split buttons:
• Picture Use this command to insert a picture from your computer, to reference a web address where a picture is stored, or to reference an image that is stored in a SharePoint library.
Use the Picture split button to insert a picture on the page
Use the first option, From Computer, when you have stored your image on the hard drive of your computer—for example, drive C. The default location to store images that you use on pages is the Site Assets library; however, you can choose a different library on the site.
Tip
The Site Assets library is the place to store files that are needed to brand a site, such as the image files used to display pictures on pages or files that contain team or company information. These are usually not files that team members will collaborate on, so they should be saved in the Site Assets library rather than in, for example, a document library.
Selecting the second option, From Address, opens the Select Picture dialog, in which you must manually enter or paste the URL of the image. To avoid incorrectly entering the URL for the image, which would result in a broken link, open another browser window or tab, navigate to the picture, copy the URL, and then paste the URL into the Address box in the Select Picture dialog.
Selecting the From SharePoint option opens the Select An Asset dialog, which you use to navigate to a SharePoint library where you have previously uploaded an image.
• Video and Audio Use this split button to display video and audio on your page. This command provides the same three options as the Picture split button, plus a fourth option, Embed. Using the Embed option is the same as using the Embed Code option in the Embed group on the Insert tab, which is described later in this section.
Content This group appears on the Insert tab only on publishing pages and is detailed in the “Reusable content” section later in this topic.
Parts This group contains two commands, App Part and Web Part. The insertion and configuration of these two components is detailed in “Use app parts and web parts” later in this chapter.
Embed This group contains the Embed Code option, which you can use to embed HTML code to display content not stored in SharePoint, such as content from Bing Maps, Vimeo, and YouTube. Most of these sources provide methods of generating the HTML code you need to embed in your page.
You can also use this option to display the contents of Word, Excel, or PowerPoint files, when Office Online Server (OOS) is installed in your organization. OOS is a separate product from SharePoint; organizations can use it to deliver browser-based versions of Word, PowerPoint, Excel, and OneNote files, among other capabilities.
See Also
For more information about embedding Office documents and PDF files on a website, see “Embed Office documents and PDF files on a website” at https://aka.ms/Yx8n5e. For information about embedding an Excel workbook on a webpage, see “Embed your Excel workbook on your web page or blog from SharePoint or OneDrive for Business” at https://aka.ms/K4c5l6.
The embedded code is stored in an HTML iFrame tag, which means that your browser can display content stored in SharePoint immediately and it will display the content from the external source when it receives it. If the network connection to the external source is poor or the external source is not responding, you might have unexpected results. For example, if your source is a video source, you could end up with a blank video area on the page, or video buffering or playback problems. When this occurs, it is important to recognize that it is not a SharePoint issue; you must investigate the network connection and the availability of the external source.
Important
The insertion of an iFrame on a page could be seen as a potential scripting security risk. A site collection administrator can prevent users from using these commands by selecting HTML Field Security in the Site Collection Administration section on the Site Settings page.
Contextual tabs
When a component has been inserted onto a page and is selected, additional contextual tabs might be displayed. For example, if an image on a page is selected, the Image contextual tab is displayed. You can use the commands on the Image tab to replace the image, enter alternative text, format the borders of the image, position the image on the page, and reduce the area on the page used to display the image.
Important
The commands in the Size group of the Image tab do not alter the file size of the image; they only place width and height attributes on the <img> HTML tag. Your browser uses these attributes to display the image. For prototyping purposes, this might be adequate; however, the image file could potentially use a large amount of network bandwidth when it is downloaded from SharePoint to your computer, even if the browser then displays the picture at a smaller size than the file’s original size. So if you notice that a page takes more time to load than other pages, you might need to look at the size of the image files.
On publishing sites, you need not optimize your images before uploading them into SharePoint, because such sites can use image renditions, as long as your server administrator has configured their use. An image rendition is an optimized, scaled variant generated from the original image. By default, there are four rendition display templates; therefore, after you upload an image, you have the choice of five image sizes on your page: the original size of the image, and a rendition for each display template. You can change the renditions that SharePoint has generated, and if you are a site owner, you can add new rendition display templates.
On a publishing site, on the Image tab, use the Pick Rendition menu to select the image size for an image on your page and to edit the image renditions
1. On the page whose content you want to format, activate edit mode.
2. On the Format tab, use the commands to format the content as you want.
Tip
The commands in the Edit, Clipboard, Font, Paragraph, and Styles groups work the same as in any other Office program.
3. Save or save and publish the page.
To change the layout of a wiki page or a publishing page
1. On the page whose layout you want to change, activate edit mode.
2. Do one of the following to display a list of page layouts:
• If the page is a wiki page, on the Format Text tab, in the Layout group, select Text Layout.
• If the page is a publishing page, on the Page tab, in the Page Action group, select Page Layout.
3. Select a layout.
4. Save or save and publish the page.
To insert a picture, video, or audio
1. On the page where you want to display the picture, video, or audio, activate edit mode and position the cursor where you want to add the image or file.
2. On the Insert tab, select the Picture button, and then do one of the following:
• If the file is on your computer, select From Computer to open the Upload Image dialog, select Browse, navigate to the location on your computer where the file is stored, and select Open. In the Destination list, select the library where you want to upload the file, and then select OK.
• If the file is on the web, select From Address to open the Select Picture dialog. Enter the web address for the file you want to use, enter alternative text for the file, and then select OK.
• If the file is already in SharePoint on your site, select From SharePoint to open the Select an Asset dialog, navigate to the folder or library where the file is stored, select the file, and select Insert.
Or
On the Insert tab, select the Video and Audio button, and then do one of the following:
• If the file is on your computer, select From Computer to open the Upload Media dialog, select Browse, navigate to the location on your computer where the file is stored, and select Open. In the Destination list, select the library where you want to upload the file, and then select OK.
• If the file is on the web, select From Address to open the Link Media dialog. Enter the web address for the file you want to use, and then select OK.
• If the file is already in SharePoint on your site, select From SharePoint to open the Select An Asset dialog, navigate to the folder or library where the file is stored, select the file, and select Insert.
3. Save or save and publish the page.
To format a picture, video, or audio on a page
1. On the page where you want format a picture, video, or audio, activate edit mode.
2. On the Image or Media tab, use the commands to format as you want.
3. Save or save and publish the page.
To insert and edit HTML markup
1. On the page where you want to insert and edit web-related code—for example, if you want to insert new HTML tags or modify the properties of the HTML tags—activate edit mode.
2. Do one of the following:
• To amend code that was generated by using the Format or Insert tab, place the cursor in the content area where the content is displayed, and then on the Format Text tab, in the Markup group, select Edit Source. Amend or enter the code, and then select OK.
• To insert new code that is not directly related to content you inserted by using the Format or Insert tab, such as JavaScript or HTML code snippets, on the Insert tab, in the Embed group, select Embed. Enter the code, and select Insert.
3. Save or save and publish the page.
To embed code from another source into a page
1. Navigate to the source of the content (for example, a Bing Map or a YouTube video), and use the source site’s tools to generate the code you want to embed.
2. Copy the code to the clipboard.
3. Go to the SharePoint page on which you want to display the content, and activate edit mode.
4. On the Insert tab, do one of the following to open the Embed dialog:
• Select the Video and Audio arrow, and select Embed.
• In the Embed group, select Embed Code.
5. In the text area of the Embed dialog, paste the code from the clipboard, and then select Insert.
6. Save or save and publish the page.
Reusable content
On publishing pages, the Insert tab has an extra command, Reusable Content, that you can use to add predefined content to your page—for example, a copyright, a byline, or a quote, such as your company’s mission statement. Reusable content is stored in the Reusable Content list at the top-level site of a site collection and can consist of blocks of plain text and HTML elements, such as formatted text, images, tables, and lists. You can use this functionality to create content once, and then allow users who edit pages to reuse these pieces of content.
In the Reusable Content list, you can create categories and folders to help you organize the reusable content items. The items can be designated as automatically updated or not:
Automatically updated items The reusable content is inserted into the page as a read-only reference. When the item is changed in the Reusable Content list, the page content is changed.
Not automatically updated items The reusable content is copied in the page. The page is not updated if the reusable content item is updated in the list.
Important
You must have Contributor permission to add items to the Reusable Content list. To add a reusable content item to your publishing page, you must have read permission to the Reusable Content list. To add or modify a category or folder in the Reusable Content list, you must have the Manage Lists permission.
To create a reusable content category
1. Navigate to the top-level site of your site collection, and then on the Settings menu, select Site contents to display the Site Contents page.
2. Select Reusable Content to display the default view of the Reusable Content list.
3. On the List tab, in the Settings group, select List Settings.
4. Under Columns, select Content Category.
5. On the Edit Column page, under Type each choice on a separate line, enter a name for your new category.
6. At the bottom of the page, select OK.
To create a reusable content item
1. On the Site Contents page, select Reusable Content.
2. Do one of the following:
• Select new item to create a new reusable HTML item.
• On the Items tab, select the New Item arrow, and then do one of the following:
• To insert plain text, select Reusable Text.
• To insert another type of content, such as rich text or an image, select Reusable HTML.
3. Do the following:
a. In the Title box, enter the title of the reusable content item.
b. In the Content Category list, select a category.
c. If you want the item to be inserted in a page as a read-only reference, select Automatic Update; otherwise, leave this check box cleared.
d. Enter the reusable content.
e. If you chose to create a reusable HTML item, format the text and insert HTML elements.
4. Select Save.
To use a reusable content item on a publishing page
1. On the publishing page where you want to use the reusable content, activate edit mode.
2. On the Insert tab, select Reusable Content, and then select the reusable content item you want to add to the page.
Manage pages
After you have created several pages, you might need to perform other tasks with them, such as changing the page that is your site’s home page, deleting pages, restoring deleted pages, or reviewing the popularity trends of your pages. You can also use alerts to receive email messages whenever a page is changed.
Tip
Like deleted documents and deleted list items, deleted pages are sent to the Recycle Bin. For more information about the Recycle Bin and about using alerts, see Chapter 3, “Work with content in lists and libraries.”
Both the Site Pages and Pages libraries have all the features of document libraries, such as history and version management, so the risk of losing your page changes is low. Major versioning is turned on by default for the Site Pages library, and major and minor versioning for the Pages library. You can also use content approval and workflow, and you can restrict the permissions regarding who can edit and publish pages.
See Also
For more information about content approval, see Chapter 4, “Make lists and libraries work for you.” For more information about workflow, see Chapter 11, “Work with workflows.”
To view all pages in either the Pages or Site Pages library
1. Do one of the following:
• Go to a page, and then, on the Page tab, in the Page Library group, select View All Pages.
• From the Site Contents page, select Pages or Site Pages.
To make a page the home page for a site
1. Go to the page you want to make the home page.
2. On the Page tab, in the Page Actions group, select Make Homepage.
1. Go to the page, and then on the Page tab, in the Manage group, select Page History.
The page history displays static content; additions are displayed in a green font and deletions in a red strikethrough font
To compare two versions of a page
1. Display the page history of the page as described in the previous procedure.
2. In the left navigation pane, below one of the versions you want to use in the comparison, in the Compare with version list, select a prior version number.
Display what has been added and deleted between one version of the page and another
To revert to a previous version of a page
1. Do one of the following to display the page’s version history:
• Display the page history of the page as described in the “To display a page’s history” procedure earlier in this topic, and then select Version History.
• Display all pages as described in the “To view all pages in either the Pages or Site Pages library” procedure earlier in this topic, select the page you want to revert, and then on the Files tab, in the Manage group, select Version History.
2. Select the date and time in the Modified column for the version you want to restore as the current version, and then select Restore.
Use the menu to view, restore, or delete a version of a page
3. Select OK to confirm that you want to replace the current version of the page with the selected version of the page.
4. Go to the page and, in the yellow notification message, select Revert to template.
The yellow notification message states that the page has been customized from its template
5. Select OK. The yellow notification message disappears.
1. Do one of the following:
• Go to the page you want to delete. On the Page tab, in the Manage group, select Delete page, and then select OK to confirm that you want to send the page to the site Recycle Bin.
• Display all pages as described in the “To view all pages in either the Pages or Site Pages library” procedure earlier in this topic, and then do one of the following:
• Right-click the page, and then select Delete.
• Select the page, and then on the Files tab, in the Manage group, select Delete Document.
Tip
You cannot delete the home page of a site.
1. Do one of the following to display the Recycle Bin:
• On the Quick Launch, select Recycle Bin.
• On the Site Settings menu, select Site Content, and then select Recycle Bin.
2. Select the page you want to restore, and then select Restore Selection.
3. Select OK to confirm that you want to restore the page.
1. Go to the page for which you want to set up an alert.
2. On the Page tab, in the Share & Track group, select Alert Me, and then in the list, select Set an alert on this page.
3. In the New Alert dialog, select your preferences so that you receive an email based on your specific criteria and frequency, and then select OK.
Use app parts and web parts
As you customize your site, you might decide to add information other than static text and images. This information might be stored in lists or libraries or in some other data source. You add such content by using app parts and web parts. You can insert both app parts and web parts on multiple pages, and you can also insert them multiple times on the same webpage.
SharePoint provides built-in app parts and web parts, as detailed in the following table. The category specified in the table is the category name that is displayed when you use the app parts pane. The availability of an app part or web part depends on the type of site you are working with.
In addition to built-in web parts, you can create your own web parts by using tools such as Visual Studio. You can also import custom web parts.
All app parts and web parts have a set of common properties that you can use to control the part’s appearance and behavior, such as toolbar type, chrome type, the part’s height and width, and whether users can minimize it so that only the title is visible. You can configure the common properties by using either the web part tab or the Appearance, Layout, or Advanced section of the web part tool pane.
Each app part and web part can also have a set of custom properties. These properties might be displayed on a separate contextual tab, or they might be in the web part tool pane, in their own section, or in the Miscellaneous section. For example, if you insert an app part on your page that displays the contents of a list, when you select the check box next to the app part title (in edit mode), three tabs appear on the ribbon: Files, Library, and Web Part.
Tip
If you are having persistent problems with an app part or web part or a web part connection, you can use the Web Part Maintenance page to delete the app part or web part. You can navigate to the Web Part Maintenance page by appending ?Contents=1 to the page’s URL; for example, intranet.wideworldimporters.com/sites/Sales/SitePages/Home.aspx?contents=1.
To activate a web part page for editing
1. Go to the page you want to edit, and then on the Page tab, select Edit.
To add an app part to a content area
1. On the page where you want to add an app part, activate edit mode and place the cursor where you want the app part to be displayed.
2. On the Insert tab, in the Parts group, select App Part to open the app parts pane.
3. Select the app you want to add to your page.
The app parts pane shows an app part for each list or library on the site, in addition to app parts for apps you have installed
4. Select Add.
To add a web part to a content area
1. On the page where you want to add the web part, activate edit mode and place the cursor where you want the web part to be displayed.
2. On the Insert tab, in the Parts group, select Web Part to open the web parts pane.
3. Under Categories, select a category, and then under Parts, select the web part you want to add to your page.
When a web part is selected, the About The Part section provides a description of the web part
4. Select Add.
To add an app part or web part to a web part zone
1. On the page where you want to add an app part or web part, activate edit mode, and then in the zone where you want to add the app part or web part, select Add a Web Part to open the web parts pane.
2. Under Categories, select a category, and then under Parts, select the web part you want to add to your page.
3. Select Add.
To display the Web Part tab and any other contextual tabs for a web part
1. In edit mode, select the check box for the web part by selecting the title bar of the web part.
To open the web part tool pane
1. In edit mode, do one of the following:
• Display the Web Part contextual tab, and then select Web Part Properties.
Use the Web Part tab to open the web part tool pane, create web part connections to related lists, and minimize, restore, or delete the web part
• Point to the web part, select the arrow on the title bar of the app part or web part, and then select Edit Web Part.
Use the commands on the menu to minimize, close, or delete the web part or app part or to open the properties pane
Tip
The Web Part tab, web part menu, and web part tool pane can be opened only when you are editing the page.
To configure the content that a list or library app part displays
1. Open the web part tool pane as described in the previous procedure.
2. In the web part tool pane, immediately below List Views, do one of the following:
• Select a view that was previously created from the list or library.
Use the List Views section to select the view you want the app part to use and to select the app part toolbar
• Select Edit the current view, and then, if a dialog box opens, select OK to save your changes. The Edit View page is displayed. Configure what you want the web part to display, and then select OK.
Tip
You configure a view for an app part the same way you configure a view for a list or library. For more information about views, see Chapter 3, “Work with content in lists and libraries.”
To move an app part or web part to another location on a page
1. With the page activated for editing, point to the title bar of the app part or web part so that the pointer changes to a four-pointed arrow.
2. Drag the web part to the new area on the page.
To remove an app part or web part from a page
1. Do one of the following:
• Display the Web Part tab, and then in the State group, select Delete.
• On the web part’s title menu, select Delete.
2. Select OK to confirm that you want to permanently delete the app part or web part.
To save modifications to a web part page
1. On the web part page, on the Page tab, select Stop Editing.
Skills review
In this chapter, you learned how to:
Important
You must have sufficient permissions to perform the operations involved in each practice task to complete that practice task. For more information, see Appendix A, “SharePoint 2016 user permissions and permission levels.”
Understand SharePoint pages
There are no practice tasks for this topic.
Create pages
Go to a SharePoint team site where you have sufficient rights to create a page, and then perform the following tasks:
1. Create a wiki page named Wide World Importers.
2. Position your cursor in the content area, enter Wide World Importers, and then on a new line, enter We are specialist importers of unique furniture [[BedRoomFurniture|bedroom furniture]], [[OfficeFurniture|office furniture]] and [[GardenFurniture|garden furniture]] to create three wiki links.
3. Save the page.
4. Select the forward links to create the three pages, and on each page, create a link back to the Wide World Importers page before saving each page.
5. Create a web part page named Kitchen Furniture, using the Header, Left Column, Body layout, and save it in the Site Pages library.
6. Stop editing the page, and leave your browser open if you are continuing to the next set of practice tasks.
Add content to pages
Go to the Wide World Importers page and activate it for editing, and then perform the following tasks:
1. Change the page layout to Two columns with header and footer.
2. Move the text Wide World Importers to the top area and style it as Heading 1.
3. In the left column content area, do the following:
• Insert the pjcov.jpg picture from the practice file folder, saving the file in the Site Assets library.
• Create a link to the Kitchen Furniture page, and then save the page but continue editing.
4. In the bottom content area, insert the Wildlife.wmv video from the practice file folder, saving the file in the Site Assets library.
5. Use the commands on the Media tab to set the video to Start Automatically and use a player style of Light.
6. Save and check in the page, leaving your browser open if you are continuing to the next set of practice tasks.
Manage pages
Go to the Wide World Importers page, and then perform the following tasks:
1. View all pages in the Site Pages library, and delete the Kitchen Furniture page.
2. Display the page history of the Wide World Importers page.
3. Compare the current version with version 2.0, and then restore version 2.0.
4. Create an alert on the page, retaining the default values.
Tip
If SharePoint is not configured to send email messages, an Error page will be displayed. If this page appears, you cannot complete the rest of the steps in this procedure. Check with your SharePoint administrator before you proceed.
5. Activate the page for editing, delete the content in the top content area, and save the page.
6. Check that you have received two emails, one stating that an alert was successfully created, and another stating that the page was modified.
7. Use Manage My Alerts to delete the alert you created on the Wide World Importers page, and then leave your browser open if you are continuing to the next set of practice tasks.
Use app parts and web parts
Go to the Wide World Importers page, and then perform the following tasks:
1. Activate the page for editing, and in the top content area, add an app part for the Site Assets library.
2. Open the Site Assets web part tool pane.
3. Change the title to Image and Video files and the Chrome Type to Title and Border, and prevent users from minimizing the app part.
4. Apply your changes.
5. Edit and save the current view so that the Modified and Modified By columns are not displayed in the app part.