Custom Lane Headers

Custom Lane headers mashup allows to change the information shown in row headers of Boards and Roadmaps.
The mashup can be applied to one particular view or to all the views where a specified entity type is selected in Rows.

The API which allows to add units to all the boards and roadmaps which have one of the provided entity types selected as Horizontal Lanes:
customizeApi.registerDefaultAxisHeaderLayout(entityTypes, layout)

The API which adds units to the board or roadmap with the provided ID only:
customizeApi.registerViewAxisHeaderLayout(viewId, entityTypes, layout)

How to compose Custom Lane Headers mashup

Install the mashup from Settings > Mashups > Mashup Library.
The following dependencies are added in the mashup by default:

tau.mashups
    .addDependency('tau/api/board/v1/customize')
    .addDependency('tau/const/entityType.names')
    .addMashup(function(customizeApi, entityTypes){

        // Insert your code here
    });

If you want to add one of the existing units to the lane headers, you can register such unit right away:

customizeApi.registerDefaultAxisHeaderLayout([entityTypes.PORTFOLIO_EPIC, entityTypes.EPIC, entityTypes.FEATURE], {
  sections: [
    {
      units: [
        { id: 'milestone_flag_name' }, //Milestone Name
        { id: 'release_long' }, //Release Name
        { id: 'planned_dates_long' } //Planned Start and End Dates
      ]
    }
  ]
});
531

Before applying Custom Lane Headers

538

After applying Custom Lane Headers

The entire mashup code will look like:

tau.mashups
    .addDependency('tau/api/board/v1/customize')
    .addDependency('tau/const/entityType.names')
    .addMashup(function(customizeApi, entityTypes){

        // This will add full Milstone Name, Release Name and Planned Dates to all boards and roadmaps
        // Where Portfolio Epic, Epic or Feature are selected as Horizontal Lanes
        customizeApi.registerDefaultAxisHeaderLayout([entityTypes.PORTFOLIO_EPIC, entityTypes.EPIC, entityTypes.FEATURE], {
            sections: [
                {
                    units: [
                        {id: 'milestone_flag_name'}, //Milestone Name
                        {id: 'release_long'}, //Release Name
                        {id: 'planned_dates_long'} //Planned Start and End Dates
                    ]
                }
            ]
        });
    });

Available Entity Types

Targetprocess EntityType in the mashup
User StoryentityTypes.STORY
TaskentityTypes.TASK
BugentityTypes.BUG
FeatureentityTypes.FEATURE
EpicentityTypes.EPIC
PortfolioEpicentityTypes.PORTFOLIO_EPIC
RequestentityTypes.REQUEST
RequesterentityTypes.REQUESTER
ProjectentityTypes.PROJECT
TeamentityTypes.RESPONSIBLE_TEAM
entityTypes.TEAM
ProgramentityTypes.PROGRAM
ReleaseentityTypes.RELEASE
Iteration (Sprint)entityTypes.ITERATION
Team Iteration (Team Sprint)entityTypes.TEAM_ITERATION
BuildentityTypes.BUILD
Test PlanentityTypes.TEST_PLAN
Test Plan RunentityTypes.TEST_PLAN_RUN
Relations: Inbound Relation, Outbound RelationentityTypes.INBOUND_RELATION_CARD
entityTypes.OUTBOUND_RELATION_CARD
Extendable Domain entitiesEntity type name without spaces in quotes, i.e. 'agileReleaseTrain'

Add an existing Unit to Lanes

