Zoomit

1
Pre-setup

• Zoomit
• Use IE7
• Virtual PC network local only

2
The beginning

• http//www.youtube.com/watch?v7SiBBi35zKY
• Bill Gates Jerry Seinfeld (Shoe Circus)

3
SharePoint - The yellow brick road to public
websites

• By Adam Cogan

4
Agenda / Abstract

• The yellow brick road of getting the largest
  public SharePoint site in Australia running
• Why companies want SharePoints Web Content
  Management
• How to sexify the look and feel (aka
  de-SharePointing with style)
• Reducing use of tables via ASP.NET control
  adapters
• Cross-browser compatibility the easy way with
  JQuery
• How to use the Custom Navigation Control Adapters
  the golden pearl
• Customizing SharePoint web parts
• How to deploy (and how you can avoid three
  all-nighters)
• Performance - targeting anonymous users
• The lessons learned (aka rules)
• SharePoint 2014

5
About Adam

• Adam Cogan is the Chief Architect at SSW, a
  Microsoft Certified Partner specializing in
  Office and .NET Solutions.
• At SSW, Adam has been developing custom solutions
  for businesses across a range of industries such
  as Government, banking, insurance and
  manufacturing since 1990 for clients such as
  Microsoft, Quicken, and the Fisheries Research
  and Development Corporation.

6
Scenario Sprawling company with lots of
departments
7
1 Why companies want SharePoints Web Content
Management

• Q\
• http//www.youtube.com/watch?vhrpS9m2VF1cfeature
  related
• Sharepoint gets things done

8
A Windows Integrated
9
SharePoint permissions for AD users
10
SharePoint managing groups
11
B Already using it on intranet
12
C Rich editing experience
13
D Presence stuff is awesome

• Someone has stuff checked out...

14
Tell him...

• Check it in

15
E Publishing
16
Workflow is great
17
D Customize with .NET
18
E Already sold its the future
19
F Microsofts 1 selling server product

• March 2008 US1billion-dollar business with
  100 million licenses sold, and growth of more
  than 50 percent in the second quarter of the
  current fiscal year
• http//www.microsoft.com/presspass/features/2008/m
  ar08/03-02SharePoint.mspx

20
G All the other things
21
Caution
22
The development overhead is massive

• Adding special customization (e.g. Menus)
• Using Virtual Machines
• Deployment
• Debugging looking at the SharePoint log

23
Reading the SharePoint Log

• From the initial error...

24
Finding the right log file hiding in the 12
hive...

• C\Program Files\Common Files\Microsoft
  Shared\Web Server Extensions\12\LOGS\

25
Finding the actual error
Find the lines ... Somewhere in the middle of
walls of text
Something about web parts
The error is here List does not exist
Cryptic error code actually useful to find more
information on a particular error
StackTrace split over multiple lines...
26
2 How to sexify the look and feel (aka
de-SharePointing with style)

• Q\

27
Q\ Why companies dont want SharePoint
28
IE Tip learning how to style SharePoint

• IE Developer Toolbarhttp//www.microsoft.com/down
  loadS/details.aspx?familyidE59C3964-672D-4511-BB3
  E-2D5E1DB91038displaylangen

29
SharePoint public websites

• http//www.wssdemo.com/Pages/topwebsites.aspx
• (use IE)

30
A Look and Feel
31
The cause not the designer

• theyre not like this

32
The cause not the developer

• and theyre not like this

33
The cause the content editor

• Theyre like this

34
Tip 1 using Notepad

• Copy to Notepad first

35
Tip 2 Enforce limited styles
36
How?
37
How?
38
How you SHOULD be able to do it

• Should be able to go to Common Styles (aka CSS)
  in Look and Feel

39
Tip 3 disable unwanted style facilities

• Disable
• Font face
• Size
• Colour

40
TIP Remove references to name.dll for public
viewers
41
TIP the designer's job must be defined

• 1) Overall PSDs concept mockup
• 2) Slice into HTML and Images - HTML mockup
• 3) Make the CSS files for the HTML HTML
  styling
• 4) Give back to the developer

42
TIP the designer's job must be defined (cont)

• Working together is important otherwise
• Designer vs Developer
• Designers like it to be perfect, so their designs
  have the presentation intended
