Tips and Tricks for a Public-Facing Site in MOSS

1. Lori Neff Senior Consultant, Inetium 6/14/2008 Tips and Tricks for a Public-Facing Site in MOSS

2. Topics • Considerations for Architecture • Navigation • Reusable Content • Master pages • Styling Login Pages • Page Layouts & Content Types • Custom Styles in Rich HTML Fields • Style Search Results • Hide Controls With Security Trimming • Create Print Page Link • Content maintenance scenarios • Planning Your Implementation • Surveys • Customize List Form • Accessibility Toolkit

3. Publishing Feature • Today we’ll be covering sites with the publishing feature enabled • Create a standard site and then enable the publishing feature • Or, when creating your site collection, begin with the Collaboration Portal (if you want surveys or discussion groups or blogs later on, then you’ll want the Collaboration Portal; the Publishing Portal doesn’t even allow you to enable these OOB features later on)

4. Considerations for Architecture • Consider the users involved: • Who will be visiting your site • Browsers involved (impacts CSS, navigation) • Level of interaction (navigation, media, web parts, RSS feeds, surveys, discussion forums) • Experience (simplicity of site, layout) • Who are your Content Editors • Power users – Can edit in SharePoint Designer, know HTML, etc. Can do some interesting things in CEWP (good/bad?) • New users – Don’t know HTML; HTML editors need to be restricted and built out to provide a consistent user experience. Impacts page layouts required, CSS, navigation, permissions • Who’s going to Implement Design • Need to be Familiar with SharePoint BEFORE they go to the SharePoint Designer classes; architecture impacts design decisions • Who will be your Site Administrators • What level of participation do you want to have in the ongoing maintenance of the site • Where is the content coming from? • Migrating information? from SQL? XML? Metadata?

5. Out-of-Box Navigation • Pros: Easy, quick, leaves power in hands of users • Cons: It’s not lightweight; customization in Master Page • Architect the site to leverage the OOB navigation best – create a site for each item that has sub-topics that will need to appear on the navigation • Note that this architecture will provide a structure for logical breadcrumbs, and use of the OOB site map • To customize: • You can do a lot with the assigned CSS classes • Width, number of levels deep, text wrapping are all set in the control; override settings in the master page • Example: change navigation to allow text wrapping • Select top navigation control; in Tag Properties panel, for ItemWrap, change from “False” to “True” • Issue with using Headings in Local Navigation (left nav) • If you inherit the top-level site’s Local Navigation, headings (and the links underneath them) disappear on the sub-site • You can find a fix at http://makingoffice2007work.blogspot.com/2007/12/sharepoint-how-to-make-navigation.html

6. Reusable Content • Pro: Easy to maintain, flexible • Con: Only available in Rich HTML publishing fields (NOT the CEWP) • To add a new Reusable Content item: • Select the text / html code that you’d like to repeat • From the top-level site, View All Site Content • Find the Reusable Content List • Add a new item to the list • Enter a name, description (if desired) • Click to enter content • To paste in HTML, click “Edit HTML” button • Click OK • To insert a Reusable Content item in page: • Enter Edit Mode for page • Click to Edit Content in page content field • In Rich HTML toolbar, click “Insert Reusable Content” button • Choose the desired Reusable Content Item from the list

7. Master pages • Tip: Consider what you’ll need to style • If your readers will never see the lists, consider only styling the Custom Master Page • If you customize the Master Page, Plan how you’ll deploy updates (features are your friends)

8. Styling login pages • Login pages (and all other pages that reside in the _layouts folder) live on the file system in the 12 hive • Method A: • You can edit these files on the file system, but be careful; it will affect all the web apps on that file system • Method B: • Create a local copy of the contents of the _layouts folder (put it in the root of your site collection) • Style the simple.master and other pages in the local_layouts folder as desired; necessary when you have multiple sites on one server with different designs

9. Add fields to Page Layout • You get only one page content field in the OOB page content type. • Scenario: Product page; content with “callout box” • Go to top level Site Settings, Site Content Types Gallery • Create new content type that inherits from Article Page • Create new site column with a type of Publishing HTML • From SPD, create a new Page Layout using the new content type you just created • In the Toolbox panel, under the list of Content Fields, you should see your new site column. • Plan for maintenance and scalability • Create a structure that will require no updating (or as little as possible) • Refer to implementation notes later

10. Custom Styles in Rich HTML Fields • CSS files that contain the OOB Rich HTML editor styles: • HtmlEditorCustomStyles.css • HtmlEditorTableFormats.css • To override these styles: • Make a copy with the exact same file name • Store it in your site (say, in your Style Library) • Make the desired changes (i.e., remove a style altogether) • Register it in your master page • To add to these styles • Add a new class and prefix the name with “ms-rte-Custom”, e.g., .ms-rteCustom-FabrikamTitle

11. Style Search Results - 1 • Create a search results page • Edit search results web part; Modify XSLT – copy existing and save for later • Replace xslt with this to show the raw xml results: <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:output method="xml" version="1.0" encoding="UTF-8" indent="yes"/> <xsl:template match="/"> <xmp><xsl:copy-of select="*"/></xmp> </xsl:template> </xsl:stylesheet> • Save and then run the search. • You'll see the raw xml results. • Save these xml results in a little xml page.