Here are the steps to find the ID of an existing Unit:

  • Build a List view with the corresponding Entity Type selected;
  • Put a field to the List so that it`s displayed as a column;
  • Right-click on the column header and find there a name of the Unit (data-unit-id):
1147

Create your own unit

If a particular unit does not exist, it is possible to create your own custom unit.
The approach is similar to the creation of Custom Units mashup. Check Custom units article for details.

Several examples of such units in headers:

Show assigned Developers

The unit adds Users assigned under Developer Role to User Story lanes.

customizeApi.registerCustomUnit({
  id: 'developers',
  types: [entityTypes.STORY],
  template: {
    markup: [
      '<span class="tau-board-unit__value">',
      '<%= fn.developers(this.data.developers) %>',
      '</span>'
    ],
    customFunctions: {
      developers: function (data) {
        return _.map(data, function (developer) {
          return '<span>Dev: '
            + _.escape(developer.fullName)
            + '</span>'
        }).join(" and ");
      }
    }
  },
  model: 'developers:assignments.Where(role.name=="Developer").Select({generaluser.id,generaluser.firstName,generaluser.fullName})'
});

Show the Owner Name

The unit adds the Owner in the format: Owner: Full Name to Feature lanes.

customizeApi.registerCustomUnit({
  id: 'owner_fullName',
  types: [entityTypes.FEATURE],
  template: [
    '<div class="tau-board-unit__value">Owner: <%= String(this.data.owner || 0) %></div>'
  ],
  model: 'owner:owner.fullName'
});

Add units to one particular Board

To add units to one particular board, you need to know the board ID. For that, open the board and copy the numbers shown in the board URL: page=board/4876857387053273083

747

Add these numbers as viewId while registering the unit:
customizeApi.registerViewAxisHeaderLayout(viewId, entityTypes, layout)

customizeApi.registerViewAxisHeaderLayout('1111111111111111111', [entityTypes.STORY], {
  sections: [
    {
      units: [
        { id: 'developers' }
      ]
    }
  ]
});

The entire mashup with all the units:

tau.mashups
    .addDependency('tau/api/board/v1/customize')
    .addDependency('tau/const/entityType.names')
    .addMashup(function(customizeApi, entityTypes){
        
        customizeApi.registerCustomUnit({
                id: 'developers',
                types: [entityTypes.STORY],
                template: {
                    markup: [
                        '<span class="tau-board-unit__value">',
                        '<%= fn.developers(this.data.developers) %>',
                        '</span>'
                    ],
                    customFunctions: {
                        developers: function(data) {
                            return _.map(data, function(developer){
                                return '<span>Dev: ' 
                                    + _.escape(developer.fullName) 
                                    + '</span>'
                            }).join(" and ");
                        }
                    }
                },
                model: 'developers:assignments.Where(role.name=="Developer").Select({generaluser.id,generaluser.firstName,generaluser.fullName})'
            });
            
            customizeApi.registerCustomUnit({
                id: 'owner_fullName',
                types: [entityTypes.FEATURE],
                template: [
                  '<div class="tau-board-unit__value">Owner: <%= String(this.data.owner || 0) %></div>'
                ],
                model: 'owner:owner.fullName'
            });
            
            
        // This will add full Milstone Name, Release Name and Planned Dates to all boards and roadmaps
        // Where Portfolio Epic or Epic are selected as Horizontal Lanes
        customizeApi.registerDefaultAxisHeaderLayout([entityTypes.PORTFOLIO_EPIC, entityTypes.EPIC], {
            sections: [
                {
                    units: [
                        {id: 'milestone_flag_name'},
                        {id: 'release_long'},
                        {id: 'planned_dates_long'}
                    ]
                }
            ]
        });
        
        // Add Milestone, Release, Owner, Planned Dates to Feature lanes
        customizeApi.registerDefaultAxisHeaderLayout([entityTypes.FEATURE], {
            sections: [
                {
                    units: [
                        {id: 'milestone_flag_name'}
                    ]
                },
                {
                    units: [
                        {id: 'release_long'}
                    ]
                },
                {
                    units: [
                        {id: 'owner_fullName'},
                        {id: 'planned_dates_long'}
                    ]
                }
            ]
        });
        
        // Add assigned Developers to User Story lanes to a particular board
        customizeApi.registerViewAxisHeaderLayout('1111111111111111111', [entityTypes.STORY], {
            sections: [
                {
                    units: [
                        {id: 'developers'}
                    ]
                }
            ]
        });

    });

Current limitations

1 - It is not possible to customize Column Headers. Upvote the corresponding idea
2 - It is not possible to remove default units with the mashup. Upvote the corresponding idea

📘

How do I vote for ideas?

  1. Go to https://servicedesk.targetprocess.com/ and press 'Log in'
  2. If you've already been in touch with our support team, press 'Forgot your password'. Otherwise create a new account.
  3. Once you're logged in, you'll see a button 'Vote' next to each idea or public issue