Welcome, guest ( Login )

» Home (JDC Blog)
» Forums

Page Tags

None yet -- tag this page

Search Tags:
WikiHome » JotDoc » JotPluginQuickstart

JotPluginQuickstart

Version 5, changed by admin. 10/27/2006.   Show version history

JotSpot Developer Documentation

Plugin Documentation

Plugins are easy to make. Skim how, then build your first one in about 180 seconds.



Introduction

Plugins are wiki pages that insert content into the XHTML markup of every page generated by JotSpot. You can use plugins to insert markup, Javascript, or CSS into the pages on your site. Plugins are really easy to create. They are kept in standard Wiki pages that live under /System/Plugins.


What Kind of Code Can I use in my Plugin?

Any standard code understood by JotSpot can be used in your plugin. This includes XHTML, JotScript, CSS, and both client-side and server-side.

Note that since your plugin must be edited in XML mode, please pay attention and properly wrap your Javascript code with the correct <script> tag.


Where Will my Plugin Code Show Up?

Extension points are used to place your plugin's code and UI elements (e.g. links, images, buttons, etc.) within a JotSpot page. Any code wrapped in a extension point will appear in that location within the page's HTML document.

For example, this code inserts two links into the Jot UI -- one at the top of the toolbar, and one in the footer: 


<html xmlns="http://www.w3.org/1999/xhtml" xmlns:jot="http://www.foopee.com/ns/s3/srvtmpl/">
<jot:extension target="sidebarTop">
<a href="wiki:ProjectHome">Project Home Page</a>
</jot:extension>

<jot:extension target="footer">
<a href="http://www.google.com">Go to Google</a>
</jot:extension>
</html>


Available Extension Points

The table below lists the available extension points. To get an idea where these extension points insert your code, view the map and then check out the plugin code that generated the map.

Insertion Point Location
head inside the <head> of the page
footerin the #jot-footer div, right above the #pageFooter div
sidebarTop top of the sidebar/toolbar
sidebarBottom bottom of the sidebar/toolbar
bodyStart just after opening body tag
beforeContent start of the body's main content section
afterContent end of the body's main content section
bodyEnd just before closing body tag


Create Your First Plugin -- It'll Take 180 Seconds!

This plugin adds a big "Click Me" button to the footer that pops an message window when pressed like so:

Here's How

1) As admin, go to /System/Plugins, enter a plugin name, and click the "Create Plugin" button.

Note for 2.7 wikis:
For 2.7 wikis, the instructions above won't work. Instead please do the following:

  1. Assuming you want to create a plugin called "TestPlugin"
  2. Use this URL: http://yourjotsite.jot.com/System/Plugins/TestPlugin?create=1&parent=%2FSystem%2FPlugins

2) Copy and paste the code below into the Plugin Contents field on the plugin form. This particular code adds a large button to the footer of every page that pops up a javascript alert window when pressed.


Plugin Contents Code 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:jot="http://www.foopee.com/ns/s3/srvtmpl/">
  <jot:extension target="head">
    <script type="text/javascript">
       function myFunc() {
          alert('${page/name}');
       }
    </script>
    <style type="text/css">
       .bigButton {
          font-size: 200%;
       }
    </style>
  </jot:extension>

  <jot:extension target="footer">
    <button class="bigButton" onclick="myFunc();">Click Me</button>
  </jot:extension>
</html>

3) The last step is to scroll to the very bottom of the page and check the Make this plugin active by default after installation box. Plugins can be turned on or off by editing the /System/Plugins page and checking the plugin's active box. By checking active by default on this page, we're forcing the plugin to be immediately active.


What's Going on Here

This plugin targets two extension points: head and footer. It inserts custom javascript and CSS into the HTML <head> of each page, and then inserts a button into the footer, which uses the CSS and javascript to define its look and behavior.

Bonus: Let Users Configure your Plugin

By using the User-level options feature of each plugin, you can extend the users preferences page with options of your choosing. You pick the form elements you need for configuration, and then reference them in your plugin code.

For example, adding this code to our plugin's User-level Options code box adds a checkbox titled "Click me Plugin" in each users' preferences page: 

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:jot="http://www.foopee.com/ns/s3/srvtmpl/">
  <tr>
    <td>Click Me Plugin:</td>
    <td>
      <jot:input name="clickme" selectOptions="On,Off" />
    </td>
  </tr>
</html>

and then this if statement can then be used in the Plugin Contents code itself to toggle the display of the click me button: 

...
<jot:if test="${req/user/userinfo/clickme = 'On'}">
  <jot:then>
    <jot:extension target="footer">
      <button class="bigButton" onclick="myFunc();">Click Me</button>
    </jot:extension>
  </jot:then>
</jot:if>
...

Attachments (4)

  File By Size Attached Ver.
clickMePlugin.png ScottMcmullan 38K 09/09/2005 1 Delete attachment
extensionPointMap-annotated-small.png ScottMcmullan 39K 09/12/2006 2 Delete attachment
extensionPointMap-annotated.png ScottMcmullan 155K 09/12/2006 2 Delete attachment
PluginExtensionPointMapCode.txt ScottMcmullan 1K 09/12/2006 2 Delete attachment