Changing the SmallSearchInputBox delegate control

A colleague of mine was wanting to make some changes to the SmallSearchInputBox delegate control in SharePoint 2007. That’s the control that appears on most pages, looking like:

This control is a ‘Delegate control’ – that is, you can create features to override the currently used control. What my colleague wanted to do was not display the ‘Scope’ drop down list, the Advanced Search link, and to include prompt text (something like ‘Enter Search…’). A quick dig into the FEATURES folder in 12 Hive showed that the control had a number of properties.
(The features that this information applies to are the OSearchBasicFeature and OSearchEnhancedFeature. Both contain files called ‘SearchArea.xml’, and that contains the code below. I found the folders with this in:
%12 Hive%\Template\Features\OSearchBasicFeature
%12 Hive%\Template\Features\OSearchEnhancedFeature )

/_layouts/images/gosearch.gif
/_layouts/images/goRTL.gif
/_layouts/images/gosearch.gif
/_layouts/images/goRTL.gif
true
None
true

This shows a property ShowAdvancedSearch which sounded pretty promising for turning off the Advanced Search link. We decided to see what other properties were available, and found a good article by Clint Cherry about the SmallSearchInputBox control, and the MSDN docs. The Property tags in the XML for the delegate control set the properties of the web control class – e.g. GoImageUrl matches the GoImageUrl property on the class. Much to our pleasure, we found the QueryPromptString displays text in the search control which vanishes when it receives focus, and the DropDownMode property allows us to turn off the scope dropdown list. Hurrah!
For the values that you can set the drop down mode to, see the MSDN docs again

Advertisements

SharePoint Content type not found in web application site collection

We have a new portal server installation that is working fine except for one strange error. We created our new site using the “Publishing Site” template and also created subsites below it. All that went fine. However, if we try to create a new page (“Create Page” command from the “Site Actions” Menu) from any of these sites we get this error:

Content type
‘0x01010007FF3E057FA8AB4AA42FCB67B453FFC100E214EEE741181F4E9F7ACC43278EE811’
not found in web

To solve this:

Go to Site Central Admin, User Permissions for Web Application and be sure “Use Client Integration Features” and “Use Remote Interfaces” are enabled. That should do it.

How to implement an InfoPath 2007 clear button

Creating a clear button is quite straight forward in InfoPath. Basically you have to set up a rule to clear the content from each field on the form. This can be done with the following steps:

Add a button to your Form, call it ‘Clear’
Add a rule to the button
Do not set a condition to the rule
Add an action to set each field value to be blank / empty
Click OK, done.

HTML COLSPAN and ROWSPAN table settings

Table cells can span across more than one column or row. The attributes COLSPAN (“how many across”) and ROWSPAN (“how many down”) indicate how many columns or rows a cell should take up.

For example, we might want to create header cells for each department in our table of names and phone numbers. In this table, the header cells in the first and fifth rows span across two columns to indicate the department for each group of names.










Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

which gives us:

Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

It often happens with multiple-column cells that a little color helps to set off the headers, giving the table a more visually organized look. Let’s add some color to the headers using BGCOLOR.










Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

which gives this table:

Production
Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales
Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

ROWSPAN sets how many rows a cell spans. ROWSPAN can get a little confusing because it requires you to think through how the cell affects the rows after the row it starts in. It’s particularly useful in this situation to add borders to the table during the design process, even if the table won’t ultimately use borders.

This table code creates two header cells which span three rows each:






















Production Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

which creates

Production Raha Mutisya 1493
Shalom Buraka 3829
Brandy Davis 0283
Sales Claire Horne 4827
Bruce Eckel 7246
Danny Zeman 5689

Note that in the two rows after each header, the first cell in the row ends up in the second column because the first column is taken up by the multi-column cell.

Javascript nifty corners example script

