Upload
bryce-bruce
View
221
Download
0
Tags:
Embed Size (px)
Citation preview
SharePoint Designer 2010 Customizing and Branding SharePoint 2010 and
Office 365
55010A
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
PrerequisitesYou 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-clickin 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)• Site Permissions• 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.
10/13/2012 55010A MAX Technical Training
<Sharepoint:SPSecurityTrimmedControl runat="server" PermissionsString="DeleteListItems"> If you can see this then you can delete stuff!</SharePoint:SPSecurityTrimmedControl>
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)– 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
orhttp://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:1. Click Site Actions and then New Page 2. 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
3. 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 browser1. Click Site Actions, More Options… 2. Optional: click Page to filter the list of templates3. Click Web Part Page and click Create 4. Enter a Name, select a layout and select a Library
Using SharePoint Designer5. Click the File tab of the ribbon6. Click Add Item and then Web Part Page 7. Select a Page Layout (example: Header, Footer, 3 Columns) and click
Create 8. 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:1. Click Site Actions and More Options…2. Optional: Click Pages to filter the list of templates3. Click Publishing Page4. Enter a Title, Description and URL5. Select a template6. 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 webpart 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 SharePointIn 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.
10/13/2012 55010A MAX Technical Training
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.
SharePoint Designer Data Sources
• 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