Desktop Sidebar allows users to develop panels in scripting languages such as JScript and VBScript. Such panels are composed only of plain text XML files and you can easily use any text editor to create them.

Let's start by creating very simple XML with notepad.

<?xml version="1.0" encoding="utf-8" ?> 
<plugin compatible="85" > 
</plugin>

Nothing special here. Just one "plugin" element but there is no information about your panel. To add such information you should add "info" element and then "panel" element inside. It should look like this:

<?xml version="1.0" encoding="utf-8" ?> 
<plugin compatible="85" >
 <info author="put your name here" >
  <panel class="firstPanel"
       caption="First script panel"
       icon="firstPanel.bmp"
       category="Script panels"
       categoryIcon="firstPanel.bmp"
       canvas="firstPanelCanvas"/>
 </info>
</plugin>

What do these attributes mean?
class - it is internal identifier of panel
caption - it is text displayed in "Add Panel" dialog
icon - it is path to bitmap which includes icon of panel. It should be 16x16 pixels
category - In "Add Panel" dialog panels are grouped in categories and this attribute is category of your panel
canvas - this is the most interesting attribute. Panel must have some kind of user interface. We provided ability to describe this interface in textual form in simple language similar to HTML. We call description of panel's UI "canvas"

So let's define canvas.

<canvases>
 <canvas name="firstPanelCanvas" layout="flowlayout" >
  <textoutput id="main" />
 </canvas> 
</canvases>

Canvas can use various layouts to position controls inside but we will start with the simplest - flowlayout. In this layout control are placed one by one. In our example we will have just one control - textoutput. This control can be used to display text on sidebar. Controls can have many different attributes but for start we use only one - identifier of control. We use this identifier to manipulate control from our code

Now we should add some JScript code.

<scriptpanels>
 <scriptpanel name="firstPanel" lang="JScript">
  <![CDATA[

   GetControl("main").SetText("Hello World");

  ]]>
 </scriptpanel>
</scriptpanels>

Our example is very simple. It just set text displayed by our control.

Your script can call methods of ISidebarSite interaface to have access to controls from your canvas or functionality provided by Desktop Sidebar.

One plugin file can includes many panels with many canvases so please note how panel description from beginning of file is connected with definition of canvas and with code. Panel's class is used to connect to code and canvas attribute determines which canvas is used

Now we have panel which displays Hello World on sidebar but maybe we can add some interaction. So let's connect control's event to function in code. We have to modify canvas description

<textoutput id="main" >
 <event id="click" action="onClick" />  
</textoutput>

And add handler function to code

function onClick()
{
 GetSidebar().MsgBox("Hello from event handler","First Panel",0);
}

Now we not only display Hello World on sidebar but also handles some users action.

Whole panel should look like this:

<?xml version="1.0" encoding="utf-8" ?> 
<plugin compatible="85" > 
   <info author="put your name here" >
      <panel class="firstPanel"
            caption="First script panel"
            icon="firstPanel.bmp"
            category="Script panels"
            categoryIcon="firstPanel.bmp"
            canvas="firstPanelCanvas" />
   </info>
 
   <canvases>
      <canvas name="firstPanelCanvas" layout="flowlayout" >
         <textoutput id="main" >
            <event id="click" action="onClick" />
         </textoutput>
      </canvas>
   </canvases>
 
   <scriptpanels>
      <scriptpanel name="firstPanel" lang="JScript">
         <![CDATA[
    
         function OnClick()
         {
            GetSidebar().MsgBox("Hello World","JScript Panel",0);
         }
       
         GetControl("main").SetText("Hello World");
         ]]>
      </scriptpanel>
   </scriptpanels>
 
</plugin>

In order to add this panel to sidebar please save this file with dsplugin extension in sidebar installation folder, restart sidebar and then you will be able to add "First Panel" to your sidebar

You can debug your panel with Microsoft Visual Studio.NET or with free Microsoft Script Debugger. Please just press and hold Ctrl and Shift keys when your panel is loading. Debugger should start automatically.

Files:

Sources, VBScript variant of example