SharePoint Development ================= SharePoint Designer 2010 Overview SP Designer New Feature SharePoint Designer Security Custom Master Page Design Site Branding

1. MJ Ferdous
SharePoint Architect
Founder, SharePoint Expert Community

3. SharePoint Development
– SharePoint Designer 2010 Overview
– SP Designer New Feature
– SharePoint Designer Security
– Custom Master Page Design
– Site Branding

4. SharePoint Designer 2010 Overview
• SharePoint Designer is basically for the people who need to
do branding or styling in SharePoint.
• While it’s true that SPD is really good at letting you apply
style sheets to your sites, modify existing SharePoint
themes, alter or create new Master Pages etc, this is only
one part of its functionality.
• Can also use SPD for all the non-branding reasons. Use it to
create end to end solutions on top of SharePoint using
functionality such as the Data View web part, Workflow
designer, manipulating web part zones, creating page
layouts etc.

5. SP Designer New Feature
1. New User Experience with Summary Pages, Ribbon and Quick Launch
navigation
2. Creating SharePoint Content structure
3. Configure Site Security
4. Create Content Types and attach to Lists directly
5. Create Site Assets for your site
6. Use XSLT List View web parts to show dynamic views of your data
7. Connect to Data Sources outside of SharePoint
8. Create External Content Types using Business Connectivity Services
9. Create Powerful Reusable Workflows
10. Restrict SharePoint Designer usage as needed

6. SP Designer New Feature
1. New User Experience with Summary Pages, Ribbon and
Quick Launch navigation

7. SP Designer New Feature
2. Creating SharePoint Content
structure
You can do all of this in the
browser or you can do it in
SPD.
The web browser is much
slower than using the SPD
client application. That’s a
fact!
let’s say, change the title and
description of the site

8. SP Designer New Feature
3. Configure Site Security: You can configure security
directly in SPD now.
• Creating new SharePoint groups,
• Associating them to the appropriate permission levels and
• Adding users to the groups is all built into the environment
now.

9. SP Designer New Feature
3. Configure Site Security: You can
configure security directly in SPD
now

10. SP Designer New Feature
4. Create Content Types and attach to Lists directly

11. SP Designer New Feature
5. Create Site Assets for your site
– There is a new type of library now included in SharePoint 2010 called
Site Assets.
– The objective of this library is to store the files that are used as
resources for the site such as style sheets, JavaScript files, xml files and
even images which need to be served up on site pages.
– You can create these resource files in site assets library directly through
SPD.
– Since SPD supports intellisense for JavaScript, style sheets, and also xml,
it is a much more conducive environment in which to author these files.

12. SP Designer New Feature
6. Use XSLT List View web parts to show dynamic
views of your data

13. SP Designer New Feature
7. Connect to Data Sources outside of SharePoint

14. SP Designer New Feature
7. Connect to Data Sources outside of SharePoint
• More often than not, you will need to display data on SharePoint pages that’s
coming from outside of SharePoint.
• SPD provides an easy to use interface to make a connection to a data source that
you have access to.
• It’s a fairly simple wizard driven process to connect to external data sources such as
databases, xml files, server side scripts (including RSS feeds), and web services (also
included in this release is the support for connecting to REST web services).
• The best part about this functionality is that you can link the data sources together
and then show a unified view of the data. So for example, let’s say you’re in a retail
business… your category information could be in a xml file, while your subcategories
could be accessible through a vendor’s web service and then your actual products
information is in your database.
• You can first create the connections to your data sources and then connect all of this
information together to display a combined view of the data for your users.
• End users don’t need to know where the actual data is coming from as long as it all
just works together ‘automagically’.

15. SP Designer New Feature
8. Create External Content Types using Business Connectivity Services
– SharePoint 2007 introduced a new functionality called Business Data
Catalog [renamed Business Connectivity Services(BCS) Now at SP2010]
– The idea behind this functionality is to expose Line of Business data
from your back end services (such as SAP, custom databases etc.) to
business user/analysts so they can use them within SharePoint.
– Each piece of information can be exposed as an External Content Type
(ECT) using SharePoint Designer
– Then a business user/analyst can use SharePoint through the web
browser to make an External List which uses this ECT.
– The result will be that they have a list now showing information straight
from the Customers table in the database

