Edit Dialog

A client asked me to create a roll-up of some document libraries, and I decided to exercise the data form web part. It worked fine until I was asked why he got an open/save dialog and not the standard SharePoint read-only/edit dialog from document libraries as to the right.

After some help from some Twitter folk (@zaijian and @gvaro) it was made evident that there is some JavaScript that surrounds the anchors in the document library.  After comparing AllItems.aspx to my custom page I saw the JavaScript not included. I then added the JavaScript references around my XSL, and sure enough I got the dialog!

I tried to go one step farther and the whole context menu, but I was only able to get portions of us such as the gold hover bar. I know there were some hidden divs the JavaScript used, but alas I had other work to move onto. If anyone has experience with adding the whole context menu I’d be glad to add it here for others.

<a onclick="return DispEx(this,event,'TRUE','FALSE','TRUE','SharePoint.OpenDocuments.3','0','SharePoint.OpenDocuments','','','','110','0','0','0x7fffffffffffffff')" href="{@FileRef}" onfocus="OnLink(this)"><xsl:value-of select="@FileLeafRef" /></a>

That being said, making the migration is painful in some areas. One of which was how I handle the lack of productivity software I had in Windows—namely Microsoft Outlook.  As I search around there are a few options in attempting to tackle this problem.

1. Use VMWare Fusion or Crossover to load Windows and then Outlook.
2. Use Microsoft Entourage.
3. Find a way to use the native OS X applications (iCal, Mail.app, and Address Book).

Using Virtualization Technology

This seems straight forward enough on the surface, but on the inside it’s fraught with problems.  First, the idea of using a virtual machine to load productivity software doesn’t seem, well, productive.  This is especially true when I have to dedicate a gig of precious memory to the VM (granted I have 4 GB).  I tried it, and I was able to use it without problem but I wasn’t happy with this option.  I became discontent with it when I started using Mail.app for my personal e-mail. I love the simplicity of the application, and I wanted to use it full time.  I should say I tried Crossover, and I didn’t like it at all. VMWare’s unity feature is far better.

Use Microsoft Entourage

I went out and got a license of MS Office 2008 for Mac.  Word, Excel, and PowerPoint aren’t bad, but they pale in their Windows counterparts. After using the ribbon for so long now I love it. Office 2008 has a “ribbon” of sorts, and it’s not that bad. For quick document work it works fine. If I need more then I can use my virtual machine. However, this isn’t the case for Entourage.

Microsoft Entourage has to be one of the worst e-mail clients I’ve ever used. Sure, it connects to Exchange without a problem, but when you have expectations it will work like Outlook it is very disappointing.  I tried it for a while, and I decided it simply doesn’t cut it. The way you add recipients in e-mail is awful, and I quickly found out that you can’t do HTML e-mail in Entourage which means no embedded links. Epic fail. I hated it, and it made me look to the third option.

Faking Exchange Support

I say “faking,” because the support isn’t native to the OS X apps. Recently, Apple unveiled that the next version of the OS dubbed “Snow Leopard” will have native support for Exchange 2007 in their apps similar to the iPhone (which I use without complaint). But right now my company uses Exchange 2003 which I don’t know if it will be support in Snow Leopard, and it isn’t to be released until next summer.  That leaves a long time for frustration. Surely, there must be a way to do this right?

After searching extensively I discovered I’m not the only who has struggled through this. What surprises me even more is the lack of a third party vendor to fill this void. I would’ve happily paid several hundred dollars for this, but there is nothing out there to accomplish this. It is obvious that only until recently is Apple taking the enterprise environment seriously with Exchange support (no matter how much they may despise it).  I fortunately was able to find a solution in the mean time. Here is my recipe:

Ingredients

1. Microsoft Entourage (bear with me)
2. Mail.app
3. IMAP enabled in Exchange
4. Dock Dodger

Preparation

The preferences pane in Entourage