body{padding: 20px;background-color: #FFF;
font: 100.01% “Trebuchet MS”,Verdana,Arial,sans-serif}
h1,h2,p{margin: 0 10px}
h1{font-size: 250%;color: #FFF}
h2{font-size: 200%;color: #f0f0f0}
p{padding-bottom:1em}
h2{padding-top: 0.3em}
div#nifty{ margin: 0 10%;background: #9BD1FA}

b.rtop, b.rbottom{display:block;background: #FFF}
b.rtop b, b.rbottom b{display:block;height: 1px;
overflow: hidden; background: #9BD1FA}
b.r1{margin: 0 5px}
b.r2{margin: 0 3px}
b.r3{margin: 0 2px}
b.rtop b.r4, b.rbottom b.r4{margin: 0 1px;height: 2px}

Nifty Corners

Debugbar.com – a great web development tool for Internet Explorer

As most Firefox-savvy web developers know, nothing quite beats the Web Developer Toolbar (WDT) extension. As if you didn’t already have enough good reasons to develop in Firefox instead of IE, the WDT gives you so much control that after using it, development in IE feels like building a house of cards in the dark. Even Microsoft recognized the advantage that WDT gave Firefox over IE, and developed their own version, called Developer Toolbar (DevToolbar). Isn’t that a clever name? DevToolbar, currently in beta 2, shares many of the same features of WDT but lacks overall polish and really feels like a beta. And Microsoft doesn’t seem to be in any hurry to finish it, either. It’s been in beta for a long time.

Recently I was pointed towards DebugBar, an IE addon that is the closest I’ve seen to providing developers a real impetus for using IE for development again. It combines features from three of my favorite Firefox extensions: Web Developer Toolbar, Firebug, and ColorZilla, as well as a few others like ScreenGrab, Live HTTP Headers, cookie viewers, source code viewers, and a couple of bookmarklets I use frequently such as Javascript Shell and RenderMode. It’s quite the toolbox.

The specific feature that I installed DebugBar to check out was the source code viewer, which conveniently shows both original source and interpreted (post-javascript) source. Even more conveniently, it also includes an inline as-you-type search mechanism, which I recently griped about not having in IE. Other features I liked finding were a drag-to-target DOM explorer, color picker, window resizer, screenshot taker, javascript console, and built-in validation. There is also a summary page that includes useful information like which rendering mode IE is using.

Another interesting feature is the ability to ’spy’ on other instances of IE. This doesn’t sound very useful at first — why not just use DebugBar in that IE window? Well, Windows applications frequently use the IE rendering engine in an ActiveX control within their own application, such as Outlook when rendering HTML formatted emails. The real benefit of the ’spy’ feature is that it can also peer into these instances. I can see how this would be a major benefit for developers working on HTML newsletters.

And finally, perhaps the most useful feature is the ability to do live editing of tag attributes and CSS styles. The tag editing isn’t quite a replacement for Opera’s Reload From Cache feature, since you can’t arbitrarily edit the HTML, but the tag editing and the CSS editing are both very solid features and will be very useful for developers.

Unfortunately, it’s not without problems. I’ve run DebugBar in IE6 on Win2k, and IE7 on WinXP. I’ve not run into any problems on IE6, but had severe stability issues with IE7. One thing I was specifically trying to test was whether or not the color picker could grab colors from Flash movies — something ColorZilla cannot do. So I curiously typed in the url for a site I developed recently that had a Flash header animation. My curiosity quickly switched to frustration though, as IE7 completely disappeared as soon as it started loading the page. In fact, IE didn’t just crash, it died. It couldn’t even restart without crashing, which also meant I had no way of disabling the DebugBar plugin. The only thing I could do was uninstall DebugBar. I reinstalled and uninstalled it a few more times to test the instability, but never got very far. Even if I had no errors during my browsing session, closing IE and restarting it would yield the same results. If you can remember to disable the DebugDev toolbar before closing IE every time, you might be able to avoid the constant crashing for a while, but who would (reliably) go through that much trouble? Since I haven’t had any instability in IE6 I’m just going to chalk this up to IE7. Hopefully DebugBar will have an update out soon.

As for the colorpicker test, I tried again in IE6/Win2k and DebugBar had no problem grabbing the color from flash movies! And it even automatically copied the Hex to the clipboard. Unfortunately it automatically includes the # mark with the hex value. This is useful for editing CSS code, but if you tried pasting it into the Photoshop color chooser’s hex field you would only get the first five numbers, since that field only accepts six characters and assumes you are omitting the #. One of the things I like about ColorZilla is that you can choose to copy just the hex, or the hex + the # mark. Another thing I like about ColorZilla is the “resample last location” function, which is useful for grabbing colors from things like link text or rollover images that might have a different color when the mouse is over the element. Unfortunately DebugBar doesn’t have an equivalent feature, which amounts to not being able to pick the color of a rollover state.

Another red flag I found was that the standard hotkey for opening the DebugBar sidebar was Alt-D. Honestly, this was a terrible decision. Alt-D is my #1 most used hotkey in any browser, because that’s the hotkey that focuses the address bar and lets me type in my next destination’s location. I would assume that the same goes for most developers, since we belong to the power-user crowd and are more likely to use keyboard shortcuts than most. Obviously, DebugBar also targets the power-user crowd, so they should be particularly careful about overwriting any standard keyboard shortcuts. The fact that they chose to overwrite the most important Alt- shortcut (in my opinion) is a monumental oversight. Fortunately, you can change this to another key. The only drawback is that it requires you to restart IE before it takes effect — so you can imagine how far I got with that in IE7….

And finally, since I am ultimately presenting DebugBar as an IE equivalent to free Firefox extensions, I really can’t avoid one final drawback — cost. DebugBar is free for personal use. But if you are a professional developer — which must be the majority of their target demographic — it will run you 59 Euro, or about $75 US for a single user license, with other options available for teams or corporations.

Now I just want to go on record saying that I’m not going to blame anybody for wanting to get paid for their efforts. (I’ve developed and sold an IE plugin myself.) On one hand, this is an impressive collection of tools. If you’re an IE developer it’s probably worth a license. But it won’t convert many Firefox developers, who are used to getting all of their extensions for free.

Verdict: If you already develop in IE, or are an HTML email developer, or even an application developer that uses IE ActiveX controls, then if you use IE6 this is highly recommended. If you already use IE7, give it a try and see if you have stability problems on your system, and maybe wait for the next version. Even if you’re a Firefox developer, then I still recommend trying it out. It will help iron out all those IE bugs that come up during development, but it’s probably not enough to make you want to drop Firefox or justify the cost.