Easily create an Add-in for Expression Web 4 with the Add-in Builder

With today's launch of Expression Web 4, we’ve made extending Expression Web’s functionality easier than ever.  Developers can create Add-ins for Expression Web by using HTML, JavaScript and CSS standards they already know!  We have also simplified integrating your Add-ins into Expression Web’s Panel and menu system using XML.  In order to make it even easier, we are providing an Add-in on the Expression Community site that makes it super simple to build other Add-ins. It’s a classic Chicken or the Egg problem solved with the “Add-in Builder”. Click here to download the Add-in Builder. Once you have downloaded it, you can install it within Expression Web 4 directly via the Tools -> Add-ins menu! Click the Install button and choose the .xadd file you just downloaded.

Before we get started building an Add-in with the Add-in Builder let's take a look at the exact XML used in order to integrate the Add-in Builder itself into Expression Web 4.  It’s pretty simple and very straightforward.

<addin legacy="yes" developer="yes">

<name>Add-in Builder</name>

<load type="AddinUtilities.Utilities, AddinUtilities" name="addinUtils"/>

<description>Chicken or the Egg?</description>

<command id="AddinBuilderCommand"

           onclick="xweb.application.showModalDialog('AddinBuilderTestPage.html',

           'Add-in Builder','dialogHeight:500;dialogWidth:700;resize:yes')">

         <menuitem parent="MENU_Tools" before="MENU_Tools_AddIns" label="Add-in Builder..."/>

</command>

</addin>

As simple as it is, learning and authoring new XML syntax can be time consuming and is largely based on trial-and-error. The Add-in builder provides a user-friendly interface that makes it simple to generate the XML and all the associated content files. In addition, the add-in you define is created in the correct location and a site is created for you inside of Expression Web 4 for you.  Why is that cool? Simple, once your add-in is generated you can live edit it just like any other site!

We’ve cleared all of the hurdles for you and now as a Web Developer you can focus on building the HTML, CSS and JavaScript inside of an Expression Web panel or dialog to build powerful new functionality instead of how to integrate your ideas into Expression Web itself.

1. If you haven't downloaded the Add-in already you can download the Add-in Builder from here. Install the .xadd file in Expression Web 4 via the Tools -> Add-ins menu. Click the Install button and choose the .xadd file you just downloaded.

2.Once you have installed the Add-in Builder add-in you can access it in Expression Web 4 via Tools > Add-in Builder.

3.The first step is to describe your add-in, including name, description, homepage, and version. (I'll publish another post in the near future to describe the other more advanced options in this dialog.)

 

4. To create a panel for your add-in, click Add Panel. Name, Source, and ID are required fields.

 

5. Click Insert, and then click Create Add-in. That’s it; it’s that easy to create your own Add-ins.

After the Add-in is created,  a new site appears in Expression Web 4, with your Addin.xml file and an empty html file (the content of the panel you just defined!).

 

At this point, restart Expression Web 4. Upon restarting, the Add-in panel (or, if you selected, a dialog or assembly) will automatically be installed and available for use.

7. If you created an Add-in panel, go to the Panels menu and click the name you gave for your panel.

 

A panel hosting the empty html page opens.

 

The panel can be docked, moved, pinned, etc… within the Expression Web 4 application just like any other default panel!

8.Open panel.html from the site Expression Web created for your Add-in. Add <h1>Hello World</h1> to the page and save it.

9.Right click inside your open “My First Panel” tab and choose Refresh. You should be able to immediately see the HTML you added rendered in your panel!

Marc Kapke, Software Development Engineer in Test