I discovered that Entourage supports sync services to send calendar events and contacts to the native OS X programs. OK, this is a good start.  As you can see in the screenshot go to Entourage — Preferences and select Sync Services in the left panel.  Then check both boxes to send calender events and contacts to the native applications.  This will via a background service take care of the synchronization from the native apps to Exchange. When you select the option to sync you will receive a prompt, and you will want to choose “Merge Entourage items with Sync Services items” which will allow bi-directional sync between the two. So if you add an event in iCal it will go to Entourage and then Exchange, and if I add an event in my iPhone it will go from Exchange to Entourage to iCal. Not pretty but it works.

Then we have the e-mail issue. This was by far the most difficult and frustrating part. When you create accounts in Mail.app it allows you to create Exchange accounts which is a misnomer. What it means is it will attempt to use Outlook Web Access to send/receive, but it also means you’ll be really using IMAP on an Exchange server.

I found an article which outlines setting up IMAP on Exchange. I had to sweet talk my boss, and he sympathized and helped.  They set up IMAP (Exchange is above me), and that led me to now getting closer to being free of Entourage.  When you set up an account under the Exchange heading you’ll be asked to specify a mail server (such as mail.yourdomain.com) which will come from your Exchange admin. You will also give it the address where you access Outlook Web Access (your webmail address). I was then able to successfully download messages. I had some problems with SMTP. My company uses RPC over HTTPS to connect so I had to use the Password option and specified my credentials (for the username I had to use domain\username).  Then I was up and running!

Cleaning Up

Now it’s working. It’s not pretty, but I wasn’t expecting it to be. It was a utilitarian effort, and it succeeded in accomplishing my goal. But it wasn’t as seamless as I wanted. Entourage would always show up in the dock and also the application switcher. Now I never want to see Entourage anywhere, and I found Dock Dodger. This is a freeware program that removes running applications from the dock and application switcher. By simply dragging the Entourage icon into the app it removed it. Before I did that I click on the icon in the dock and decided to open it at login (as I’ll always need it).

You’ll also notice dialogue windows for the send/receive. I haven’t found a way to completely remove them, but if you close it when it’s running it will go away. Unfortunately, on reboot it comes back. I hope to find an answer to get rid of the dialogue.

Concluding Thoughts

I can now use the native apps, and I am up and running. Entourage now uses around ~75 MB of memory which is much better than the 1 GB option with VMWare Fusion.  I am happy for now, and I look forward to Snow Leopard when I can completely axe Entourage from my life.

I would like to thank Nick Dawson (my Pownce buddy) for empathizing with my struggle and pointing me in the direction I needed.

Hirsch’s Branding Effort

I was recently tagged to “brand” a SharePoint installation for Hirsch Pipe & Supply Co.  I knew it would be an interesting challenge, but I had no idea how bad it truly would be.

SharePoint is built on ASP.NET 2.0 which I had worked with in my previous job. I found ASP.NET very powerful and flexible. Master pages, App_Themes, CSS Friendly Adapters, and more made working on ASP.NET interfaces relatively painless.  Knowing that SharePoint utilized master pages I thought it would be much easier than it was.  However, it turned out to not be the case.

The Default Master Page

I was immediately struck by the mess that is the default master page.  The master page is laid out with, of course, tables which is reminiscent of why Microsoft is such a joke in the designer world.  Well, I decided to rip out the tables, and surely that would make it easier right?  No.  It turns out that SharePoint only uses one standard ASP.NET control (the navigation control), and the rest are SharePoint specific “delegate” controls which made layouts with CSS difficult.  These are of course stored on the file system, and the only way to edit them is to create painful features.  It looked as though I was stuck with extensive tables for much of the layout.

When I did yank out much of the table layouts it only opened up a headache down the road.  It was actually more painful to try and layout it with CSS then just sticking with the table layouts.  What made it difficult are the extensive nuances in the SharePoint interface that are dependent on others.  For instance, I would lay it out in CSS, but when I went to edit the page to add web parts everything went awry due to dependencies on extensive tables for layout.  I was able to lay out the majority of the default master page with CSS, but I ended up reverting to tables for the main content area due to pain after pain. I did go with Heather Solomon’s minimal base master page for publishing sites which was a better start then I had.

The CSS

