SITE DESIGN & ADVANCED WEB PART FEATURES...

Overview OVERVIEW... 2 SITE DESIGN & ADVANCED WEB PART FEATURES... 4 SITE HIERARCHY... 4 Planning Your Site Hierarchy & Content... 4 Content Building Tools... 5 Pages vs Sites... 6 Creating Pages... 6 ADDITIONAL PROVIDED WEB PARTS... 7 Adding Web Parts... 7 Page Viewer Web Part... 8 Resizing the Page Viewer Web Part Window... 8 Relevant Documents Web Part... 9 Site Users Web Part... 10 CREATING VISUAL LINKS LISTS... 10 Creating a Links List & Icon Property... 10 Creating View & Adding Web Part... 11 Adding Internal Link Content... 12 Adding External Link Content... 13 ADVANCED WEB PART MANAGEMENT... 14 Closing Web Parts... 14 Advanced Web Part Options... 14 Deleting a Web Part... 14 REVIEW... 15 COLLABORATION TOOLS... 16 DISCUSSION BOARDS... 16 Creating a Discussion Board... 17 Discussion Board Views... 17 BLOGS... 18 Creating a Blog... 18 Using Categories... 19 Managing Blogs... 20 Blog Comments... 21 WIKIS... 22 Creating a Wiki Library... 22 Editing a Wiki Page... 23 Creating New Wiki Pages... 23 Managing Wiki Pages... 24 REVIEW... 25 DASHBOARDS... 26 CREATING LIST FILTER DASHBOARDS... 26 Creating Lists by Importing Spreadsheets... 26 Creating a Dashboard Page Link to the Quick Launch Menu... 27 Creating the List Dashboard... 28 Creating a Refresh Link... 29 CREATING FORM FILTER DASHBOARDS... 30 Adding the Form Filter Web Part... 30 SharePoint 2010 Level 2 version 1.1 2

Format the Form Web Part... 31 REVIEW... 32 MANAGING PROJECTS & TASKS WITH SHAREPOINT... 33 USING THE TASKS LIST... 33 Creating a Task List... 33 Integrating SharePoint Tasks with Outlook... 34 Adding Task Web Parts and Views... 35 PROJECT & ISSUE TRACKING TASKS... 36 Creating a Project Task List... 36 Creating an Issue Tracking Task List... 37 Creating Issue Categories... 37 Using Issue Tracking Lists... 38 Customizing List View... 38 REVIEW... 39 CONTENT TYPES AND SITE TEMPLATES... 40 CONTENT TYPES... 40 Creating Content Types... 41 Creating a List Item Content Type... 42 Adding a Content Type to a List... 43 Modifying the List View... 44 Using the List Content Type... 45 Deleting Content Types... 45 SITE TEMPLATES... 46 Creating the Site Design... 46 Adding a Content Type to a Template... 47 Creating the Site Template... 48 Using the Site Template... 49 Deleting a Site Template... 49 Updating a Content Type & Template... 50 REVIEW... 51 INFOPATH INTEGRATION & WORKFLOWS... 52 INFOPATH WITH SHAREPOINT... 52 Creating an InfoPath Form... 52 Uploading an InfoPath Form... 53 Using InfoPath in SharePoint... 54 WORKFLOWS... 55 Creating a Workflow for an Issue Tracking List... 55 Starting a Workflow... 56 Using a Workflow... 57 REVIEW... 58 3 SharePoint 2010 Level 2 version 1.1

