Gantter Extensions – Getting Started
Gantter now provides 3rd party developers the ability to extend the functionality of Gantter by building externally hosted extensions. There are three types of extensions currently supported. The first type, which will be referred to as UI-Less Extension, can be used to change the existing project data. The second type, which will be referred to as Popup Extension, sends the data to a 3rd party app and opens that app in a new browser window. The last type is referred to as a Template Extension.
All types of extensions can be added and managed in the same manner. Users can add extensions by selecting the âExtensionsâ Menu, then selecting the âManage Extensions…â menu option. The user then needs to type the URL to the extensionâs manifest. To make this process even easier, developers of extensions can create a very simple âAdd Gantter Extensionâ link on their own web page which will allow the end user to add the extension without typing the URL. Extensions can also be made âpublicâ. These extensions will automatically show up for all other Gantter.com users via the Public Extensions menu option.
In all types of extensions, the userâs project data will be sent to the 3rd party application. Since the end user might want to keep their project data private, we will display a security warning to the user to inform them that they are about to send their data to another application. The user can choose to not show the warning in the future.
In the case of the UI-Less Extension, the project data is submitted to the 3rd party extension, changed, then reloaded in the Gantter.com UI. These extensions are great when you want to create an extension which will add, edit, delete, or create new tasks or resources.
Template Extensions are a special type of UI-Less Extension that allows for individuals to create custom starting templates. These Extensions will show up in the New From Template dialog.
In the case of the Popup Extension, the project data is submitted to the 3rd party extension in a new browser window. The 3rd party extension can display any UI to the user. The developer can also send the data back to Gantter after the user interacts with it. These extensions are great for creating custom reports and analysis. It is also ideal for integration with other apps.
In order to build an extension, you must first create an extension manifest file. The manifest file is a simple json formated text file which describes your app in a way that Gantter.com can consume it. Here is a sample manifest file:
‘name’: ‘Sample Extension’,
You can save this file on your webserver with any name. We recommend using .json for the file extension.
|name||The name of the extension as it will appear in the extensions menu, manage extension dialog and security dialogs.|
|postURL||The URL the project data will be submitted to.|
|authorName||The name of the user or company who built the extension. Will be displayed in the manage extensions dialog and security dialog.|
|moreInfoURL||The URL for more information on the extension. This link will appear on the manage extensions dialog and and security dialog.|
|type||Defines the type of gantter extension. Possible values:
|iconURL||URL to the image for this extension. The icon should be a 16×16 png file. The image will be used in the Extensions menu and in the security dialog.|
|private||(optional) Set value to âtrueâ if you do not wish this extension to be made available for other Gantter users to discover. When the extension is private, only users with the URL to the manifest may install the extension.|
|language||(optional) The two digit language code for the extension. If omitted, âenâ (English) will be assumed. Only extensions in the currently running language will be visible in the public extension lists.|
After building your manifest file, you will need to implement the postURL application page. This page will be called via an HTTP POST request. The following FORM variables will be available in the post:
|projectXML||The current project XML. Gantter stores projects in the Project XML Data Interchange format: http://msdn.microsoft.com/en-us/library/bb968733.aspx|
|The current userâs email address.|
|currentWorkspace||The current UI area the user is working in. This can be used to provide context specific manipulations. Valid values for this will be âTasksâ, âResourcesâ, âCalendarsâ|
|selectedItems||Comma separated list of ids for items the user currently has selected. Can be used for context specific manipulations.|
UI-Less Extensions require that the response to the HTTP Post be the updated Project XML. The new XML will be reloaded in the browser.
Popup Extensions can send data back to Gantter.com by creating a HTML form and setting the action to: https://app.gantter.com/UpdateXML.aspx. In the form, have one form variable named âprojectXMLâ and set the value of this variable to the newly updated XML. Upon submit, the form popup browser window (or tab depending on browser) will close and Gantter.com will update.
Installing your extension
There are three ways a user can install extensions. The first way is manually by opening the Manage Extensions dialog in Gantter and typing the URL to the manifest file. The second way is to use the Public Extensions menu dialog. The third way is to provide a specially formatted URL for the user to click. The format of the URL is:
*Note – Be sure to URL encode the urlToExtensionManifest. (See http://meyerweb.com/eric/tools/dencoder/ for more info).
We recommend using the following HTML code snippet:
<a href=âhttps://app.gantter.com/?extensionUrl=[urlToExtensionManifest]â title=âAdd Extensionâ><img src=âhttps://app.gantter.com/images/addExtension.pngâ/></a>
This will create an image button the end user can click to add your extension to Gantter.
We have created two sample extensions for you to try. Both have been made Open Source via GITHUB so that you can clone or fork the code. We encourage the community to continue building upon this model.
Sample 1: UI-Less Extension
This sample demonstrates changing the project data. The data is submitted via HTTP POST to the uiless.php code file. The project XML is read from the server POST variable. Using phpâs SimpleXML parser, the data is read and updated. In this simple sample, the title of the project is updated. The php code then returns the updated XML back to Gantter by simply sending the xml as the response.
Sample 2: Popup Extension
This sample demonstrates displaying information about the current project in a new window. The data is submitted via HTTP POST to the ui.php code file. The code reads the post variables and displays the values back to the user.
Sample 3: Using Extensions to publish custom templates
This sample illustrates using a Template extension as a way to publish a new project template. Simply create a Gantter project and save the file locally. In the extension manifest, set postURL to the URL where the gantter file is saved. When the user selects the extension from the menu, the template will load. This requires no programming knowledge.
Use the Gantter.com community forum to direct any developer related questions. We are there to help.