The fun doesn’t stop there.  SharePoint has a core stylesheet that is over 4,000 lines long.  I’ve dealt with more styles in one shot, but looking at the stylesheet you would think a 10th grader created them.  There is a lack of shorthand, units of measure, and extensive IE proprietary styles.  Add onto the fact there are no comments in the stylesheet it is absolutely useless to attempt to decode it.  You also can’t simply remove the core styles; well, you could, but it’s another headache that is ultimately not worth tackling.  It’s again easier to deal with the bad then try to make it better.

SharePoint does allow you to specify an alternate stylesheet which does, thankfully, get rendered after the core styles.  The cascade becomes your best friend in altering the styles.  You’ll also notice the “classitis” that abounds in the master page and core styles.  They all have a prefix of ms– which is unneeded and unhelpful.  I wasn’t surprised to find a lack of advanced CSS 2 selectors due to the pressure to support IE 6, but they are hardly any descendant selectors which would drastically decrease the amount of classes in the markup.

The JavaScript

I know Microsoft is now supporting jQuery which we can only hope will reduce the amount of “obtrusive” JavaScript through the site.  It reminds me of how I wrote JavaScript back in the day.  Attempting to decode the core JavaScript is a puzzle I didn’t even attempt.  You are once again forced to use proprietary JavaScript instead of taking it on to write it any better.  If they did abstract the obtrusive JavaScript it would drastically decrease the complexity of the markup sent to the browser. I did end up using jQuery to set the size of certain divs, and I also attempted to clone() and append() DOM elements but it proved fruitless.

Hope for SharePoint vNext

I hope, first that I never have to alter the SharePoint UI again, but that the next version of SharePoint will construct a better default UI with the following changes.

1. Use CSS for layouts.
2. Ditch the delegate controls to use more of the standard ASP.NET controls (or at least improve them).
3. Use a well-commented core CSS file with advanced selectors to eliminate the need for classes.
4. Switch to an unobtrusive JavaScript model.
5. An increased focus on accessibility for public-facing sites.

I contacted Mark to contribute to his fantastic catalog of contributors, and he passed some my way. In the last week I handled questions from two users already! One deals with a technical use of the technology and another asks for advice in encouraging adoption by end users. Please check them out as well as subscribe to Mark’s blog!

• How can I restrict views to the contributor’s content, only?
• How do I get End Users to start using SharePoint?

With the IE Tab Firefox extension we can browse SharePoint sites inside the Firefox interface on demand without having to open IE. Here is a short screencast on how to do it.

And this example is better than other’s I’ve seen. On some sites where the blog/post title is long then the post title is truncated! This is unacceptable when search engines give so much weight to the content of your post titles.

For a long time I circumvented this behavior by using the Optimal Title plugin. It worked fine, but it was yet another plugin for something that should’ve been inside the core. So I opened ticket #4407 to integrate the plugin architecture into the core. I created a patch, and it became changeset 6,538! In short, I added a parameter into wp_title() that sets the location of the separator. By default, it goes to the left, but you can move it to the right by specifying it. If you don’t specify anything it defaults to the legacy behavior of going to the left.

This is the code you can now use to generate sexy SEO titles:

<?php wp_title('&raquo;',true,'right'); ?> <?php bloginfo('name'); ?>

This will print: Post/Page Title » Blog Name. By ensuring that you specify meaningful titles for your postings then you can ensure that your findability will increase.  The official documentation on this function has also been updated to include this change.

1. Well-formed, semantic markup
2. CSS for layout and presentation
3. Ensure that the form is both usable (easy to read/use) and presentable
4. No tables or line breaks

To avoid the line breaks we simply use the CSS “clear” property. This property says: “clear all floated elements to the x side of me”. So for clear: left; means that there should be no floated elements to the left of the element, and I use this in laying out the form.

Here is the CSS, but be sure to check out the full example.

body {
font: 13px "Myriad Pro", serif;
}
fieldset {
width: 300px;
padding: 10px;
}
legend {
font-weight: bold;
}
label, select, textarea, input {
float: left;
font: inherit;
border: 1px solid #ccc;
margin-bottom: 15px;
}
fieldset *:hover, fieldset *:focus {
background-color: #eee;
}
label:hover, legend:hover {
background-color: transparent;
}
label {
width: 75px;
clear: left;
font-weight: bold;
border: none;
}
input[type="submit"] {
clear: left;
margin-top: 10px;
margin-left: 75px;
}
textarea {
width: 200px;
height: 75px;
}