Section I Site Design & Advanced Web Part Features Site Hierarchy One of the most important parts of a SharePoint site is how it is designed. If the design is not carefully planned it can fail in many ways such as: 1) its ability to be changed and grow as the company does, 2) user adoption, 3) overall usefulness to the company. Therefore the overall design and architecture of the site is critical to its success. This includes the general layout, hierarchy, content, and decisions that need to be made on components for the site. For example, do you use a site or a page? Do you use a content type or a workflow? Should something be a web part or menu item? Are you using Metadata or folders? These and many more questions need to be considered when building a site. If consideration on these aspects is not included in the build, it could mean hours of updates in the future as the site changes, or even a site that has to be scrapped and re-built from scratch instead. By putting the initial time in the planning stages, you will save days, if not weeks, of time in the future, as your site grows. In this class, we will cover many of those considerations you need to weigh as architecting your site. We will start by looking at the overall site hierarchy and when to use pages vs sites in your build. Planning Your Site Hierarchy & Content Outline the current content and hierarchy you are going to use for this class site or your own discuss considerations when planning the site... 1. How are people going to access these areas what is the logical layout 2. What types of info will you collect in each of your lists and libraries a. What types of metadata columns will you use as well as type such as choice, person, etc... i. If you are using any choice metadata columns, what will those choices be? b. Will you want to re-create this list or library in other places (ie use the same metadata)? If so, is it possible you would ever need to make changes across all existing libraries or lists? 3. Will you have any sites/pages that will look the same and have the same type of data (templates) 4. When to use sites vs pages a. Will a page need to pull or share info with another? SharePoint 2010 Level 2 version 1.1 4

Content Building Tools When building a site, you will often want to have locations where you store site development items such as libraries that contain pictures used on the site, or libraries that house all of your site pages, etc... Most likely you will want to keep these behind the scenes from your general site users, and not provide any navigation links or menu items to them. If you are going to need places to house these types of items, it is a good idea to create them before you start building your site, so you can quickly use them when needed. In this case we will build a photo library and a site page library. 1. From your main home page, click on Site Actions, then View all Site Content, then click on the Create item at the top of the list 2. Select Library under the Filter By: section, then select Picture Library 3. In the Name field, type: Pictures for Site 4. Click on the More Options button 5. Select No to display on the Quick Launch then click the Create button 6. Click on Site Actions, View all Site Content, then Create again 7. In the Libraries section, select Document Library 8. In the Name field, type: Site Content Library 9. Click on the More Options button, then select No to display on the Quick Launch then click the Create button 10. Return to your main home site by clicking on the Navigate Up icon next to your Site Actions button, and selecting your home site 5 SharePoint 2010 Level 2 version 1.1

Pages vs Sites Deciding when to use Pages vs Sites in SharePoint can be tricking. To your end user, both look the same and they will never need to know or care as to which it is. However, when you are working on your site architecture, their differences will play a big role in what you use. Consider the following when deciding which to use: Sites Have their own content and do not share content (even as web parts) across other sites Have their own navigation items such as a Quick Launch menu Can create templates to quickly recreate similar sites Can be created from existing templates that already have pre-created content such as libraries, lists, and calendars Pages Can utilize any content contained on the parent site for which they are stored Do not have their own independent menu or navigation items and can share the same Quick Launch menu as the parent site Can select from many web part page layouts that lets you deviate from the standard Left/Right column site layout In this section we will look at how to add a page, and later we will create a site template that we can re-use in our site architecture. Creating Pages We will create a page that we are going to use later to build a dashboard on. Because our dashboard is going to utilize current content from our main site, we want to create a page that is contained on the site, so it can pull that content. 1. From your home site page, click on Site Actions, More Options, then select Web Part Page from the Page section, then click the Create button 2. Name the page Customer by Agent 3. Select the Header, Left Column, Body layout template 4. Ensure that the Site Content Library is selected for the Document Library to save this page 5. Click the Create button when finished SharePoint 2010 Level 2 version 1.1 6

Additional Provided Web Parts There are many different web parts you can use in SharePoint without having to create the content first. We are going to explore some more unique ones in this section and how to customize them. Adding Web Parts We will start by adding some of these web parts to our page. 1. Make sure you are on your main home page 2. Click on Site Actions, then Edit Page 3. Click on the Add a Web Part link for the Left section 4. Select the Content Rollup category, then select Relevant Documents, and click the Add button 5. Repeat the above step to select the Site Users web part (under the Social Collaboration category) and the Page Viewer (under the Media and Content category) 7 SharePoint 2010 Level 2 version 1.1

