SharePoint Designer 2010 Customizing and Branding SharePoint 2010 and Office 365 10/13/2012 55010A MAX Technical Training

Module 1: SharePoint Customization This module provides an introduction to the topics covered in the class, defines the roles of customizers, defines the terminology used in the class and introduces the customization tools. Who is this class for? Prerequisites? Why Customize? Who Does Customization? SharePoint Architecture and What Can be Customized? 10/13/2012 55010A MAX Technical Training

Who is this class for? This class is for the SharePoint user who needs to: Change the appearance of a SharePoint site Access to data that exists outside of their site Customize list forms and views Create subsites and workspaces Enhance the display of SharePoint data 10/13/2012 55010A MAX Technical Training

Prerequisites You will need: Basic web development skills, including HTML, CSS and JavaScript (the more the better) Good SharePoint end-user skills including: Site customization from the browser (Site Actions, Site Settings) Library customization: Document, Form (InfoPath), Wiki, Picture, Slide (PowerPoint slide library) libraries List customization: Tasks, Links, Calendars, Surveys, Announcements, Contacts, Discussion lists How to adding content to lists and libraries How to upload content A good understanding of your organization's security, legal and business requirements for content that you will be storing in SharePoint Knowledge of your organization’s governance policies on SharePoint customization 10/13/2012 55010A MAX Technical Training

Why Do You Customize? To “Brand” sites and change the Look and Feel The site needs to display the corporate image: colors, logos, navigation The site needs to look like an existing site The site needs to look like anything but SharePoint 10/13/2012 55010A MAX Technical Training

Why Do You Customize? To display non-SharePoint data Data from other SharePoint sites Data from SQL Server and other databases Data from XML sources Data from external sources (corporate systems and the internet) 10/13/2012 55010A MAX Technical Training

Why Do You Customize? Incorporate Custom ASPX Pages Dashboards Reports Data entry forms Custom applications 10/13/2012 55010A MAX Technical Training

Customization Options There are at least three tiers of customization: Configuration: The changes you can do from a browser. Customization: Anything that can be done without deployment of files to the SharePoint servers. Customization is typically done using SharePoint Designer. Custom Development Custom development includes any work that requires changes or file deployment to the SharePoint web servers. Much of this kind of work is performed with Visual Studio 2010. 10/13/2012 55010A MAX Technical Training

Who Will Do the Customization? Graphic Designer Generally starts with an HTML / CSS design and then modifies it to work with SharePoint Creates new and custom HTML and CSS Creates new themes and master pages Site Owner Generally adapts a SharePoint design to departmental needs Makes minor modifications to master pages and site pages Tweaks HTML and CSS Creates Data Form Web Parts Tweaks existing SharePoint controls Developer Creates custom web parts Creates custom workflows Creates custom Themes and Site Definitions Creates custom Features (plug and play additions to SharePoint) Creates custom ASPX pages 10/13/2012 55010A MAX Technical Training

Customization Decisions Do you have a governance plan? Should you customize Master Pages or Themes? Will your changes will impact a single site or all sites? Can work only be done in a production environment, or must changes be first made in a development environment? Must these changes also work in the next version of SharePoint? Should you document your changes somewhere? 10/13/2012 55010A MAX Technical Training

SharePoint Customization Tools The web browser SharePoint Web Parts SharePoint Designer InfoPath Visual Studio 10/13/2012 55010A MAX Technical Training

SharePoint Architecture Where SharePoint data (pages, files, etc.) is stored determines if SharePoint Designer can be used to edit the data. Files stored directly on the server cannot be edited in SharePoint Designer 10/13/2012 55010A MAX Technical Training

