VSTO 2005 enables developers to create Windows form Action Panes in Word and Excel with only 1 line of code. I will show you how to extend this technique to create an Action Pane using HTML. Why would you want to use HTML for a client side application when you have the power of Windows forms? Well besides to obvious answer of because you can, HTML gives you a quick way to create a visually rich flow layout. And in my next post I will show you how to extend this even further using CSS

Office exposes the Task Pane in ISmartDocument. This is very hard to code against, so the VSTO developers created a generic ActiveX control to be hosted on the Office Task Pane. The ActiveX control also known as the Actions Pane allows you to put any Windows form control in it, including User Controls. Here is where our solution begins. If we look at the available types of controls that ship with Visual Studio we see that there is a WebBrowser control. We can add this control to our User Control

 

  1. Create a C# or VB Word or Excel project. In this case I am going to create a VB Word Document project.
    1. File-New Project -
  2. Add a User Control to the project.
    1. Right-click on the project and select Add-New item. Select User Control from the Add new item dialog.
  3. Add a splitter control to the user control from the control toolbox on the left. Set the dock property to full to make it fill the entire user control and set the orientation to horizontal so that it splits top and bottom.
  4. Add a button control to the top panel of the splitter control.
  5. Add a WebBrowser control to the bottom splitter panel. Set the dock property to fill and scrollbars enabled to false.
  6. Add a HTML page to the project.
    1. Right-click on the project and select Add-New item. Select HTML Page from the Add new item dialog.

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>HTML Action Pane</title>

 

    <script type="text/jscript">

        function JavaScriptFunction()

        {

            alert('This is the a function in javascript')

        }

    </script>

 

</head>

<body>

    <p>HTMLPage1</p>

    <button onclick="window.external.VBFunction()">

        Call VB function</button>

</body>

</html>

  1. Wire-up the user control to the word document.

Public Class ThisDocument

 

    Private Sub ThisDocument_Startup(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Startup

        'wire up the Usercontrol to the action pane

        Me.ActionsPane.Controls.Add(New UserControl1())

    End Sub

 

    Private Sub ThisDocument_Shutdown(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Shutdown

 

    End Sub

 

End Class

  1. Wire-up the WebBrowser control to the Windows form user control.
  2. Load the webpage
  3. Wire-up the button to call the javascript function
  4. Create a function to be called from the javascript
  5. In order for the web browser control to talk to the Windows form control the Windows form control (or whatever object is set as the ObjectForScripting) must have the attribute ComVisible set to true. Here is all the code for the entire user control class

Imports System.Runtime.InteropServices

 

<ComVisible(True)> _

Public Class UserControl1

    Public Sub New()

 

        ' This call is required by the Windows Form Designer.

        InitializeComponent()

 

        ' Wire up the WebBrowser control

        WebBrowser1.ObjectForScripting = Me

 

        'Load the HTML page

        Dim strPath As String = System.IO.Path.GetDirectoryName( _

            System.Reflection.Assembly.GetExecutingAssembly().CodeBase)

        Dim htmlPath As String = strPath & "\ActionPane\HTMLPage1.htm"

        WebBrowser1.Navigate(htmlPath)

 

    End Sub

 

    Public Sub VBFunction()

        MessageBox.Show("This is the a function in VB")

    End Sub

 

    Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click

        WebBrowser1.Document.InvokeScript("JavaScriptFunction")

    End Sub

End Class