• If they are working they are more understanding
  and you avoid
• e.g. It is not perfectly centred
• e.g. This pixel is out of alignment
• e.g. Colours are not right... this is 1 shade off
  due to compression

43
The briefQ How would you do this

• http//www.youtube.com/watch?vJg1-ywndVNcfeature
  related
• A sharepoint public sites needs focus

44
BEFORE .psd
45
AFTER Live Website
46
BEFORE .psd
47
AFTER Live Website
48

• Thanks Joe and Tristan

49

• 4 web parts
• 2 web part zones

50

• 7 page layouts
• 1 master page

51
WorleyParsonsBasicPageLayout.aspx

• 4 Web Part Zones
• Primary

52
WorleyParsonsBasicWidePageLayout.aspx

• /Contact/Pages/OfficeListings.aspx
• 1 webpart
• 1 webpart zone

53
Special ones
54
WorleyParsonsCareerPageLayout.aspx

• 1 Web Part Zone

55
WorleyParsonsEventPageLayout.aspx

• No webparts

56
WorleyParsonsHomePageLayout.aspx

• 2 Web Part Zones
• 4 Web Parts

57
WorleyParsonsNewsPageLayout.aspx

• 2 Web Part Zones

58
WorleyParsonsProjectPageLayout.aspx
59
3 Reducing tables

• Tables are bad because they are
• Inflexible (constrained to columns and rows)
• Verbose (require insane amounts of code, leading
  to size bloat)
• Slow to render
• WebPartZones tables
• Menus hideous tables
• Table-based layouts put web design and efforts to
  be standards compliant back by about 8 years

60
How to reduce use of tables

• By using ASP.NETs control adapters
• Provide a simple snap-in architecture (via a
  .browser file in your /App_Browsers directory)
  for custom functionality that can override the
  Render() method in webcontrols
• We used control adapters to
• renders WebPartZones as DIVs
• render all menus as ULs and LIs

61
4 Cross-browser compatibility the easy way

• Control over sharepoint elements
• Use it to manipulate sets of elements using CSS
  like selectors
• The SQL of Javascript
• Usually we implement jQuery in the page layout

62
jQuery How we did the news ticker

• The webpart used is a standard content query
  webpart
• We customised the output in the ItemStyle.xsl to
  render the news headlines as a series of DIVs
• Iterate through each DIV using jQuery
• Make them fade out and then fade in
• We decided to put all javascript into the page
  layout to avoid confusing the editor (and
  potentially having them delete it)

63
5 How to use the Custom Navigation Control
Adapters the golden pearl

• Menu
• Image
• Abstract
• Special Layout

64
6 Customizing SharePoint web parts
65
6 Customizing SharePoint web parts
66
ASP.NET

• Controls - Gives 30 controls
• Buy some extra from Telerik, ComponentArt,
  Infragistics...

67
ASP.NET

• User Controls - Develop
• User Controls - Gives 0 user controls???

68
Old way...

• ASP.NET Custom Controls or User Controls

69
The new way!

• SharePoint - Web Parts

70
The new way

• Web parts
• Hard work
• Difficult to test (SharePoint error logs are a
  nightmare!)

71
SharePoint Web Parts

• SharePoint gives lots of web parts for free
• http//www.youtube.com/watch?v1UNSfm4Of80feature
  related
• More than you think for free

72
What do I get for free?

• Content Query
• Content Editor
• Dataview
• etc.

73
Content Query Web Part
74
Content Editor
75
DataView
76
You can do a lot immediately

• Properties
• Data source (SQL table, list etc)
• Content type (news, event, project etc)
• Style (title, body, description..... XSL)
• Content editors can do this
• Quick and Easy

77
Editing Interface for the CQWP
78
Not every property is on the UI

• Q\ What if you want to do more?

79
Export for more options...
80
Q\ So what is a GridView?

• Grouping/expanding
• Paging
• (Dont need editing)

81
DataView Web Part

• Multiple data sources (lists, databases, RSS
  feeds etc.)
• Behaviour is similar to the ASP.NET Gridview
• Create and modify directly on a page in
  SharePoint Designer
• Multiple or single view option

82
The finished article
83
Styling the Dataview Web Part

