Here are some examples to cover the basic AngularJS customization use cases.


Here you can find examples that use JavaScript/AngularJS, CSS, and images to customize the UI.

The examples provide the location of the jar file that you can download and alter it to your specific use case. Also, you can use the jar file as-is in your test/stage TeamForge instance to see it in action.

You can disable the customization by disabling the custom event handler.


Before you begin:

  1. Identify the URL of the page that you want to customize.
    • If the URL starts with <host>/ctf/..., then you need the ctf module.
    • If the URL starts with <host>/sf/..., then you need the saturn module.
  2. For JSP pages, as you are targetting a specific page for customization, make sure you put the safety net around your js customization code.

     var ctfModule = angular.module('saturn');
['browserService', 'customizationService', 
       function (browserService, customizationService){
         if (browserService.getLocationContainsAction('STRING_WITH_PART_OF_THE_URL_WE_WANT_TO_CUSTOMIZE')) {
           // Your actual customization code goes here

Customization Example—Customize Images

This example illustrates how to replace an image and a small bit of CSS (to do the replacement). Click here to download the customization jar file.

Customization Example—JavaScript Alert

This example illustrates:

  • the way to include custom JavaScript.
  • that the custom JavaScript runs at the end.
  • that custom JavaScript runs on every page.

As the custom JavaScript runs on every page, you need to safeguard it to execute only on the page you intend to customize.

The customization jar can be found here.

Customization Example—AngularJS Availability Check

This example checks if the AngularJS is available and prints a message in the browser console. A nomral message if the AngularJS is enabled. If not, an error.

The customization jar can be found here.

Customization Example—Remove a Button in a Full AngularJS Page

This example illustrates:

  • how to hook into angular in a full AngularJS page.
  • how to use safety check to do customization only on the page we intend.
  • how to remove the Delete button from the Project > Reports page.

The customization jar can be found here.