Customizing the Roadmap

Starting in CaseComplete 2012 R2 you can customize the contents of the Roadmap tab. You do this by configuring it to display your own HTML file or retrieve content from a URL.

You can use any HTML document for your roadmap, but it may be easier to use the default roadmap as your starting point, especially if you just want to make small changes. First, copy the several files and folders shown below from the Html\Roadmap folder found in CaseComplete's installation folder1. Paste them into a new folder of your choice. Your custom roadmap folder should look like this:

new files

At this point you can edit the Roadmap.htm file to make your customizations. The roadmap uses CSS and jQuery, so depending on the extent of your changes, you may also need to modify the Roadmap.css and Roadmap.js files as well.

To add a new popup definition, add it to the Roadmap.js file in the getPopoverContent() function. Then reference it in the html file by creating an anchor tag of the form:

<a class="definition" title="Popup Title" data-id="IDFromjsFile">My Definition</a>

If you want to reference new images, you can place them in the Images folder, or create a new folder to keep your images separate from the default images.

You shouldn't need to modify any of the other files and folders shown. Detailed instructions on how to make specific changes is beyond the scope of this article, but if you have experience with HTML, CSS and JavaScript it shouldn't be too hard to make changes within the existing framework.

Once you've completed your changes, place your roadmap folder on a shared drive if it's not already. Then in CaseComplete, open a project that you'd like the new roadmap associated with, and select Tools / Roadmap:


In the resulting dialog, enter the location of your custom html file. The path you supply will be saved to the current project. If it's a shared project, you'll be prompted to check out the main project file if it's not already checked out. Since the location is saved in the project file itself, all team members will see the same roadmap after you check in your changes and they run the Get Latest command. Because the roadmap is saved on a per project basis, it gives you the flexibility to use different roadmaps for different project types and project teams, but it also means you'll have to set the roadmap location for each new project you create.

As an alternative to placing the roadmap on a shared drive, you may install it on an internal web server and access it with http. In fact, you can enter any URL for the roadmap location, for example you could set it to show an internal company home page, project dashboard, or even an external website.

After you've customized your Roadmap, feel free to let us know what you've done! We always like to hear about the ways our customers use CaseComplete.

1 The files you need to copy are in your Program Files folder. By default, on a 64-bit operating system, that location is: C:\Program Files (x86)\Serlio Software\CaseComplete <version>\Html\Roadmap

For versions prior to CC2015 a slightly different set of files is needed, and are located in the Html folder (there's no Roadmap sub-folder):


Have more questions? Submit a request
Was this article helpful?
0 out of 0 found this helpful


Powered by Zendesk