16. SP Designer New Feature
9. Create Powerful Reusable Workflows
• With SharePoint Designer 2010, you can create reusable workflows!
These workflows can then be attached to lists, libraries or even
content types.
• Not only that, but you can even package your workflows as a .wsp
(solution file) and extend it further using Visual Studio!
• In addition to the reusable workflows, you can also create workflows
which are specific to a site so there is no need to attach to a list or
library at all (called Site Workflows).
• Also mention that workflows can now be modeled in Visio 2010 and
then exported to SharePoint Designer.
• There are so many improvements in SPD workflows that it will take a
separate blog post to dig into it all.

17. SharePoint Designer Security
Restricting SharePoint Uses as needed
1. SharePoint Designer 2010 is a powerful application.
2. The usage of this application can be controlled at the Web Application and at the Site Collection
level. A Site Collection admin, for example, can decide if she wants her Site admins to be able to
utilize SPD at all. Go to -> Site Action  Site Settings  Site Collection Administration to get
SharePoint Designer Security
3. Not just that, but various functions within SPD can also be restricted. An example of that is creation
and management of Master Pages and Page Layouts. Another facet that can be restricted is
customization of pages and detaching them from the site definition.

18. Custom Master Page Design

19. Custom Master Page Design
• Leave Default Master Pages in Peace and copy another one
• Create a Custom CSS to Add Branding
• To create a new css file, right click on the Style Library and select New > CSS
from menu.
• we need to add a link to our custom CSS file:
• <link href=”/Style%20Library/myCustom.css” rel=”stylesheet” type=”text/css” />
• Now modify the s4-workspace area so it will read our css file properly:
• Find the line:
• <div id=”s4-workspace”>
and replace it with:
<DIV id=”s4-workspace” class=”s4-nosetwidth”>

20. Custom Master Page Design

21. Others way to add CSS references in Master Pages
• Here are some of the most common ways to reference your custom
CSS for SharePoint 2010. One key change over 2007 is the ability to
specify After=”corev4.css” in the CssRegistration to make sure your
custom CSS is referenced after the OOTB corev4.css file.
<SharePoint:CssLink runat="server" Version="4"/>
Note: Default OOTB
Output Order:
<link rel="stylesheet" type="text/css"
href="/_layouts/1033/styles/Themable/corev4.css"/>
<SharePoint:Theme runat="server"/>
Note: If a theme is enabled
Output Order:
<link rel=”stylesheet” type=”text/css”
href=”/_themes/[UniqueCounter#]/corev4-
[u=UniqueHex#].css?ctag=[UniqueCounter#]”/>

22. CSS references in Master Pages
<SharePoint:CssRegistration name=”customfolder/samplecustom.css” runat=”server”/>
Note: Alternate CSS on Server but comes before corev4.css
Output Order:
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
<SharePoint:CssRegistration name=”customfolder/samplecustom.css” After=”corev4.css” runat=”server”/>
Note: Alternate CSS on Server and comes after corev4.css.
Output Order:
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/customfolder/samplecustom.css"/>
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/samplecustom.css %>"
After="corev4.css" runat="server"/>
Note: Alternate CSS In SharePoint Database for sites without publishing enabled
Output Order:
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
<link rel="stylesheet" type="text/css" href="/Style%20Library/emc_2010_custom.css"/>
<SharePoint:CssRegistration name="<% $SPUrl:~sitecollection/Style Library/~language/Themable/Core
Styles/samplecustom.css %>" After="corev4.css" runat="server"/>
Note: Alternate CSS In SharePoint Database for sites with publishing enabled
Output Order:
<link rel="stylesheet" type="text/css" href="/_layouts/1033/styles/Themable/corev4.css"/>
<link rel="stylesheet" type="text/css" href="/[sitename]/Style%20Library/en-
US/Themable/Core%20Styles/emc_2010_custom.css"/>