SharePoint for Designers

Notes from SharePoint Conference 2009

mpakron — Wed, 28 Oct 2009 15:52:56 +0000

Here are the notes I took while at the conference:

General:

Web parts are now open and can be extended
WSS is now called SharePoint Foundation
2010 requires 64 bit OS
Chrome can support languages (ribbon, ui features; does not apply to all site content)
Targeting based on rules-based audiences
MySites have been enhanced with status updates and activity feeds
Tagging and tag clouds
New Bookmarks feature replaces the MyLinks feature
Ability to rate content
Taxonomy tag hierarchies, managed metadata, unique document id’s, document sets
New web analytics service

Session: Enterprise Search:

FAST- was a competitor; offered more robust search capabilities.MS bought FAST and is including it in the new enterprise license for SP 2010
3 flavors of search:
– Search Server 2010 Express (free)
– SharePoint Server 2010 (intranet search; has upgrades from existing search)
– Fast Search Server 2010
Additions:
– Phonetic and Did You Mean… capabilities
– metadata extraction
– push results to your desktop
– visual preview of results on Results page
– visual best bets
– user context
– ability to connect to corporate assets outside of SP with connectors (BDC)

Session: Web Content Management in 2010:

Ribbon editing interface
You can restrict what users have access to in the ribbon
Fields have Suggestions, can create constrained fields
Easier to format data in the Content Query Web Part
Content to Content targeting feature
Data view mapping
Managed metadata
Can create reusable workflows; can import workflows from Visio
Enhancements to traffic analysis and site health monitoring; developer dashboard
Can use the Mac to do branding changes within Safari
Masterpages now affect _layout pages

Session: SharePoint and Silverlight:

SL is browser plugin, works in all major browsers
Has 100 OTB controls
Uses XAML (xml language); serialization of .net objects into xml
Build with Expression Blend
Designers can create UI but need developers for coding (they use Visual Studio)
Can add SL apps to SP pages within new webpart (comes in SP 2010); 2007 users can download Webpart from Codeplex
You can create a whole app in SL and host in seamlessly on a SP page.
SL works in 2007 as well as 2010

Session: Electronic Arts Case Study

They have an open contribution environment bc anything a user posts has their name attached; they have never had to remove anything a user has posted
Their site supports videos/streaming
They allow users to skin their own MySites/teamsites
They have customized their edit screens
Have a custom-create “type ahead” control for their fields
Use Firebug and yslow to determine the speed of their sites
Through research determined that users view pages in an F pattern, making content on the left and the top right the most important to users. With this in mind, EA designed their screens to have the most important content in the left column and top right areas of the page.

Session: Governance and Planning

Defines policies as to what SP is for
Give people appropriate training
Views aren’t made to support large volumes of items
Treat SP like an enterprise app
Test your back and recovery solution
Why have Governance plan?
Helps you figure out who does what
Avoid sprawl
Ensure content quality
Establish clear decision making authority
Defines roles, people, guidelines, technology
Clarifies plans
Create structure
Defines metrics to measure the success of your deployment
Define policies for service levels and appropriate use
Define procedures for common tasks

10 Points:

What are the business goals?
Examples: improve collaboration, improve search, replace shared drives…
Focus on business outcomes not requirements
Roles and Responsibilities
Executive sponsor
Governance board
Business owners
Solution admin
Tech support team
Site sponsor/owner
Site steward
Users
These are roles and as such one person may perform multiple roles
Each site or content area needs an owner
Deployment Model
Central vs. regional
Will you have one centralized farm to serve as users, or multiple farms setup to serve different region, countries, etc.?
There can be multiple modes of deployment
One size does not fit all
Different orgs have different needs and may deploy differently
Some orgs may want project and workspaces while others stick to team sites, while others have centralized portals, or a combo of any of these.
You can have multiple governance models, one for each type of site (rules for mysites; another gov. plan for team sites; yet another for blogs and wikis, etc.
Policies
Define the policies for your deployment
Guiding Principles
Consistent user experience
Keep end users in mind
Standards tied to scope
Existing company rules apply (if there is already a company rule about sending out profanity in company communications, then that also applies to your SP deployment-reuse existing policies)
Default user access should be Read-start open and then lock down
Publish once, link many
Metadata for content retrieval versus folders (particularly for 2007 deployments) (folders have been updated in 2010)
Launch and Rollout Strategy
Launch is not a one-time event
Allow culture time to absorb changes
Content Management Plan
Decide who can change and approve content
Training Plan
Train the helpdesk
Figure out who needs training; train the trainer
Governance Plan Document
Don’t include implementation details
Don’t leave HR out of the loop

2010 Considerations:

Social computing implications (tagging and rating features)
Managed metadata service

Session: Branding SP 2010:

Themes for 2010:
You can easily edit theme colors from within the browser
Colors and fonts are in open xml format
Css files marked up with variables
Comment-based design
Only 1 css files
Masterpages affect the _layout pages as well
Blogs and wikis are customizable
UI framework pieces are extensible
Can add and position the ribbon
Make sure you remove redundant code on your existing 2007 pages before pulling them into 2010 (take site actions out as this is replaced by the ribbon)

Session: Sapient Intranet Accelerator: Case Study:

Sapient is a high-end web design company
They created a base installation of SP that can be used as a preconfigured intranet
They created custom web parts
Their portal is not link-centric, shows snapshots of content rather than tons of links
Use of rollups
They use custom webparts to surface data to the portal
Have a poll webpart that allows users to answer short polls right on the home page
They use Silverlight slideshows to display pics and features
Design uses a grid and has lots of white space to aid readability
Use of color is subdued and used as accents rather than as large swaths of color-increases usability and readability of content pages

Session: Creating Dynamic Sites:

Recommends going totally custom for masterpages and themes-enterprise level sites deserve a custom look and feel, even more important for internet sites
UX and solution first, technology second
Be aware of web technologies such as RESTful programming, AGILE, AJAX, JSON, JQUERY…
Support content with variations
CQWP has been enhanced to show related content; don’t need xslt in order to define display

>> This blog also has a great overview of 2010.

I’ll Be at the SharePoint Conference!

mpakron — Fri, 16 Oct 2009 19:48:06 +0000

I will be in Vegas next week for the SharePoint Conference. I went last year to the one in Seattle and loved it. I will condense my notes from the conference and post the best stuff here.

UPDATE: Wow, that was a long week! Vegas is like another planet-I missed all the green I usually have in NOLA. I am very excited about 2010 and have registered for the trial already (go to the SharePoint 2010 site and click on Try It to register. One note-the nav is in Silverlight and seems slow/buggy…)

Question: what admin software are you guys using? Anyone using any of the following: Quest, ControlPoint or DocAve?

Make Title column a link

mpakron — Wed, 30 Sep 2009 20:16:52 +0000

It has been driving me nuts that you have to have a Name column, so you have a link to the files, as well as a Title column, so you know what you are actually clicking on. I found a tutorial for changing a column into a link but it also changed the text of my Title into the link text. So… I copied the code that was generated by that little experiment, grabbed the url that it wrapped, and then added that url around the Title code. Success!

Step By Step:

Create a webpart page and insert your library
Open page in SharePoint Designer
Right-click on the library and select “Convert to XSLT”
Find a Title in the code and wrap it with this url:

Now you can delete the Name column: Common DataView tasks > Edit Columns.
Save and preview-Title is now a link and no Name column!

Creating Teaser Intros for Blog Posts

mpakron — Tue, 09 Jun 2009 21:20:11 +0000

One thing I have been wanting to do with blog posts is create teaser intros, show x amt of characters of the post followed by a link to read the rest of the post. Sadly, SP does not provide this functionality out of the box. So I Googled the problem and found a site with the solution. The problem is the solution is hard to understand and my eyes glazed over trying to understand what the author was asking me specifically to do. I eventually got the fix to work, and decided that I probably wasn’t the only person who didn’t speak code who might need this solution, so I decided to paraphrase the authors fix in designer-ese… I take ZERO credit for the fix, please visit the author below for the original post:

Original fix/code: http://zabistop.blogspot.com/2009/02/customizing-sharepoint-blog-posts-web.html

Step 1: Open SP Designer
Step 2: Open Blog site in Designer
Step 3: Open default.aspx
Step 4: Click at the very top of the List View Web Part for the posts and then right-click. Select Convert to XSLT Data View:

Step 5: Go into code view and do a find for: ms-postbody. It should bring you to the area of code that you need to swap out. Below is the code that needs to be replaced:

Replace this code...

Replace with this:

with this code...

(aside: I am trying in vain to upload a file that allows you to copy and paste the code, but the crappy WordPress interface wont do it! Can’t add code to the page or the stupid thing tries to execute it, even in code tags! Stupid app!)

The 250 in the last xsl: value snippet is the number of characters of text that is displayed-this number can be whatever you want. You can also change what the “more” link says, maybe to “Read Post” or whatever.

Step 6: Add new xsl template. Add the code below to the top of the page under an existing xsl:template snippet:

Now save and open the page in your browser.

Styling webpart data with the Data View Web Part

mpakron — Thu, 07 May 2009 19:31:47 +0000

One of the things that as been driving me crazy is the inability to selectively style webparts. On the home page of my company’s intranet, I have several webparts pulling content in, and they all look the same. I primarily wanted to make the announcements web part look different. I tried every hack I could think of to find some kind of unique hook to attach some styling to. I would change the title style and then watch it change ever title on the page. I have been trying to find uses for the data view web part and so I thought, maybe I can use that to pull in the announcements and then style them…

Long story short, it worked. Using the dvwp I was able to pull in the announcements list, set what fields to display, and then individually style the display of those fields.

First, I created a page layout. You can’t add the dvwp to pages directly unless you create a page based off a page layout and then detach that page from the page layout in SPD before you work on it. On the page layout in Sharepoint Designer, I selected a web part zone, clicked on Data View in the toolbar, and then selected Insert Data View. I then pulled the announcements list onto the dvwp area. I clicked on the arrow to the right of the DVWP and the Common Data View Tasks box displayed.

Common Data View Tasks

First, I edited the columns. I removed all but Title and Body. Then I changed the layout to Repeating Form Style. I then set the paging to display items in sets of 4. Under Sort and Groups, I set it to sort by Created, descending.

Now it was time to style the content. First, I removed the word Body that displayed right over the body content. Then I moved the title xsl code to right above the body code. I created two styles, one to handle the title and one for the body. I wrapped the styles around the fields and then cleaned up the display a bit by removing the extra row, hr and br tags.

Wrapping styles around the fields.

Once that was done, I saved the layout, checked it in and then created a new page based off that layout. The dvwp displayed on the page as a webpart. I exported the webpart and then added it to the Web Part Gallery. I went to the intranet home page, put it in edit mode, and then added the webpart to the page.

One note, I tested this on my dev server first and made sure it worked before I tried it on production

Allowing users to add publishing pages

mpakron — Fri, 01 May 2009 18:19:04 +0000

I have a subsite that I wanted to give over to our Documentation group to maintain. It is a publishing site with a custom page layout. I tested the security with a test user account. I gave the test account full control access to the subsite. When signed in as the test user, I could see the Site Actions button, see pages, security, etc. But when I would try to add a page, I got an Access Denied error. I tried it on a different subsite to just see if there was something wrong with that particular site, and I still got the error. After digging and poking around the web, I found a reference to give the user read access to the Master Page gallery. I gave the test user read access to the master page library and then signed back in and voila, it works!

Sometimes SharePoint just doesn’t make sense, with all the hoops you have to jump in to do seemingly simple things. Like add reusable content lists to a page layout. All i want to do is just add the references to two reusable content lists directly into a page layout so they are there when i make my pages. Apparently, to do this requires custom programming, still waiting on the estimate. In the old days, I’d simply add a library item into a Dreamweaver template and call it a day. Bah.

Adding Favicons to SharePoint Sites

mpakron — Thu, 09 Apr 2009 13:52:04 +0000

The new corporate intranet I have been working on the past year will launch Friday night (yeah!). One my last of last things to do is to create a favicon. Easy enough. Just create an image 16 by 16 pixels and save it as a gif or png. I then went here: http://www.html-kit.com/favicon/ . This site lets you upload the graphic and it generates the .ico files for you. There are standalone programs I have used in the past to create the .ico files, but this one is a website, its free, and it took ten seconds.

Here’s where I had issues. Just where is the “root” for a SharePoint site? I added the files right next to default.aspx-no dice. I added them to the images folder on all the production web servers. Nope. We use an external share for images so i don’t have to store custom images in SharePoint. Once I added the files there and linked them in the header of my masterpage, voila, they show up!!!

Here is what I added to the head of the masterpage:

Favicon links

As for why this worked, and why having the images in the images directory doesnt work-you got me. I have had issues on regular websites getting the favicons to show up, so maybe they are just poorly implemented by browsers. If you are not using an external share for your SharePoint images, I would suggest you ask your admin to set one up. I add the images once, link them once, and that’s that. I don’t have to worry about pushing them from one server to the next and I don’t have to store them in SP libraries.

If anyone knows a better way to do the favicons for those without an images share, please let me know and I will amend the post.

From Dev to Production-Don’t Forget Your Themes!

mpakron — Fri, 20 Mar 2009 14:56:05 +0000

We finally pushed our new intranet from development to production the other day. As I was checking the pages I noticed my theme was not showing up in the Themes list. Doh. Anything in the 12 hive that you added does not push when you go from dev to production. You have to manually move copies to all production servers. In my case, our farm has five production servers, and I have a custom theme, so thats three things I need to copy over to each server:
1: spthemes.xml
2: thumbnail image for theme preview
3: custom theme folder

Beyond that oversight, everything pulled over fine, all of my relative links work, pages are there, masterpage and page layouts pulled, all is good. ;0

Adding Code to SharePoint pages using the Page Viewer Webpart

mpakron — Thu, 05 Feb 2009 15:10:39 +0000

As I have mentioned before, my team and I are working on redesigning our corporate intranet in SharePoint. Our programmers are learning .Net and have been getting comfortable coding in it and creating applications. They haven’t really taken the time to figure out how to code within SharePoint though, and this leaves us with a problem. There was a lot of custom code on our old intranet and SharePoint doesn’t have an out-of-the-box solution for everything. My programmer started looking into creating a custom webpart but decided it was a pain and due to time constraints, we came up with an easy solution that works quite well.

He created a .net page with the necessary code for the widget and we pulled the code into the Sharepoint page using the Page Viewer webpart. We currently have two of these on our home page. One randomly loads a different slideshow image that upon clicking the image launches a slideshow in a popup window. The other loads stock quote data that is pulled from a web service.

I’m sure that hard-core programmers and SharePoint developers will weep at this hack, but for a small team with limited resources and time, this works quite well for us and was way easier to implement than a custom webpart. I have also used the page viewer webpart to pull in a Google map. On our old intanet, I was able to add the iframe code that Google Maps generates, but SharePoint seems to hate iframes and wont render them, so the page viewer webpart was a decent workaround here as well.

Standard SharePoint font makes marks tiny

mpakron — Tue, 30 Dec 2008 14:04:05 +0000

My company has a ton of marks that they use in their company communications: copyrights, registration symbols, trademarks, etc. No matter what I did, they displayed so small as to be unreadable. Apparently, marks rendered in Calibri, the standard font for much of SharePoint, render too small, but if you change the font to something like tahoma, they show up fine. Since there is no way in css (or none that I know of) to target an html symbol, I wrap all marks in the sup tag, which raises them a little, like a mark should be anyway, and I changed the font-family attribute of the sup tag instead. Works!