I knew jQuery existed, but I didn’t realize how powerful the language was until recently. When I realized I could select and manipulate DOM elements with CSS selectors then I was off to the races! I love how it’s tailored for designers who already understand that syntax. There is no more getElementById(“search”) or other garbage, because I can write this.

$("search").show();

Now, that is elegant! The only thing more impressive then the way it does selectors is how extensive the API is. Not only is extensive, but it is actually understandable. It’s the perfect balance between extensibility and ease of use. It’s like adding Mootools and script.aculo.us together with better DOM selectors.

Toggle Goodness

I love JavaScript toggles and its variations. It’s much more elegant that simply changing an element from display “none” to “block.” jQuery comes with an easy way to toggle elements, and I recently did something like this at work.

$(".click").click(function() {
        $(".toggle").slideToggle("fast");
	return false;
});

Ajax With jQuery

jQuery doesn’t stop there. Doing Ajax is simpler than it seems it should be. Here’s a function that onclick will do a GET via Ajax and return a message notifying the user that the request was successful.

$(".ajax").click(function() {
	$.ajax({
    		type: "GET",
    		url: "load.html",
    		dataType: "script"
		})
	$(".successmsg").ajaxSuccess(function(evt, request, settings){
    	        $(this).append("<p>Successful Request!</p>");
	});
});

What if I want to append content into the DOM? Difficult right? Not so much.

$(".append").append("Append some text");

jQuery Plugins

The cool thing for all those effects that jQuery doesn’t provide out-of-the-box then it provides a rich API for users to develop plugins on top of jQuery. For instance, my portfolio utilizes the Coda-Slider jQuery plugin.

At work I was tasked to create some DHTML menus which I believe is a usability nightmare and an IA mistake, but alas I had to. I wanted to maximize the usability, and I found Superfish which is “Suckerfish on ‘roids.” I was able to make sexy menus that had plugins on top of the plugin including the hoverIntent jQuery plugin which is smart enough to know whether you really want the menu or if you’re just trying to move around the page.

Additional Resources

Well, that’s just scratching the surface of what jQuery can do! While learning more about it I’ve found several sites that have helped me.

Tutorials/Blogs

• jQuery Crash Course
• Learning jQuery
• jQuery for Designers
• Remy Sharp
• jQuery Tutorials for Designers

jQuery Plugins

• Official Repository
• jQuery User Interface (Coming Soon)
• 240 Plugins jQuery
• 50+ Amazing jQuery Examples (Part 1)

API Documentation

• jQuery API Browser
• Official Documentation
• jQuery Mailing Lists/IRC

IDE Integration

• Getting Started with Aptana and jQuery
• Intellisence for jQuery in Visual Studio 2008

• Firebug  - Essential tool for CSS/JavaScript debugging.
• YSlow — Firebug add-on to help determine performance bottlenecks.
• Web Developer Toolbar — Provides tools to compliment Firebug.
• Fireftp — The best FTP client and in a browser no less!
• Dust-Me Selectors — Scans the page against your current style sheet to determine extraneous styles.
• Server Spy — See the server technology for current page.
• Colorzilla — Awesome color picker.
• HTML Validator — Validate pages and clean them with this tool.
• IE Tab — View pages in IE inside Firefox.
• Selenium IDE — Record and playback end-user testing.
• X-Ray — Bookmarklet to examine elements in DOM.

Web Worker Applications

• Box.net — Backup your files with this tremendous tool.
• Harvest — Time tracking utility.
• Jott - Record messages from your phone and add them to various applications.
• Gliffy — MS Visio replacement for diagramming.
• Yugma - Free video conferencing.
• 101 Essential Freelancing Resources - Need more than we’ve got here?

Print Books

