Building a Product Centric Site in SharePoint 2013 Hands-On Lab

2013

Building a Product

Centric Site in

SharePoint 2013

Hands-On Lab

Lab Manual

This document is provided “as-is”. Information and views expressed in this document, including URL and

other Internet Web site references, may change without notice. You bear the risk of using it.

This document does not provide you with any legal rights to any intellectual property in any Microsoft

product. You may copy and use this document for your internal, reference purposes.

© 20142 Microsoft. All rights reserved. Formatted: Swedish (Sweden)

Formatted: Swedish (Sweden)

Page 1

Contents Lab Objectives ........................................................................................................................................................ 2

Background ........................................................................................................................................................ 2 Technologies .......................................................................................................................................................... 2 Audience ................................................................................................................................................................ 2 Scenario ................................................................................................................................................................. 2 Getting Started ....................................................................................................................................................... 1

Connect to the Lab Environment ....................................................................................................................... 1 Open the Lab Environment ................................................................................................................................ 1

Exercise 1 – Connect the Data Source .................................................................................................................. 2 Scenario ............................................................................................................................................................. 2 Task 1 – Enable a list for sharing ...................................................................................................................... 2 Task 2 – Share the product term set ................................................................................................................. 4 Task 3 – Connect the publishing site to the product catalog ............................................................................. 5

Exercise 2 – Configure the Publishing Site ............................................................................................................ 7 Scenario ............................................................................................................................................................. 7 Task 1 – Investigate the default page layouts ................................................................................................... 7 Task 2 – Change the Catalog Item page layout .............................................................................................. 11 Task 23 – Work with the Refinement web part ................................................................................................ 13 Task 34 – Add a Refinement web part .......................................................................................................... 164

Exercise 3 – Navigate the Publishing Site ........................................................................................................... 22 Scenario ........................................................................................................................................................... 22 Task 1 – Explore the Front End Product Catalog ............................................................................................ 22

Summary .............................................................................................................................................................. 23

Hands-on Lab Building a Product Centric Site in SharePoint 2013

Microsoft Confidential Page 2

Building a Product Centric Site in SharePoint 2013

Estimated time to complete this lab: 30 minutes

Lab Objectives

This lab teaches you to create a search-driven web site using managed navigation and dynamic pages. The site is designed to expose an intranet-housed product catalog through an external facing SharePoint 2013 publishing site.

Background

In SharePoint 2013, assets can reside in separate site collections, and then the content can be combined across site collections through search capabilities. After enabling catalog connections on an asset—such as a list of products or a document library of PDFs—web developers can set which site collections can access the catalog. When the catalog connection is made on a site collection with permissions, default topic.aspx and details.aspx pages are created. These default page layouts contain a content search web part which can be configured to access and expose specific content

within the catalog with minimal background coding by the web designer or developer.

After completing this lab, you will be better able to:

Publish a taxonomy driven SharePoint list for sharing as a product catalog

Connect a publishing site to the catalog

Use term driven navigation to explore the catalog

Implement custom page layout templates

Add and configure Refinements to filter the catalog

Implement and configure the Recommendation web part to surface

Technologies

SharePoint 2013 Term Store Management Tool

Audience

SharePoint Site Administrators and SharePoint IT Professionals

Scenario

This lab takes you through the steps to create a search driven and dynamic product catalog on SharePoint 2013. The Content Search web part picks up the context of the page and uses the filter queries from the search engine to bring specific content to a page.



The final pages will look like these: Category Page

Details page

Page 1

Getting Started

Connect to the Lab Environment

This lab is completed using virtual machines that run on Windows Server 2012 Hyper-V technology. To log on to the virtual machines, press CTRL+ALT+END and enter your logon credentials.

Note that you are logged on to the SharePoint (SP) virtual machine (VM) as Garth Fort, with the credentials CONTOSO\GarthF, pass@word1.

Open the Lab Environment