12. Style Search Results - 2 • Go into SharePoint Designer, create a blank aspx page. • Go to the Data View menu and click "Manage Data sources“ • In the Data Source Library pane, upload the xml file you saved a moment ago: • Expand the xml files node and click "Add an XML file“ • Browse to the file on the Source tab, click ok • Now you'll see your file listed in the Data Source Details pane • Click on the file's dropdown menu and show the data. • Select the nodes you want and drag them onto the page. • SharePoint Designer will render the data.

13. Style Search Results - 3 • Click on the Common Data View Tasks (chevron at top right of control) • Here you can define paging, columns, grouping, sort, layout, etc. • When you have the data (at least in HTML view), you can change aspects of the field result; • Change an image hyperlink to show its picture instead. • Change the title to be clickable (and its target should be {url} instead of {title}, but display is still {title}) • Format the date time of the creation date • Now just copy the xsl from the code view (everything within the XSL tag) • When you go back to your page, there's a small problem that the search results web part is too big to be edited. • So just go into the web part management view (add "?contents=1" to the end of the page url) and remove that web part. • Now go back to edit the page and add that web part back in again. • Paste your xslt into the editor.

14. Hide Controls with Security Trimming • Simple way to hide controls using security trimming: <Sharepoint:SPSecurityTrimmedControlrunat="server" Permissions="ManageLists"> Insert control here </SharePoint:SPSecurityTrimmedControl> • The left nav (quick launch) is wrapped in a security trimming control

15. Create Print page link - 1 • Create a file called print.css • Create definitions in css to hide necessary classes/tags/ids • Example: • .topNav { display: none; } • Add css link to master page: <link rel="stylesheet" type="text/css" href="/style library/print.css" media="print" /> • Save Master page and return to browser; test new css – go to print preview to see how the print.css changes the page • To add a button that will do a print preview for you, then add the following (see next slide for more): <a onclick="javascript:PrintPreview();"> <img alt="Print this page" src="/Style%20Library/images/print.gif" border="0"> </a>

16. Create Print page link - 2 • Now add the following script to the head tag in master page: <script type="text/javascript" language="javascript"> function PrintPreview(){ varsUrl = window.location.href + "&PrintPreview=true"; if(window.location.href.indexOf("?") == -1) {sUrl = window.location.href + "?PrintPreview=true";} window.open(sUrl, "_blank", "width=950,height=700,resizable=1,toolbar=1", true); } if(window.location.href.indexOf("PrintPreview=true") >-1) {SetPrinterFriendlyCSS();}                 function SetPrinterFriendlyCSS() { document.write('<style> @import url("<asp:Literalrunat="server" id="lit5" Text="<% $SPUrl:~sitecollection/Style Library/print.css %>"></asp:Literal>");</style>'); }  </script>

17. Content maintenance scenarios • Publishing on production • SharePoint’s publishing feature allows content to go through an approval process, and to publish at scheduled times • Content Deployment • Good in a situation where you have a read-only site, with your web apps on two different farms • Difficulties when custom content types are added to the equation

18. Planning Your Implementation • Tip: Create the initial design in a development environment, then implement it with features/solutions • Create your CSS, master pages and basic page layouts via the browser and SPD on a dev site • Create content types and lists via features, then implement them on the dev site • Since you might have page layouts that are built on a custom content type, plan accordingly • Pros: • Actual version control in TFS or equivalent • Streamlined implementation through different environments • Cons: • Investment of time and planning, and setup • Deactivating a feature leaves artifacts (i.e., a content type that is still being used in the site will remain)

19. Set up AAM properly • Make sure you have a fully qualified DNS entry for Alternate Access Mappings • Telltale signs: • Can’t check files in • Wrong CSS loaded • Mysterious permissions errors in SharePoint Designer

20. Surveys - Anonymous • To allow anonymous users to access a survey, but not allow them to edit the survey contents: • First, anonymous access has to be set up on the site collection • Go to the survey, go to survey settings.  • Click on “Title, description and navigation.”  • Go to “Advanced settings.”  • Under “Read access”, allow users to read All responses.  • Leave the Edit access at “Only their own.”  • Click OK.  • You should be back at the settings page for the survey.  • Now click “Permissions for this survey.”  • Under the Settings menu, choose “Anonymous Access.”  • Check “Add Items” and “View Items” (you need to keep view items because you can’t let them add without also letting them view).  • Click OK. 

21. Edit List Form • Create a Customized List Form: • In SPD, open the NewItem.aspx page, and do a File, Save As, and give the form a new name, such as NewItemForm.aspx • Delete the default List Form Web part from the page. • Go to Insert > SharePoint Controls > Custom List Form • Select the appropriate list, content type and form type • This will insert a Data Form Web Part that you can customize as you like. • If you want a survey to go to a different page than overview.aspx: • Remove the existing OK buttons. • Add a Form Action Button (from the Data View Controls section of the Toolbox) • Add an action to Commit and then add an action to direct to a new page. It adds the javascript for you.

22. Accessibility Toolkit • December of last year, HiSoftware created an Accessibility toolkit • Contains: • CSS files (all relative sizing) • A size utility (to change absolute sizes to relative) • Master pages (essentially copies of existing OOB master pages with adjustments for sizing, etc.) • Control adapters (accessible wrappers for current web parts, such as Excel, Search, lists and documents) • A Feature install