Page Viewer Web Part The Page Viewer Web Part allows you to view other pages (either external or internal) within a window on your SharePoint page. All we need to do is supply the URL to the desired page that we what displayed in the web part. 1. While still in Edit Page mode on your main page, within the Page Viewer web part, click on the Open the tool pane link 2. In the Link field of the tool pane (on the right), type: http://www.mcstech.net 3. Click on the + symbol next to Appearance so you can view the options 4. Change the text in the Title field to: MCS Home Page 5. Click OK to close the tool pane 6. Use the scroll bars to move the image in the Page Viewer web part 7. Note that you can click on links within the website in the Page Viewer web part and the external SharePoint page remains untouched Resizing the Page Viewer Web Part Window The page viewer web part by default, is not very large. We can easily adjust the size of the web part to make the window larger on the page. 1. Open the tool pane for the Page Viewer web part again, by clicking on the drop-down arrow in the web part s upper right corner to access its menu, and select Edit Web Part 2. In the tool pane, click on the plus (+) next to the Appearance item to expand it 3. In the Height section, check the Yes radio button, select Inches from the drop-down and type: 3 in the field proceeding it 4. Do the same for the Width but make it 7 inches 5. Click OK SharePoint 2010 Level 2 version 1.1 8

Relevant Documents Web Part The Relevant Documents web part allows you to view all documents, even across multiple libraries on the sites that are relevant to you. 1. Click on Site Actions, then More Options 2. In the Library section, select Document Library 3. In the Name field, type: HR Documents, then click Create 4. On the Documents tab, on the ribbon for the Document Library, click the Upload Document button, then click the Browse button 5. Locate and select the Expense Procedures document from your Practice Files folder 6. Click OK in SharePoint to upload the document 7. Return to your main home page and notice that the document appears in the Relevant Documents web part 8. Click on the drop-down arrow on the far right of the web part s title and then select Edit Web Part from the menu 9. In the tools panel, expand the Data section 10. Notice the various options to display your relevant documents, then click Cancel 9 SharePoint 2010 Level 2 version 1.1

Site Users Web Part The Site Users web part allows you to see a list of site users and their online status. 1. Click on the drop-down arrow to access the menu for the Site Users web part and select Edit Web Part 2. In the tool panel, check the option next to Show people in this site s member group, then click OK 3. View the changes to the web part list Creating Visual Links Lists Creating a Links List & Icon Property Creating a web part for links is often a popular navigation tool to provide your users quick access to useful locations (to both internal and external sites). However, these lists of links can easily get lost on a page as part of a web part. To make them stand out more, and give your page more visual appeal, you can add picture icons to your links for your users. We will start by creating a links list and creating a property field/column to add the icon. 1. Click on the Site Actions tab, then select More Options 2. From the List category, select Links 3. In the Name field type: Useful Links 4. In the More Options area, select No to display on the Quick Launch, then click the Create button 5. On the List tab on the ribbon, click the List Settings button 6. In the Columns section, click on Create Column 7. In the Column name field type: Icon 8. Select the Hyperlink or Picture item 9. In the Format URL as drop-down menu, select Picture, then click OK SharePoint 2010 Level 2 version 1.1 10

Creating View & Adding Web Part Now we want to create a view that will display the icon and link name, and then add the links list as a web part on our page, displayed in the desired view. 1. From the Links Settings page, in the Views section, select Create View 2. Select the Standard View type 3. In the View Name field, type: Web Part View 4. In the Columns section, check the Display check boxes for Icon and URL only and make sure the Icon is displayed before the URL in the Position from the left options 5. Click OK 6. Return to your main home page and click on Site Actions, then Edit Page 7. In the Right section on the page, click on the Add a Web Part button 8. Select the Useful Links item and click the Add button 9. Click the drop-down arrow for the Useful Links web part menu and select Edit Web Part 10. In the tool pane panel on the right, click the drop-down menu for the Selected View and choose Web Part View (click OK if prompted) 11. Click the OK button to close the tool pane panel, then click on the Stop Editing button on the Page tab of the ribbon, to return to normal shared view 11 SharePoint 2010 Level 2 version 1.1