1. To begin the lab, open Internet Explorer, navigate to the demo home page at http://www.contoso.com/sites/SPHOL-Product. When the VM first starts, there is some indexing and compiling that must complete before the page will load. You may need to try again to load the site. Note that you are logged into SharePoint as Garth Fort with the following credentials:

Username: CONTOSO\GarthF

Password: pass@word1

http://www.contoso.com/sites/SPHOL-Product



Exercise 1 – Connect the Data Source

Estimated time to complete this exercise: 15 minutes

Scenario

The Term Store Management Tool in SharePoint 2013 provides a place to identify and configure

navigation taxonomy and then use that taxonomy to build the web site navigation, manage consistent page layouts, and build friendly URLs.

In this exercise, you will learn how to enable a list of products for sharing, and then use the Term Store Management Tool to share the list’s product term set with a site collection. You will then use the Connection Manager to connect a page in a different site collection with the list.

Task 1 – Enable a list for sharing

In this task, you will learn to enable a list for sharing so it can be accessed for catalog connections in other site collections. The ProductsHOL list resides in the Catalog site collection (http://intranet.contoso.com/sites/Catalog). This list contains products that Contoso distributes. Each item is tagged with specific product related metadata.

1. In a new Internet Explorer tab (press CTRL+T), navigate to the SharePoint list, ProductsHOL, in the Catalog site collection:

http://intranet.contoso.com/sites/Catalog/Lists/ProductsHOL/

Copy the above link and paste it in the Address bar of the new tab.

2. Note the Item Number and the Item Category columns.

The Item Number is the Primary Key used to connect the list with catalog pages. You

will see these numbers in the URLs for product pages.

The Item Category column contains the Electronics categories (audio, cameras,

computers, etc) and their sub-categories (Car audio, Headphones, MP3, etc).

http://intranet.contoso.com/sites/Catalog

http://intranet.contoso.com/sites/Catalog/Lists/ProductsHOL/



3. Click the Item Category Open Menu, and then expand the Electronics term.

The Item Category metadata aligns with the term set in the Term Store Management Tool, which will drive the SPHOL-Product web site navigation and the content on all of the catalog pages.

Now let’s look at the catalog connections that allow you to use this list in other site collections.

4. On the LIST tab, in Settings group, click List Settings.

5. Under General Settings, click Catalog Settings.

6. Enter the following data on the Catalog Settings page:

Catalog Sharing: Click Enable this library as a catalog check box.

Anonymous Access: Click Enable anonymous access.

NOTE: When Enable anonymous access? window displays, click Make Anonymous.

Catalog Item URL Fields: From Available Fields list, click Item Number, and then click Add to move it to the Selected Fields list.

Navigation Hierarchy: Click Item Category in drop down.



7. Click OK to close the Catalog Settings page.

8. In the top navigation, click Catalog to open the Catalog site collection home page.

You have now shared the Products – HOL list to use in other site collections.

Task 2 – Share the product term set

In Task 1, you enabled the Products - HOL list to be a catalog source. This list uses a managed metadata term set (or taxonomy term set) called Product Hierarchy, which is centrally defined in the

Catalog intranet site. This Product Hierarchy was created when the lab environment was put together for you. In this task you will investigate the Product Hierarchy in the Term Set Term Store Management Tool.

1. If not already on the Catalog site collection home page, navigate to the following URL:


2. In Settings menu, click Site settings.

3. Under the Site Administration, click Term store management.




4. In the Term Store Management Tool, at the top of the TAXONOMY TERM STORE, note the Managed Metadata Service and associated groups below it.

5. Expand the Contoso group, and then expand the Product Hierarchy group.

6. Expand the Electronics group and note the categories aligned with the Item Categories in the Products – HOL list.

Task 3 – Connect the publishing site to the product catalog

In Tasks 1 and 2, you prepared a list of products to share with site collections. You then investigated the Product Hierarchy managed metadata. In this task, you’ll use the Manage catalog connections feature in Site settings to connect a product

centric publishing site with the Products - HOL catalog list.

1. Navigate to the HOL home page:

http://www.contoso.com/sites/SPHOL-Product.




2. If necessary, use these log in credentials:

User name: contoso\garthf

Password: pass@word1

3. From Settings menu, click Site settings.

4. Under Site Administration, click Manage catalog connections.

5. Click Connect to a catalog.

NOTE for the next step: Because search must crawl a catalog connection before it is available,

you may be unable to connect immediately to the catalog you just set up.

If the Products - HOL catalog does not display in the list of Available Catalogs, you can use the Catalog-Products. This product catalog, located at http://intranet.contoso.com/sites/Catalog/Lists/Products, has already been set up for catalog publishing and crawled by SharePoint Search Service.

6. In the list of Available Catalogs, next to Products – HOL or Catalog - Products, click Connect.

7. On the Catalog Source Settings page, for Navigation Hierarchy section, enter Electronics in the Root term of hierarchy text box.

NOTE: The text box is auto-complete enabled and should recommend Electronics [Product Hierarchy] as you type Electronics in the text box.

You can also click the tags image to the right of the text box to browse for a valid choice through the Term Store Management Tool.

8. Under Navigation Pinning, ensure Pin terms to site navigation checkbox is checked.

http://intranet.contoso.com/sites/Catalog/Lists/Products



This will ensure that your site’s navigation will be populated by terms in the Product Hierarchy term set.

9. Leave all other options to default values and click OK.

This will create a connection between the web site (SPHOL-Product) and the Product Catalog. You will note the top and left navigation now show hierarchical terms used by the Product Catalog.

10. Click the SharePoint Site icon in the upper left corner of the page to return to the SPHOL-

Product home page.

11. Note the new navigation on the site aligned with the Item Category column in the Products lists.

Exercise 2 – Configure the Publishing Site


Scenario

In this exercise, you will investigate the default page layouts created when the catalog connection was made. You will then learn how to brand and customize the Product Catalog page layouts by using the Term Store Management Tool to apply custom page layout. You will then use the Term Store Management Tool to configure refiners for all of the product catalog categories, and then add and customize a Recommendation web part to surface pre-crawled content.

Task 1 – Investigate the default page layouts

In this task, you will learn to use the Term Store Management Tool to set target pages for the Product terms (Categories - Audio, Cameras, Computers, etc.), and the item pages (product details). These pages allow for multiple columns on the pages to accommodate the refinement web part.

First, let’s peruse the default rollup and detail pages created when a connection is made to a catalog.

These pages are stored in the Pages library of the site collection and are used to display the data.

1. To view a category page, on SPHOL-Product home page, in the top navigation, point to Audio, and then click Car audio.



2. The Car Audio page displays.

NOTE: This page is using a Content Search web part to pull and display the catalog information from the Products – HOL.

3. Note the friendly URL in the Address bar: http://www.contoso.com/sites/SPHOL-Product/audio/car-audio

4. Click right arrow in in the upper right corner of the page to scroll through the pages of Audio devices.

5. Scroll through the Car Audio pages.

http://www.contoso.com/sites/SPHOL-Product/audio

http://www.contoso.com/sites/SPHOL-Product/audio



6. To view a details page, click the first Proseware 50W Car Radio item on the Audio > Car Audio page.

7. Note the friendly URL in the Address bar. The final number in the URL aligns with the Item Number in the Products – HOL list.

8. Note the list of metadata on the page. This data aligns with the various fields in the Products – HOL catalog.

Now let’s take a look at the .aspx pages driving this data.

9. In left navigation, click Site Contents.

10. In Site Contents double-click Pages to open the library.

The Category-Electronics.aspx is the default page layout used for categories and sub-categories. By default, it contains the Content Search web part configured to pull data from the catalog list.

The CatalogItem-Electronics.aspx is the default page layout used to display the product details pages. This page uses a Catalog-Item Reuse web part and page controls to display the various product attributes. Title, Description, and other attributes about the product are pulled from the product catalog list. This list of item-level metadata is built into the page layout template and not in a web part. This makes the page content, and hence, the catalog item property details, easier for indexing by search crawlers.

Now, let’s use Term Store Management Tool to view the default layout page templates

11. From the Settings menu, click Site settings.

12. Under Site Administration, click Term store management.

13. In the Term Store Management Tool, expand the Site Collection – www.contoso.com-sites-SPHOL-Product node.



14. Expand the SPHOL-Product Navigation term set node.

15. From SPHOL-Product Navigation list, click Audio.

16. Click Term-Driven Pages tab.

This is where you can set the friendly URL and specify custom .aspx pages to use for Category, Sub-category, and Product Detail pages.

17. Note the Friendly URL setting:

18. Note the Target Page Settings and the URLs pointing to the Category-Electronics.aspx page in the Pages library.



19. Note the Catalog Item Page settings and the URLs point to the CatalogItem-Electronics.aspx page in the Pages library.

20. Click SharePoint icon at top left of page to go to the SPHOL-Products home page.

Task 2 – Change the Catalog Item page layout

The Refinement web part is an easy way to implement filtering on a page by using the same taxonomy the navigation is already using, which is stored in the product catalog.

In this task, you will learn to enable and use the Faceted Navigation tab in the Term Store Management Tool to allow users to configure refiners for terms that are used by refinement and filter controls on SharePoint sites. You will then configure refiners for the categories and then add the refinement web part to the page. First you need to enable faceted navigation for the terms used by the product catalog. This is done from the site’s Term Store Management Tool:

1. Navigate to the SPHOL-Product home page:


2. From the Settings menu, click Site settings.

3. Under Site Administration, click Term store management.

4. In Term Store Management Tool, expand the Site Collection – www.contoso.com-sites-SPHOL-Product node and click SPHOL-Product Navigation.

5. Click the Intended Use tab.

6. Click Use this Term Set for Faceted Navigation check box.




7. Click Save.

Now, that you’ve enabled Faceted Navigation, you can add a custom refiner to the TV and video.

8. In the Term Store Management Tool, in the left navigation, under Managed Metadata Service, expand Contoso.

9. Expand Product Hierarchy and note Electronics term set.

10. Click Electronics and then click Faceted Navigation tab.



11. Note Refiners for this term. The RetPrice and RetColor are default refiners for all catalog items.

12. Expand the Electronics group under the Managed Metadata Service in the left navigation.

13. Click Audio, and then Home appliances and note the same Refiners for this term for each of them.

14. Click TV and video and note additional RetScreenSize and RetRefreshRate.

15. To add refiners to a term set:

a. On the left navigation pane, under Electronics, click Home appliances term.

b. On the Faceted Navigation pane, under Inheritance, click Stop inheriting.

c. In Stop inheriting refiners dialog box, click OK.



d. Under Refiners, click Customize refiners.

e. In Available refiners list, click RetWeight (under Other), and then click Add to move it to the Selected refiners list.

f. Do the same to add RetBrand to Selected refiners list.

g. At bottom of Refinement configuration window, click Preview refiners.

h. On the left of the Refinement Web Part preview, click 36.5000-up to 48.0000 for RetWeight to refine the results.

i. Click OK at bottom of Refinement Web Part preview window to close the screen.

j. Click OK to close Refinement configuration for Home appliances window.

k. Click Save to save and close the Home appliances refiners window.

Task 4 3 – Add a Refinement web part

Finally, you are ready to add the Refinement web part to the product sub-category page.



First, you will make a few changes to the Content Search web part that was created in the page by default. The changes will customize the layout of the products on the page.

1. Navigate to a product sub-category page by pointing to Computers in the top navigation and then clicking Laptops.

2. From the Settings menu, click Edit page.

3. On the Edit Page dialog, click on Edit Page Template.

4. Note the existing web part $Resources:cms;WebPartZonetitle_Dynamic

This is a Content Query web part that was automatically inserted on the page when the site was connected to the Products – HOL list. The Content Query web part has many settings, including an extensive query editor. In the following steps you will visit some of these settings:

5. Access the $Resources:cms;WebPartZonetitle_Dynamic web part’s menu and click Edit Web Part.

6. In the web part properties pane, explore the following properties, changing values where indicated:

a. Click Change Query. This displays the search query editor window. Click Cancel to

close.

b. Number of items to show: Change 3 to 6. This property tells how many product items to show on the web part at once.

c. Control: List with Paging. This option gives the pagination arrows on the top-right side of the web part.



d. Item: Change the value to Picture on left, 3 lines on right.

This is where you pick from a list of available display templates. More display templates can be created manually and uploaded to the Display Templates/Content Web Parts subfolder in the master page gallery. Display templates are covered in more detail in another Hands-On-Lab.

e. Expand Property Mappings.

f. Click Change the mapping of managed properties… check box.

g. In Line 2, set the value to RetDescriptionOWSTEXT.

h. In Line 3, set the value to RetColorOWSTEXT.

i. Expand Appearance and change the Title to Products.



j. From Chrome Type drop down, click Title Only.

k. Expand Layout and from Zone drop down, click Bottom Center.

This will allow you to place the Refinement web part to the left of the Product listings.

l. Click OK to save changes to the web part.

7. To add the Refinement web part:

a. In the Left web part zone, click Add a Web Part.

b. In the add web part dialog, from the Categories section, click Search.

c. From the Parts section, click Refinement, and then click Add.



The refinement web part includes refiners for Author and Modified date. This would make sense for a knowledge base of articles, but not for a Produce Catalog.

8. To change the Refinement properties:

a. On the Refinement web part, click the Refinement Web Part Menu and click Edit Web Part.

b. In the Refinement web part settings, note or set the following properties, as needed:

Refinement Target: Products-Default



Click Use the refinement configuration defined in the Managed Navigation term set radio button.

c. Click OK to save changes.

d. Note the updated refinement web part.

9. On the Page tab, in the Edit group, click Save.

10. To view the Home appliance refiners:

11. In top navigation, click Home Appliances.



12. Note your newly added refiners: RetWeight and RetBrand.

13. Click on various refiners.

14. Note the products update on the right as you refine.

As you click on the refiner values, you’re essentially narrowing down the search results shown in the Content Search web part on this page. With each refinement, available refiner values are also updated such that only the refinement values applicable to resulting products are displayed.

In this exercise, you used the Term Store Management Tool to set up faceted navigation and customize the refiners for the TV and video categories and sub-categories. You then added a Refinement web part to the page to filter the pages using the same taxonomy the navigation is already using, which is stored in the product catalog.

Exercise 3 – Navigate the Publishing Site


Scenario

In this exercise, you will navigate through the product site that you set up in an earlier exercise. You’ll investigate how the page layouts appear for the categories, the subcategories, and the details pages. You’ll also click through the refiners on the subcategory pages.

Task 1 – Explore the Front End Product Catalog

1. Navigate to the SPHOL-Product home page:


2. In the top navigation, click Cameras and note the results.

3. Click Black under RetColor refiner and note updated results.

http://www.contoso.com/



4. From the top navigation menu, click Home Appliances.

5. Note a new group of refiner values under RetWeight.

6. Click 36.5000-up to 48.0000 under RetWeight.

7. Hover over the middle bar of the RetPrice bar graph (100 up to 500 (64)).

NOTE: The (6) indicates 6 results.

8. Click the middle bar of the RetPrice bar graph.

9. Note the updated list of refiner values and the 16 resulting products.

10. Click a home appliance product to view the item details.

11. Note the friendly URL in the address bar. This site is in the www.contoso.com web application,

even though the page content is coming from the product catalog on the intranet site, http://intranet.contoso.com/sites/catalog.

Summary

In this lab, you were introduced to the concept of product catalogs in SharePoint. Specifically, you learned to:

Publish a catalog for consumption by other SharePoint sites

Connect a site to an existing catalog

Configure Content Search web parts to expose contents of the catalog

Use term sets used by the catalog as navigation

Use navigation terms to search through the catalog

http://www.contoso.com/

Documents

Building a Product Centric Site in SharePoint 2013 Hands-On Lab