Expression Web V4 Add-Ins

Commercial Add-Ins, some free are available from several vendors.

Importantly, EW V4 has an add-in model which allows developers and users to build add-ins using XML, HTML and JavaScript. This is a powerful feature which will enable a rich variety of add-ins to be created.

One long-awaited add-in from the Expression Team is the Custom Toolbar Add-In. This let you create new toolbars with your own selection of the functions you use and need most. See Anna Ulrich's blog post about this.

Note: A revised version of the Custom Toolbar Add-In is needed for xWeb V4 SP1.

For a semi-tutorial showing how a 'Bing Map' add-in was created see this post on the Expression Web Team Blog

The documentation for the Add-In Model is available on line at Expression Web SDK

There's also an 'Add-In Builder' add-in and a blog post showing how to use it.

If you need to use managed code for your add-in, this blog post will get you started.

 

I currently have the following free add-ins available on the Expression Gallery.

If this is the first time you've installed an add-in in Expression Web V4, this page will help you get started.

 

HTML5 Placeholder Add-In

HTML5 adds the 'placeholder' attribute to <input> tags, allowing you to display a watermark prompt. This can be useful for form input in small spaces, where you can still have labels for accessibility hidden outside the viewport. Most HTML5 browsers support this but if the page is viewed in an older browser, the watermark is lost.

This simple add-in adds the 'placeholder' attribute to input tags but importantly uses a JQuery 'shim' to enable browsers that don't support it to show the placeholder. Forms do not submit the placeholder data and browsers that do support 'placeholder' don't use the 'shim'.

Download the HTML5 Placeholder Add-In  (Now updated for SP2 and earlier)

 

WinPop Add-In

The WinPop add-in creates accessible pop-up windows. By accessible I mean that they can be read by screen readers and that they still work (in full browser size) when the user has JavaScript support turned off.

It has the normal options for pop-up windows and allows them to be created from text, existing links or images.

Download the WinPop Add-In

 

WordPaste Add-In

[Note: V1.5 released 23 Feb 2011. This resolves the issues raised by users to date and I'm grateful for the feedback. If you are using another version please upgrade to this new one. Uninstall the old one first via 'Tools - Add-Ins'].

A question that's often asked is "how do I paste text into Expression Web from a MS Word™ document, without bring all the proprietary html tags with it?"

The simplest way is to paste the text into NotePad first and then into EW, but this doesn't bring over any html, just plain text. The 'Paste Text' option in EW isn't much better.

This add-in pastes the text and the outline HTML, giving a very much better result. (Note that it won't paste images from a document).

It's been tested with MS Word™ 2003, 2007 and 2010.

Notes:

One thing that I've noticed is that Word doesn't always use <ul> or <ol> for lists, and sometimes uses a combination of symbol fonts and padding to achieve the same effect. At present the add-in does not handle this and you may need to add lists manually after copying.

Feedback:

Although I've tested it with a variety of document types I'm sure there will be things you'll find it won't handle, so please use the feedback link in the add-in to report these.

TIP: When you've pasted the Word content, use 'Reformat HTML' from the right-click menu in EW to tidy the html layout up.

Download the WordPaste Add-In (Now updated for SP2, and earlier)

 

AddFeed Add-In

Do you want to display a Twitter or RSS feed on your site? This V4 add-in lets you do that, with configurable display options.

The new entry on the Insert Menu launches a dialog to select the type of feed you want,

And then further dialogs allowing you to set the options.

  

It enables you to preview the feed before applying it to the page, so that the effect of displaying the various options can be seen.

This is a beta version with the limitation that it will only add one feed per page, and one feed style per site, although both of these can be overcome with a few manual changes to the web page.

Note: This add-in effectively supersedes the previous TwitterFeed.

Download the AddFeed Add-In (now updated for SP2, and earlier)

 

'Attach-JS' Add-In

Unlike Visual Studio, EW has no simple means of attaching a Javascript file to a page in the form

<script type="text/javascript" src='script.js"></script>

To attach a file in this way you have to enter the tag and details by hand.

Copyright Notice Add-In

Most web sites need a copyright notice. If the site is ASP.Net or PHP based, you can create this notice server-side and have the date automatically updated, but if it's an HTML site you may just have a static notice that needs updating every year. And how many sites do you see with an out-of-date notice? Lots of them!

This add-in creates a JavaScript based copyright notice that always updates to the current year and also creates a static notice, without the year, for the very small percentage of users that don't have JavaScript enabled.

A new entry is created in the "Insert" menu to use the add-in.

Clicking the entry brings up the following dialog:

Be aware that the copyright text will not show in EW's design view, only in a browser, because it's generated by JavaScript.

The <div> that is created has an ID of "ewCopy" which can be used to style the Copyright Notice; perhaps to give it a small font size, or different colour.

Download the Copyright Notice Add-In

 

Code Comment Add-In

Unlike Visual Studio, Expression Web has never had any facility for commenting out code. I previously created some Snippets to do this (available in the Expression Gallery), but they only allow us to comment something out, not reverse the process and remove the comment.

This add-in goes a long way to providing full commenting functionality, with a few caveats described below.

Once installed the add-in provides three new icons on the "Standard" toolbar, shown below. You may need to use "View - Toolbars" to enable this toolbar if you don't already use it.

The new buttons give the correct comment types for the relevant code types, and in the case of JavaScript and PHP, selects the correct comment for single lines and blocks of code. Having applied a comment to some text, selecting the complete comment, including the comment tags, and clicking the appropriate button will remove the comment tags.

The caveats are:

1. It only works in Code View, not Design View OR either pane of Split View and gives a warning to this effect if you try.
2. It doesn't yet work on .css or .js pages, although I hope to be able to update it to do this in the near future.
3. Although it will automatically use the correct comment tags for HTML and ASPX, it doesn't stop you using the wrong tags for a a block of code. Hopefully I can address this in a later version.

Once these caveats are recognised, it provides very useful additional features for Expression Web.

Note: This add-in is NOT required for xWeb V4 SP2, which now has commenting/uncommenting facilities, using Ctrl-J.

Download the Code Comment Add-In

 

Sub / Sup Text Add-In

If you frequently need to add <sub> or <sup> tags to your page content, you may miss the ability to do that from a toolbar in Expression Web V4 (or V3). The add-in restores this functionality by putting two new buttons on the "Standard" toolbar. You may need to use "View - Toolbars" to enable this toolbar if you don't already use it.

Select text in either Design, Split or Code view and click the icon to create the <sub> or <sup> text. Select the same text and click again to return the text to normal case.

The selection of text needs to be accurate and undoing the action may fail if the selection is not exactly on the relevant text.

Download the Sup/Sup Text Add-in