Adding Internal Link Content Let s now add our desired icon pictures to our picture development library and then use those to create some links in our list. Because we will be copying URLs to use in our links list, it is easier to open your site twice (in 2 different website pages) by using the multiple tabs feature of your internet browser. This way you can quickly jump back and forth to different sections of your site. 1. From your main home page, click on Site Actions, then View all Site Content, then select the Pictures for Site from the Document libraries 2. On the Documents tab on the ribbon, click on the dropdown arrow under the Upload Document button, and select Upload Multiple Documents 3. Click on the Browse for files instead link 4. From your Practice Files folder, select all 4 of the items in the Icons folder and upload them 5. Select the people picture, then choose View Item, so that you are on the page with the picture only (no edit items), then copy the URL for this page 6. Click the Back button, and then return to your Pictures for Site library 7. Open up a new internet tab by clicking on the New Tab button, and then access the site a second time on this page by typing: sp2010.mcstech.net in the URL (this will allow you to work on multiple pages of your site at the same time) 8. From this new internet page, go to your Useful Links 9. Click on the Add new link item 10. In the Icon section, paste the URL that you copied for the picture into the Icon s Web address field 11. In the URL section, in the description field type: Customer List Dashboard 12. Click on the other internet tab to access your site in the other web page 13. From your main home page, click on Site Actions, then View all Site Content, then select the Site Content Library from the Document Libraries section 14. Click on the Customer by Agent item in the library, then copy the URL for this page 15. Click on the other internet tab to return to the new link item you are adding 16. Paste the copied URL into the URL Web address field 17. Click Save when done SharePoint 2010 Level 2 version 1.1 12

Adding External Link Content We will add another link item that links to an external website. 1. From the Useful Links page, click on the Add new link item again 2. Go to your other internet tab again and navigate to the Pictures for Site library 3. Select the World picture, and select View Item, so that you are on the page with the picture only (no edit items), then copy the URL for this page 4. Return to your other internet tab where you are adding your new link item 5. In the Icon section, paste the URL that you copied for the picture into the Icon s Web address field 6. In the URL section, in the description field type: St. John Info 7. In the URL web address field type: http://gotostjohn.com 8. Click OK 9. Return to your main page to view the new items in your Useful Links web part and test both of them to make sure they work 13 SharePoint 2010 Level 2 version 1.1

Advanced Web Part Management There are various tools to help you better manage your web parts, for example you can delete or close a web part. Closing a web part saves your customizations to that web part and keeps it active behind the scenes of your site, but does not completely delete it. Deleting a web part permanently removes it and any customize settings you had for that web part. You can also see a list of all web parts on your site both closed and open. Closing Web Parts If you may want to use your web part later, but don t currently want it visible on the site, then you can close it. Keep in mind that if you use this method to get rid of web parts, you could potentially have dozens if not hundreds of closed web parts still on your site. Although not visible, they can greatly slow down the performance of your site. 1. Make sure you are in Edit Page mode on your main home site 2. Click on the drop-down arrow to access the menu for the Site Users web part and select Close Advanced Web Part Options You can view and manage your web parts by accessing the Advanced Options. 1. Make sure you are in Edit Page mode on your main home site 2. Click on the Add a Web Part button in the Left section 3. Scroll to the bottom of your Web Part Categories list and select Closed Web Parts 4. Select the Site User s web part and click Add Deleting a Web Part If you want to permanently remove a web part, then you want to delete it rather than close it. 1. Make sure you are in Edit Page mode on your main home site 2. Click on the drop-down arrow to access the menu for the Site Users web part 3. Select Delete from the menu, then click OK at the dialog box 4. Close the tool panel if it is still open SharePoint 2010 Level 2 version 1.1 14

Review 1. Create a new Web Part Page and name it Customer List by Region. Use the Header, Right Column, Body layout. Choose to save it in the Site Content Library. Exit Edit mode (Stop Editing) on the new page. (page 6 ) 2. Add a new internal site link to your Useful Links list that uses the build icon picture and links to the Customer List by Region page you just created (use the description: Customers by Region). (page 12 ) 3. Add a new external site link to your Useful Links list that uses the interact icon picture, uses the description: St. John Web Cam, and links to the following website: http://www.stjohnspice.com/stjohnspicecam.htm. (page 13 ) 4. Test both of your new links from the Useful Links web part on your main home site page. 5. Exit Edit Mode when done, if still in it 15 SharePoint 2010 Level 2 version 1.1