How to create an HTML based add-in that docks inside Deltek Open Plan.

Following on from our previous article Getting Started with Open Plan Add-ins, here's another handy tip to get started on dockable, HTML/JavaScript based add-ins for Open Plan.

Open Plan has numerous sample add-ins to help any budding solution developer get started using Open Plan's OLE libraries. These samples can be found in the software root installation folder C:\Program Files (x86)\Deltek\Open Plan Professional 8.5\Sample Tools

Now a full disclaimer here for those more advanced programming experts! Yes of course there are certianly more ways of coding a solution using newer JavaScript functions and libraries. The intent of this article is to demonstrate how the Sample Tools (provided with Open Plan) are designed to work.

Addins.dat

Like we did previously, we need to create a button for Open Plan so that a user can click the button and activate the plug in. The difference this time is that we want a dockable Web Window to be provided to the user.

This can be achieved by inserting the following command line in the Addins.dat file:

; My Stuff
Tool12=My Stuff:Hello World;C:\Users\Home\Downloads\HelloWorld.html?DOCKSIDE=BOTTOM&DOCKLENGTH=310 %D %P; "%SYSTEMDIR%\Sample Tools\Cobra.ico;0 "

Here we use the Parameter %D to tell Open Plan that our HTML web page needs to be a web window and docked.

The Open Plan Developer's guide outlines the various parameters that can be used in the Addins.dat file. Note that two additional parameters are passed to our HTML script via our URL. DOCKSIDE and DOCKLENGTH are used to tell Open Plan how to position the web window within the application.

As an additional command to Open Plan in this example, we are borrowing an icon from the Open Plan installation directory. 

On saving and reloading the Add-ins we are provided with a new Menu item:

ribbon2

Our HTML Code

The Sample Tools provide some very robust examples of how to create a HTML script inside a Web Window in Open Plan. For the simplicity of demonstration however, we will condense the example down.

The sample file named GenericLib.js is provided with the Open Plan sample tools. This Javascript library uses three key functions that are used to examine the Query String passed to the tool and extract the parameters passed through.

Our HelloWorld.html file consists of the following code:

code2

When the HTML page is loaded, several key things happen:

  1. The page is loaded and the variable strPrjID is created.
  2. The SetInfoFromQueryString() function is called, which uses the GetQueryString() function to split the Query String into its components
  3. The GetValueInQueryString() function is also then called to set the variables

Because the Project ID is passed (as %P in our Addins.dat command) the Javascript functions will convert the overall URL passed to the Tool into something useable later on.

Happy Coding!

Find out how GBA Projects can help your project perform.

Contact us.

Clients

  • 01-santos-logo.jpg
  • 02-bhp-logo-new.jpg
  • 03-hansen-logo.jpg
  • 04-sydney-water.jpg
  • 05-beach-energy.jpg
  • 05-kbr-logo.jpg
  • 06-aurecon-logo.jpg
  • 08-riot-tinto-logo.jpg
  • 09-sa-govt-logo.jpg
  • 10-spotless-logo.jpg
  • 11-built-environs-logo.jpg
  • 12-dyno-logo.jpg
  • 13-sa-power-logo.jpg
  • 14-incitec-logo.jpg
  • 15-electranet-logo.jpg