SharePoint Architecture  Examples… Can be edited from SharePoint Designer Requires access to the web server directories Site templates accessible to all site collections (Site Definitions)   Theme and CSS overrides Custom web parts created from Data Form Web Parts Web parts requiring custom code (VB.Net, C#, etc) Features Workflows – simple Workflows – complex SharePoint email templates for alerts SharePoint mobile views SharePoint error message page 10/13/2012 55010A MAX Technical Training

Module 2: A Review of Browser Based Customization Here we will explore how use the browser based customization features. 10/13/2012 55010A MAX Technical Training

Don’t Reinvent the Wheel! SharePoint includes many features in the browser interface to support site customization by the owners of the sites. These features include: Site title, description and icon / logo Master page selection (for Publishing sub-sites) Navigation Tabs Quick Launch Tree View Links lists and links web parts Site theme selection Don’t break these features with your customizations! 10/13/2012 55010A MAX Technical Training

Let’s take a tour… Title, Description and Icon Site Theme Tree View Top Link Bar and Quick Launch Navigation Links lists and other site navigation Speaking of navigation… Does your organization have navigation standards? 10/13/2012 55010A MAX Technical Training

Web Parts for Customizers The Content Editor Web Part This web part can be used to embed JavaScript, CSS, Flash, Silverlight and other HTML based technologies The Content Query Web Part This web part can display content from other sites in the site collection and rollup content from multiple sites into a single web part The Data Form Web Part This web part can be used to create views with features not available from browser created views and can display external data 10/13/2012 55010A MAX Technical Training

SharePoint Designer Overview This module introduces SharePoint Designer 2010 and explores its integration with SharePoint. 10/13/2012 55010A MAX Technical Training

Launching SharePoint Designer From the Windows Start button From the List or Library ribbon From Site Actions From the Page ribbon 10/13/2012 55010A MAX Technical Training

Possible Connection Errors Can’t open your site? Cause: The SharePoint Server Administrator has disabled the use of SharePoint Designer at the web application level or the Site Collection Administrator has disabled the use of SharePoint Designer at the Site Collection level. 10/13/2012 55010A MAX Technical Training

SharePoint Designer Navigation Quick Access Toolbar Up to 27 commands can be added to this toolbar Save Undo and Redo Refresh (F5) - used to resync SharePoint Designer to the current site when changes have been made to the site while the site is open in SharePoint Designer. Stop the current operation Preview in Browser - click the dropdown for options: 10/13/2012 55010A MAX Technical Training

SharePoint Designer Navigation The Ribbon Like most current Microsoft Office products and SharePoint 2010, SharePoint Designer 2010 has a ribbon. The ribbon is dynamic and will change based on the last object clicked. 10/13/2012 55010A MAX Technical Training

SharePoint Designer Navigation Working with Panes SharePoint Designer 2010 uses two different kinds of panes or panels. The Navigation pane cannot be closed, but can be collapsed by clicking the Collapse buttons. Other panes will be automatically opened as needed and can be closed by clicking the X button. Double-click in the pane’s title bar to “float” the pane. 10/13/2012 55010A MAX Technical Training

SharePoint Designer Navigation Tabs As you open property pages and the various editors (HTML, CSS, etc) SharePoint Designer adds new tabs to the tab bar. To close a tab, click the tab and then click the “x” at the far right. Tabs with an “*” have unsaved content. Clicking the “New Tab” tab will open a new panel showing site properties. 10/13/2012 55010A MAX Technical Training

SharePoint Designer Navigation Split Views Design – displays the page as (almost) rendered in a browser (For a true view of the page click the Preview In Browser button or press F12.) Code – displays the HTML of the page Split – displays both Design and Code views of the page 10/13/2012 55010A MAX Technical Training

SharePoint Components and Structure SharePoint Designer exposes the virtual directory structure of SharePoint sites: Even more site content can be explored from the All Files link in Site Objects: The All Files folder can be “pinned” to allow tree view style browsing of the virtual directory structure. 10/13/2012 55010A MAX Technical Training

Rolling back changes When you save changes: Customized pages are marked with in the folder view: To undo all changes to a page Right-Click the customized file and select Reset to Site Definition. 10/13/2012 55010A MAX Technical Training

Keeping in Sync – Browser / Designer In the browser - Click the link to the page in Quick Launch or click the browser's refresh button In SharePoint Designer - Display the screen or list that is not up-to-date and click the Refresh button In SharePoint Designer for a single page: 10/13/2012 55010A MAX Technical Training

Module 4: SharePoint Administration SharePoint Designer 2010 is more than a page editor. You can do almost all of the site administration normally done from the browser from within SharePoint Designer. 10/13/2012 55010A MAX Technical Training

Working with Lists and Libraries Manage Lists and Libraries Managing Files Column Maintenance 10/13/2012 55010A MAX Technical Training

Content Types and Site Columns Maintaining Content Types and Site Columns External Site Columns External Site Columns are covered in Module 12: Working with External Data 10/13/2012 55010A MAX Technical Training

Working with Sites Site Settings Site Permissions (adding users) Creation and Maintenance of Subsites 10/13/2012 55010A MAX Technical Training

Module 5: How SharePoint uses HTML, CSS and JavaScript SharePoint is built from: HTML CSS JavaScript Master Pages and Content Pages ASP controls and SharePoint Controls 10/13/2012 55010A MAX Technical Training

How HTML is used in SharePoint Everything you see in a SharePoint web page is built from HTML, CSS (Cascading Style Sheets), JavaScript and Silverlight. Master Pages vs. Content Pages HTML vs. SharePoint and ASP.Net Controls 10/13/2012 55010A MAX Technical Training

How JavaScript is used in SharePoint SharePoint's JavaScript Libraries SharePoint loads many JavaScript libraries To explore, display the page and view the source looking for <script> tags: <script type="text/javascript" src="/_layouts/1033/init.js? ... /script> These can be downloaded and studied by editing the site’s URL: http://yourserver/sites/yoursite/_layouts/1033/init.js 10/13/2012 55010A MAX Technical Training

How JavaScript is used in SharePoint Adding Your Own Custom JavaScript If the JavaScript is needed by the master page, or otherwise needed "everywhere", then add it to the master page, typically in the <HEAD> section, or just before the </BODY> tag. If the JavaScript is needed in just one page, edit the page in SharePoint Designer. Typically you would add the JavaScript just before the </asp:content> tag of the PlaceHolderMain section. If the JavaScript is needed in just one page, and you don't want to use Designer, you can upload the JavaScript file to a library, add a Content Editor Web Part and use it to link to the uploaded file. If the JavaScript is going to be used in several, but not all pages, upload the file to a library and link to it from a <SCRIPT> tag or from a Content Editor Web Part in each page. 10/13/2012 55010A MAX Technical Training

How CSS is used in SharePoint Cascading Styles Sheets (CSS) are used to add formatting such as fonts, color, height and width. COREv4.CSS – The primary CSS file. This file is located on the SharePoint servers and cannot be directly edited by SharePoint Designer . C:\Program Files\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\1033\STYLES User uploaded CSS file (Publishing sites only) Inline CSS in the Master Page and Content pages <style> … </style> 10/13/2012 55010A MAX Technical Training

How CSS is used in SharePoint Where to Store Your Custom CSS File If you have access to the SharePoint servers then you can store your final design here: C:\program files\Common Files\Microsoft Shared\web server extensions\14\TEMPLATE\LAYOUTS\STYLES If you are using Publishing sites you can upload the CSS file from Site Actions, Site Settings, Master Page, Alternate CSS URL Upload the CSS files to a library in your site – This is great for both testing and for final deployment when you don’t have access to the SharePoint servers. 10/13/2012 55010A MAX Technical Training

Demo Exploring SharePoint CSS Tools to Explore HTML and CSS (Internet Explorer Developer Tools) Playing with (testing!) styles 10/13/2012 55010A MAX Technical Training

Module 6: How SharePoint Uses ASP.NET and SharePoint Controls How SharePoint uses ASP and SharePoint controls to build navigation and general SharePoint Content 10/13/2012 55010A MAX Technical Training

Web Controls Web Controls HTML – These controls are not processed by SharePoint and are delivered to the browser exactly as you have typed them. ASP.NET Controls - These controls are part of the technology used to create SharePoint, ASP.NET, and in most cases are of value to developers. These controls are processed by the web servers which replace the controls with dynamically created HTML. SharePoint Controls - These controls are unique to SharePoint development and are processed the same as ASP.NET controls… the server converts them to dynamically created HTML. 10/13/2012 55010A MAX Technical Training

HTML Controls All HTML controls from the HTML Ribbon button can be added to a SharePoint page. HTML controls can be hand typed or added from the ribbon HTML dropdown. To learn more about HTML controls refer to any good book on HTML or web sites such as http://w3schools.com. 10/13/2012 55010A MAX Technical Training

ASP.NET Controls Not all ASP.NET controls are useful in a SharePoint page. Many require the use of custom server side code created in Visual Studio. Many like the Web Part Zones, the Ad Rotator and the asp:Menu are quite useful in SharePoint projects. 10/13/2012 55010A MAX Technical Training

SharePoint Controls Most SharePoint controls are only of value to SharePoint's internal work and to SharePoint developers. A few can be quite useful to customizers. An example is the SPSecurityTrimmedControl. <Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="DeleteListItems"> If you can see this then you can delete stuff! </SharePoint:SPSecurityTrimmedControl> 10/13/2012 55010A MAX Technical Training

Demo The Ad Rotator ASP.Net Control The Ad Rotator requires three things: Pictures! These can be stored in a picture library or any document library An XML file with the list of the pictures and display information The Ad Rotator control 10/13/2012 55010A MAX Technical Training

Module 7: Creating and Customizing Pages Wiki pages Web Part pages 10/13/2012 55010A MAX Technical Training

SharePoint Pages Wiki pages (two kinds) Web Part Pages ASPX Pages Wiki library pages Wiki site pages (the home page of a Team Site) Web Part Pages ASPX Pages They by default do not use the SharePoint master page and therefore have no default navigation. ASPX pages can be used to create custom reports, custom web part pages and can optionally use SharePoint master pages. Layouts / Application Pages Any page with "/_layouts" in its URL is a layouts or application page. These pages are stored on the SharePoint servers and cannot be edited using SharePoint Designer. 10/13/2012 55010A MAX Technical Training

The Home Page The home page of a site may be either a web part page or a wiki page, depending on the template used to create the site. Home.aspx Home.aspx is used in Team Sites and is stored in the Site Pages library. This page is a Wiki page. Default.aspx Default.aspx is used in a Blank Site and in most non-publishing sites except for the Team Site. The default.aspx page is not stored in a library, but rather in the root folder of the site. This page is a web part page. 10/13/2012 55010A MAX Technical Training

Page URLs Pages in libraries have the library's name in the URL: http://yourserver/sites/yoursite/subsite/Pages/default.aspx Pages stored in the site root or in a SharePoint Designer created folder (rare) do not reference a library: http://yourserver/sites/yoursite/subsite/default.aspx or http://yourserver/sites/yoursite/subsite/customfolder/default.aspx 10/13/2012 55010A MAX Technical Training

Securing Pages When a page is stored in a SharePoint library: Security for pages is handled the same as security for documents Users must at least have Read or View access to see a page Unless security is customized, users with Contributor permissions, such as users in the Members group, will be able to add, edit and delete pages! Libraries for pages have all of the features associated with document libraries: check in/out, versioning and content approval Pages can be stored in any library. SharePoint provides a few special locations for pages: The Pages library is the default library for the home page (default.aspx) and all publishing pages in a Publishing site The Site Pages library is the default location for the home page (home.aspx) and most pages added to a Team Site. 10/13/2012 55010A MAX Technical Training

Creating SharePoint Wiki Pages Wiki pages can only be created from the browser. (i.e. not from SharePoint Designer) Using the browser: Click Site Actions and then New Page Enter a name for the page Note: the page is always saved to the Site Pages library, but can then be moved to any library Type or paste content for the page and click Save and Close in the ribbon 10/13/2012 55010A MAX Technical Training

Creating SharePoint Web Part Pages Using the browser Click Site Actions, More Options… Optional: click Page to filter the list of templates Click Web Part Page and click Create Enter a Name, select a layout and select a Library Using SharePoint Designer Click the File tab of the ribbon Click Add Item and then Web Part Page Select a Page Layout (example: Header, Footer, 3 Columns) and click Create Enter a name for the page 10/13/2012 55010A MAX Technical Training

Creating SharePoint Publishing Pages Publishing pages can only be created in a publishing site, either a site created from a publishing template or a site with the publishing features enabled after the site was created. Publishing pages are stored in the Pages library. From the browser: Click Site Actions and More Options… Optional: Click Pages to filter the list of templates Click Publishing Page Enter a Title, Description and URL Select a template Click Create 10/13/2012 55010A MAX Technical Training

Content Pages A content page is always merged with a master page to generate the final HTML delivered to the user’s browser. The home page of your site is an example of a content page. Content pages: Are always used with a master page Always have an extension of .ASPX Never have HTML outside of <ASP:Content> tags Generally have at least one <ASP:Conent> tag (PlaceHolderMain) and may have many content tags 10/13/2012 55010A MAX Technical Training

Content Pages Examples of content pages you can edit from SharePoint Designer: Your home page: http://yourserver/sites/yoursite/default.aspx The default view of the Shared Documents library: http://yourserver/sites/yoursite/Shared%20Documents/Forms/AllItems.aspx The Add New Item page for Announcements http://yourserver/sites/yoursite/announcements/NewForm.aspx Examples of pages you cannot edit from SharePoint Designer: (Notice the _layouts in each URL) "Modify view" for Announcements http://yourserver/sites/yoursite/_layouts/ViewEdit.aspx?List=... Site Actions, Site Settings http://yourserver/sites/yoursite/_layouts/settings.aspx 10/13/2012 55010A MAX Technical Training

Demo Creating a New Content Page from an ASPX Page Let’s take a look at converting an ordinary web page created in SharePoint Designer into a full fledged SharePoint page. Modifying a Web Part Page Let’s add a new web part zone! 10/13/2012 55010A MAX Technical Training

Modifying a List or Library Page Here a just a few of the many reasons to modify list and library pages: Add custom text, such as legal disclaimers Add data entry instructions Customize the data entry forms 10/13/2012 55010A MAX Technical Training

Demo Add custom text to a form Our users have been entering non-business items into the Announcements List. We would like to add some text about appropriate use to the top of the form. 10/13/2012 55010A MAX Technical Training

Module 8: Content Editor Web Part Using the Content Editor Web Part to display text and to embed HTML, CSS and JavaScript. The Content Editor Web Part Using a Content Editor Web Part for Formatted Text Reusing a Content Editor Web Part Using a Content Editor Web Part for HTML, CSS and JavaScript 10/13/2012 55010A MAX Technical Training

The Content Editor Web Part The Content Editor Web Part (CEWP) is designed primarily to add formatted text and images to web part pages. Its less obvious role is to inject special HTML, CSS and JavaScript code into a page without using SharePoint Designer. Examples of using the CEWP: Add a Welcome message to a web part page Add CSS code to impact a single page – Example: change the title bar color of all web parts on a page Add JavaScript to color code a task list or calendar Add JavaScript to display SharePoint list as a chart 10/13/2012 55010A MAX Technical Training

The Content Editor Web Part Warning: Extra Web Parts will “break” View Pages SharePoint 2010 treats view pages with added web parts as “non-views” and removes many view related features. This page has an extra web part and is now missing the View dropdown in the ribbon. 10/13/2012 55010A MAX Technical Training

Using a CEWP for Formatted Text Text can be added to a CEWP three ways: by direct typing and using the ribbon by editing the HTML of the web part by linking to a file that contains the text and HTML formatting You can: Add and format text Insert hyperlinks and tables Insert pictures Select text styles 10/13/2012 55010A MAX Technical Training

Demo Using a CEWP for Formatted Text 10/13/2012 55010A MAX Technical Training

Using a CEWP for HTML, CSS and JavaScript Using the ribbon button… You may see this message after editing HTML using the ribbon button: 10/13/2012 55010A MAX Technical Training

Using a CEWP for HTML, CSS and JavaScript Using a linked file The best way to deal with the “Might have been modified” issue… don’t use that button! Instead, store the HTML, CSS and JavaScript in a text file, upload that file to a library and then link to the file. 10/13/2012 55010A MAX Technical Training

Demo Using a linked file with the CEWP Reusing a Content Editor Web Part 10/13/2012 55010A MAX Technical Training

Module 9: Customizing SharePoint Navigation Customizing SharePoint navigation, including Quick Launch and Tree View tricks 10/13/2012 55010A MAX Technical Training

Navigation in SharePoint In a web site navigation is anything a user can click on that takes them to another web page. The primary navigation options in SharePoint include: Top Link Bar Quick Launch Title area crumb trail Site Actions Secondary navigation options include: a links list on the home page links added to the home page content links in Announcements and the Content Editor Web Part custom JavaScript tree view, tab and menu controls links in Silverlight Controls 10/13/2012 55010A MAX Technical Training

Quick Launch Area The Quick Launch area is more than just Quick Launch: The All Site Content link The Recycle Bin link Quick Launch menu (The Quick Launch control is built from a .Net AspMenu control.) The Tree View (hidden by default) When the calendar is displayed, the Calendar Navigator is displayed just above the All Site Content link When wikis, and some libraries are displayed, a Recently Modified panel is displayed 10/13/2012 55010A MAX Technical Training

Demo Controlling who can see All Site Content PermissionsString=“???” 10/13/2012 55010A MAX Technical Training

Hide Content Based on User Permissions When is a link in Quick Launch “security trimmed” or hidden based on user permissions? SharePoint will create the security trimmed link: When you create a new list or library, you click More Options and click “Display this list on Quick Launch” When you edit the properties of the list or library and in Title Description and Navigation click “Display this list on Quick Launch” Manually added links (Site Actions, Site Setting) are not security trimmed! 10/13/2012 55010A MAX Technical Training

SPSecurityTrimmedControl The SPSecurityTrimmedControl can be used to selectively hide anything on the page by the permissions of the user. Set the PermissionsString to match the rights of the user who you want to see the content. The SPSecurityTrimmedControl will only work when added directly the Code View of the page using SharePoint Designer. (I.e. will not work in a CEWP.) <Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="DeleteListItems"> If you can see this then you can delete stuff! Put special navigation links here that should only be seen by people who can delete content… </SharePoint:SPSecurityTrimmedControl> 10/13/2012 55010A MAX Technical Training

Quick Launch Customizations Quick Launch is built from a SharePoint enhanced version of the ASP Menu control. You can: Restyle the menu Tighten up the display, change colors, fonts, etc. Create "pop out" menus You can also create Quick Launch style menus from ASPMenu controls by applying the Quick Launch styles. 10/13/2012 55010A MAX Technical Training

Demo Use CSS to remove some of the white space in Quick Launch Change Quick Launch to use "pop out" menus Use CSS to change the fonts and colors in Quick Launch 10/13/2012 55010A MAX Technical Training

Tree View Customizations The Tree View customizations: Change the fonts and colors using CSS styles: SelectedNodeStyle-CssClass and NodeStyle-CssClass Change the icons used to expand and collapse sections: ExpandImageUrl, CollapseImageUrl and NoExpandImageUrl Change the default levels of Expansion – Default is "0" Change the node indent – Default is 12 pixels (NodeIndent="12") Add lines to better show parent / child relationships Choose the content to display: ShowDocLibChildren, ShowFolderChildren, ShowListChildren, ShowWebChildren 10/13/2012 55010A MAX Technical Training

Demo Change the Tree View to: Show only libraries Pre-expand the folders to 3 levels deep 10/13/2012 55010A MAX Technical Training

Module 10: SharePoint Master Pages and an Introduction to Branding Branding is an art that requires graphical design skills along with user interface design expertise. As such, a full discussion of branding is beyond the scope of this class. Here we will cover several skills a “brander” will need: Working with master pages Placeholders CSS Working with content pages. 10/13/2012 55010A MAX Technical Training

Master Pages in SharePoint A master page: has a file extension of .master and can never be displayed by itself (A visitor to your site cannot navigate to v4.master or default.master) is always used in combination with a content page (Your home page is a content page that is loaded inside of a master page.) contains the primary page layout HTML including the <HTML>, <HEAD> and <BODY> tags along with all layout HTML needed for the page includes, or links to, the CSS and JavaScript shared by all the content pages has <ASP:ContentPlaceHolder> tags to mark where the content pages can insert their content. 10/13/2012 55010A MAX Technical Training

Content Page Basics A content page has no HTML outside of <ASP:Content> tags - the master page supplies the rest of the HTML needed for the page A content page has one or more <ASP:Content> tags that contain the data unique to the page An empty <ASP:Content> tag will hide the default content supplied by the master page for that location 10/13/2012 55010A MAX Technical Training

Master Pages vs. Themes Master Pages provide the overall page structure and layout. Themes provide colors, fonts and images. Master Pages are created using SharePoint Designer. Themes are created by using PowerPoint. Both can be purchased or downloaded from the web. 10/13/2012 55010A MAX Technical Training

Out of the Box Master Pages Common master pages: v4.master - the default master page for most sites default.master - a SharePoint 2007 style master page initially used for sites upgraded from 2007 to 2010 (has no ribbon!) minimal.master - a simple master page used for pages that do not need navigation (a basic search page for example) A publishing template based site collection also includes: nightanday.master Meeting workspace sites include: MWSDefault.master MWSDefaultv4.master 10/13/2012 55010A MAX Technical Training

Master Page Galleries Master pages are stored in galleries (special libraries) For non-publishing sites the gallery is named "Master Pages" For publishing sites the gallery is named "Master pages and page layouts" 10/13/2012 55010A MAX Technical Training

Uploading and Using Master Pages Master pages can be simply uploaded to the Master Page Gallery: Selecting a Master Page select the master page from the Master Page link in Site Actions, Site Settings, Look and Feel (publishing sites only) right-click the master page in SharePoint Designer and select Set as Default Master Page 10/13/2012 55010A MAX Technical Training

Master Page Placeholders The areas of a master page that will receive content from a content page are called placeholders and are added to a master page with <asp:ContentPlaceHolder> tags. Every standard SharePoint placeholder must be added to your custom master page. Your content pages only need to define placeholders you want to override. You can create your own additional placeholders. 10/13/2012 55010A MAX Technical Training

Starter Master Pages A starter master page needs at least: All content placeholders Core CssLink / ScriptLink / RobotsMetaTag controls The WebPartPages:SPWebPartManager control The Site Actions dropdown The <wssuc:DesignModeConsole> control The FormDigest control Sources of Starter Master pages: http://startermasterpages.codeplex.com/ and do a web search for "SharePoint 2010 starter master pages" 10/13/2012 55010A MAX Technical Training

Creating a New Master Page from a Starter Master Page Start out with an HTML mockup of the site Is the design usable as is? What SharePoint functionality do you need and will it work in this design? Start with a starter master page Migrate the HTML code into the starter page Move and style the SharePoint controls and placeholders Test, test, test! 10/13/2012 55010A MAX Technical Training

Module 11: Creating Custom Views How to use XSLT List View Web Parts and SharePoint Designer Data Form Web Parts to create views and reports of SharePoint data beyond what is possible with out of the box views. 10/13/2012 55010A MAX Technical Training

XSLT List View Web Part vs. Data Form Web Parts XSLT List View Web Parts (XLV) Used by default for all lists and libraries in a site. They are automatically created when list views and list web parts are added to a site, either from the browser or from SharePoint Designer (Insert Tab, Data View). Automatically include column headings that can be used to sort and group data. Can be customized from the browser or SharePoint Designer Group on up only two levels (Region and Country but not Region, Country, State, and City) 10/13/2012 55010A MAX Technical Training

XSLT List View Web Part vs. Data Form Web Parts Data Form Web Parts (DFWP) Only created from SharePoint Designer Can display and edit data from external sources including databases, XML files, web services and lists and libraries from other sites Only adds text column headings by default (but sorting and filtering can be enabled) Cannot be customized from the browser Group on up sixteen levels (Region, Country, State, City and more) 10/13/2012 55010A MAX Technical Training

XSLT List View Web Part vs. Data Form Web Parts With SharePoint Designer both can also: Format data - colors, fonts, styles Conditionally format data - example: change the color of a row based on a value Format data unconventional ways by customizing the XML data returned by SharePoint using XSLT transforms 10/13/2012 55010A MAX Technical Training

Demo Displaying a List Using a Data Form Web Part Review the XSLT in the code panel An XSLT Customization 10/13/2012 55010A MAX Technical Training

Module 12: Working with External Data Creating Data Form Web Parts to access data external to a SharePoint Site 10/13/2012 55010A MAX Technical Training

External Data Accessing SharePoint Data External to Your Site Most SharePoint functionality is limited to a single site. SharePoint Designer can be used to create Data Sources that point to other SharePoint sites and then use these Data Sources to supply data to Data Form Web Parts. Accessing Data External to SharePoint Microsoft SQL Server Other databases using OLE DB Web Services RESTful web services XML data files RSS feeds And by using the Business Connectivity Services, access data from just about anywhere. 10/13/2012 55010A MAX Technical Training

External Data Your ability to access external data may be limited by: Your company’s policies for access to both internal and external data (this may be defined in your SharePoint governance plan) Your security rights for certain databases Ports and sites blocked by your corporate firewalls 10/13/2012 55010A MAX Technical Training

External Data Authentication Many data sources accessible from a Data View require authentication configured by your network and server administrators. Some of the options to support user authentication to data sources include Business Data Catalogs, Single Sign On services (SSO), Kerberos authentication and proxy server configurations, All of which are outside of the scope of this class. Unable to display this Web Part. To troubleshoot the problem, open this Web page in a Windows SharePoint Services-compatible HTML editor such as Microsoft Office SharePoint Designer. If the problem persists, contact your Web server administrator. 10/13/2012 55010A MAX Technical Training

SharePoint Designer Data Sources Linked Data Source - used to merge several connections into one - example: merge several task lists Database Connection - used to connect to SQL Server and OLE DB sources - these connections will usually require SQL administrator support to configure the connection and permissions. SOAP Service Connection - used to connect to both SharePoint and public SOAP web services. This is often used with the SharePoint lists.asmx web service to provide access to lists and libraries in other sites and site collections. REST Service Connection - used to access SharePoint REST services and external RSS feeds (REST = Representational State Transfer) 10/13/2012 55010A MAX Technical Training

Connecting to Lists in another SharePoint Site To connect to a list in another site: Need to call a SharePoint web service… http://yourserver/sites/yoursite/susbsite/subsubsite/_vti_bin/lists.asmx Create a SOAP Service Connection to the other site’s LISTS web service Create a Data View web part from the data source 10/13/2012 55010A MAX Technical Training

Demo Connecting to a list in another SharePoint Site Create the connection Create the Web Part Creating a Data View for a Custom External RSS Feed (if internet access is available) 10/13/2012 55010A MAX Technical Training

Displaying Data from an XML File To work with and display XML files: Either upload the XML file to a SharePoint library or to a location accessible using an HTTP URL. Add a Data Source to SharePoint Designer that points to the XML file Insert a blank Data Form Web Part Click the link to add data and select the data source Select, insert and format fields 10/13/2012 55010A MAX Technical Training

Demo Displaying Data from an XML File 10/13/2012 55010A MAX Technical Training