SharePoint Designer 2010 Customizing and Branding SharePoint 2010 and Office 365 55010A 10/13/2012...

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?


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


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


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



• 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)



• Incorporate Custom ASPX Pages – Dashboards– Reports– Data entry forms– Custom applications


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.


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


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?


SharePoint Customization Tools

• The web browser• SharePoint Web Parts• SharePoint Designer• InfoPath• Visual Studio


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


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


Module 2: A Review of Browser Based Customization

• Here we will explore how use the browser based customization features.


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!


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?


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


SharePoint Designer Overview

• This module introduces SharePoint Designer 2010 and explores its integration with SharePoint.


Launching SharePoint Designer

• From the Windows Start button• From the List or Library ribbon• From Site Actions• From the Page ribbon


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.


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:



• 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.



• 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.



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.



• 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


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.


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.


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:


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.


Working with Lists and Libraries

• Manage Lists and Libraries• Managing Files

• Column Maintenance


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


Working with Sites

• Site Settings• Site Permissions

(adding users)• Site Permissions• Creation and Maintenance of Subsites


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


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


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


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.


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>


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.


Demo

• Exploring SharePoint CSS• Tools to Explore HTML and CSS (Internet

Explorer Developer Tools)• Playing with (testing!) styles


Module 6: How SharePoint Uses ASP.NET and SharePoint Controls

• How SharePoint uses ASP and SharePoint controls to build navigation and general SharePoint Content


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.


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.


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.


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>

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


Module 7: Creating and Customizing Pages

• Wiki pages• Web Part pages


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


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.


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


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


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


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


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


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!


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


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.


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


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


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.


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


Demo

• Using a CEWP for Formatted Text


Using a CEWP for HTML, CSS and JavaScript

• Using the ribbon button…

• You may see this message after editing HTML using the ribbon button:


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.


Demo

• Using a linked file with the CEWP

• Reusing a Content Editor Web Part


Module 9: Customizing SharePoint Navigation

• Customizing SharePoint navigation, including Quick Launch and Tree View tricks


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


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


Demo

• Controlling who can see All Site Content– PermissionsString=“???”


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!


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>


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.


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


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


Demo

• Change the Tree View to:– Show only libraries– Pre-expand the folders to 3 levels deep


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.


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.


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


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.


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


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"


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


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.


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"


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!


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.


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)



• 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)



• 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


Demo

• Displaying a List Using a Data Form Web Part• Review the XSLT in the code panel• An XSLT Customization


Module 12: Working with External Data

• Creating Data Form Web Parts to access data external to a SharePoint Site


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


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.

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)


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


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)


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


Demo

• Displaying Data from an XML File


Date post:	11-Jan-2016
Category:	Documents
Upload:	bryce-bruce
View:	219 times
Download:	0 times