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.

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

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

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

 

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

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

 

'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"/>

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

This Add-In adds a new item to the 'Insert' menu which allows you to select a javascript file and then creates the tag for you. If the selected file is outside the current web, it copies the file to the web once it's been selected.

Download the Attach-JS Add-In

 

'Close All' Add-In

This simple add-in allows you to close all open pages in EW with one click. It puts the following icon on both the Standard and Common toolbars

As you'd expect, it gives the normal dialog asking whether you want to save any pages that have unsaved changes.

Download the Close-All Add-In

 

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:

Two things to be aware of: (both noted on the 'Using' link shown above)

1) The copyright text will not show in EW's design view, only in a browser, because it's generated by JavaScript.

2) If the copyright notice is placed in existing tags OTHER than a <div>, these will be removed and replaced with the new <div> containing the notice. The easiest ways to use it are therefore: a) create a footer <div> and insert the copyright notice there, or b) create a new paragraph (line) and insert the copyright notice which will then replace it.

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.

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