• Designing with Web Standards — A great introduction to web standards design by Jeffrey Zeldman.
• CSS: A Definitive Guide — Eric Meyer’s magnum opus on CSS.
• Don’t Make Me Think! — The acclaimed introduction to usability.
• Codin’ For the Web — Great book to teach application development to designers.
• Web Design in a Nutshell — Invaluable desktop reference.

Online Books

• Version Control with Subversion — Introduction to the precepts of Subversion.
• Getting Real — 37 Signals famous work on design.
• O’Reilly Library — Various O’Reilly books you can read online.
• The Elements of Typographic Style Applied to the Web

Tutorials

• W3Schools.com - XHTML, CSS, PHP, SQL, XML, etc.
• Good Tutorials - Photoshop, Flash, Illustrator, PHP, HTML, etc.
• PHP for the Absolute Beginner
• ASP.NET 2.0 Quickstart Tutorial
• Learn CSS Positioning in 10 Easy Steps

Editors

• CSS Vista = Neat CSS editor.
• PSPad — Simple, fast editor that I used for a long time.
• Aptana — Editor built on Eclipse that, I think, is the best out there.
• Microsoft Visual Web Developer — Free MS editor to create ASP.NET applications.
• SQLYog — GUI interface to MySQL.
• SQL Server Management Studio Express — The free edition of the GUI to SQL Server.

Templates

• Open Source Web Design
• Themebot — Themes for Drupal, WordPress, Joomla, and phpBB among others.
• Open Web Design
• The Open Design Community
• The CSS Tinderbox — CSS layouts.
• Little Boxes — CSS layouts.

Project Management/Version Control

• Assembla — Free TRAC/Subversion workspaces.
• TRAC — Slim, extensible SDLC tool.
• Subversion — The great open source source control.
• TortoiseSVN — GUI interface into Subversion via Windows shell.
• AnkhSVN — Browse Subversion repositories inside Visual Studio.

Testing/Validators

• UITest.com
• The Scrutinizer — SEO validators and analysis.
• Test Everything!
• Web Site Tools
• WAMP - Apache, MySQL, and PHP on Windows)

Application Comparison

• Wiki Matrix — Compare wiki applications.
• Forum Matrix — Compare forum applications.
• WebBlog Matrix — Compare blog applications.
• The CMS Matrix — Compare CMS applications.
• OpenSourceCMS — Demo various CMS’.

Web Designer Blogs/News Aggregation

• Design Float — Digg style site for designers.
• Web Developer’s Handbook — More resources then you could ever need.
• CSS Juice — CSS tips and utilities.
• Smashing Magazine — The best resource for resources.
• .net Develop - Cutting-edge articles on web technology best practices.

There are some good practices in creating these tags, and that is the premise of this short tutorial. I want to emphasize meaningful links, accessible links, and well-formed links.

Creating Meaningful Links

Wikipedia has forever changed the way we navigate. Notice that the software that runs the application (MediaWiki) does not have a full left/right navigation. There are some links, a search box, and the user is ultimately led to browse the site by following links in the content. How often have we seen a link that looks something like this?

For more information please click here.

One is left to wonder what “click here” means or where it goes. It is an awful, antiquated manner to display anchors. Instead, we should naturally content in the flow of the document. The anchors naturally show in the flow of the document that clearly shows where the anchor will take me and what the content is.

More information can be found on our product information page.

Creating Accessible Links

We also want to cater to our users who have accessibility needs. In relation to the topic above, how much would a screen reader the user with: “please click here.” We could also give it a CSS 2 aural property to set off the link with a short pause.

a {
pause: 20ms;
}

We also want to give it a title to improve the accessibility.

<a href="http://address/" title="Product Information Page">product information page</a>

Creating Well-Formed Links

The last thing is to ensure that our code aligns with the rigours of XHTML. Here is a bad example:

<em><a href="http://address/">text</em></a>

When we apply the rules of XHTML we get the following:

<em><a href="http://address/" title="title">text</a></em>

Conclusion

The anchor tag is a powerful tag that is, along with HTTP, the backbone of the user experience of the web. Creating meaningful, accessible, and well-formed anchors will do wonders to ensure that your anchors are intuitive and usable to the greatest amount of users.