• XSL is embedded into the web part

84
Q\ Do you have to use XSL?

• A We also have some basic options for Layouts
  through the SharePoint Designer

85
Working with the Dataview

• Create the Dataview on a page through SharePoint
  Designer
• Publish
• Export
• Import into Web Part Gallery (for reusing a
  million times)

86
The finished article
87
The finished article
88
Q\ How do we get Repeater functionality?

• List several items
• Links to full articles

89
Q\ How do we query across our site collection?

• Query across multiple sites

90
Content Query Web Part (CQWP)

• Query data from multiple lists/sites
• Site collection, current and child sites or
  specific list
• Default behaviour provides links to pages in your
  site collection

91
CQWP editing

• You can edit the CQWP and set many different
  settings
• Change the data source, number of news items,
  choose a default style etc.
• Filter by content type, set the number of items
  to be displayed

92
Further customization of the CQWP

• Export the web part for more options
• After export, edit the XML

93
Further customization of the CQWP 2

• Modify the CommonViewFields property to add non
  standard site columns to the query output

ltproperty name"CommonViewFields
type"string"gt Rollup_x0020_Image,ImageNews_x002
0_Abs tract,RichHTMLReleaseDate,DateTime lt/proper
tygt
94
Further customization of the CQWP 3

• Write your own XSL for styling and reference in
  the ItemXslLink, XSL and ItemStyle properties

95
Further customization of the CQWP 4

• Upload the modified web part to the gallery or
  directly on the page

96
The finished article
97
Customized CQWP in action

• Links to the news article
• All the content is on the news page
• Images, text, HTML

98
7 How to deploy
99
8 Performance

• Anonymous Caching includes a tag
• Object Caching
• BlobCache broken!
• Customization
• View StateToDo remove the 32k (of 76k)

100
Configuration Anonymous caching

• Cache ASP.NET output
• PAGE BEFORE with SQUAREHOW LONG
• ADD GREGS RED SQUARE
• NEXT PAGE
• lt/htmlgtlt!-- Rendered using cache profilePublic
  Internet (Purely Anonymous) at
  2008-09-15T193654 --gt

101
Configuration Object caching (aka Lists)

• Cache lists that are commonly accessed
• ADD GREGS RED SQUARE

102
Configuration BlobCache

• IMAGE
• Web.Config
• ltBlobCache location"C\blobCache"
  path"\.(gifjpgpngcssjsswf)" maxSize"10"
  enabled"true" /gt
• Warning Test thoroughly sometimes
  mysteriously CROPS your files!

103
Customization

• Http module to filter outgoing HTML

104
StrangeLoop
105
8 The lessons learned (aka rules)

106
The future - SharePoint 2014

• /Pages/
• Nice URLs need to give full URL rewriting my
  users dont care that we have a list called
  Pages

107
What the CAML?

• When the whole world is moving towards LINQ, why
  have Microsoft gone and used an arcane query
  method like CAML?
• Would be much better to have LINQ to SharePoint

108
Add column Modified PC
109
Why do we have to check everything out to look at
the editor's view?
110
What kind of a name is "Name ActiveX Control"
anyway?
111
Support Firefox and Chrome

• Microsofts incentive?

112
Tips

• Include Google analytics
• See HTML Code

113
Summary

• Why companies want SharePoints Web Content
  Management
• How to sexify the look and feel (aka
  de-SharePointing with style)
• Reducing use of tables via ASP.NET control
  adapters
• Cross-browser compatibility the easy way with
  JQuery
• How to use the Custom Navigation Control Adapters
  the golden pearl
• Customizing SharePoint web parts
• How to deploy (and how you can avoid three
  all-nighters)
• Performance - targeting anonymous users
• The lessons learned (aka rules)
• SharePoint 2014

114
Summary

• SharePoint is cooler than you think
• http//www.youtube.com/watch?vLZtbshemzq8feature
  related

115
Resources

• Rules to Better Sharepoint CHECK IT
• http//www.sharepointjoel.com/default.aspx

116
2 things

• AdamCogan_at_ssw.com.au

117

• New Family - Jerry Seinfeld and Bill Gates Ad
  (Long Version)
• http//www.youtube.com/watch?vgBWPf1BWtkw

Thank You!