Rally: customize rally grid task board

Question

I create an rally taskboard app by using the following source code: https://github.com/RallyApps/app-catalog/tree/master/src/apps/taskboard

Here is my rallycardboard config:

{
            xtype: 'rallycardboard',
            attribute: 'State',
            rowConfig: {
                field: 'WorkProduct',
                sorters: [
                    {
                        property: this._getRankField(),
                        direction: 'ASC'
                    },
                    {
                        property: 'TaskIndex',
                        direction: 'ASC'
                    }
                ],
                headerConfig: {
                    xtype: 'rallytaskboardrowheader'
                },
                columns:[{
                    columnConfig: {
                        xtype: 'rallycardboardcolumn'
                    },
                    fields: ['Release', 'PlanEstimate']
                }],
                sortField: this._getRankField(),
                enableCrossRowDragging: false
            },
            cardConfig: {
                editable: true,
                fields: ['Actuals'],
                skipDefaultFields: false
            },
            margin: '10px 0 0 0',
            plugins: [{ptype:'rallyfixedheadercardboard'}]
        };

There are two problem for me:

1. In cardConfig part, I set visibility for Actuals field but it just visible when it has value, if it is null it not show. I want to show it even it has not value.

2. In headerConfig part, I use rallytaskboardrowheader, here is it's code:

   {Ext.define('Rally.apps.taskboard.TaskBoardHeader', { extend: 'Rally.ui.cardboard.row.Header', alias: 'widget.rallytaskboardrowheader',

   requires: [
       'Ext.util.DelayedTask',
       'Rally.ui.popover.PopoverFactory'
   ],
   
   mixins: {
       clientMetrics: 'Rally.clientmetrics.ClientMetricsRecordable'
   },
   
   initComponent: function() {
       this.callParent(arguments);
       this._delayedTask = Ext.create('Ext.util.DelayedTask', this._showPopover, this);
       this.on('afterrender', function() {
           this.getEl().on('mouseover', this._onMouseOver, this, {delegate: '.formatted-id-link'});
           this.getEl().on('mouseout', this._onMouseOut, this, {delegate: '.formatted-id-link'});
       }, this, {single: true});
   },
   
   _onMouseOver: function() {
       this._delayedTask.delay(500, null, null);
   },
   
   _onMouseOut: function() {
       this._delayedTask.cancel();
   },
   
   _showPopover: function() {
       this.recordAction({description: 'showing work product popover on task board'});
   
       if (!Ext.getElementById('work-product-popover')) {
           Rally.ui.popover.PopoverFactory.bake({
               field: 'WorkProduct',
               target: this.getEl().down('.formatted-id-link'),
               type: this.value._type,
               oid: this.value.ObjectID,
               context: this.getContext()
           });
       }
   },
   
   onDestroy: function() {
       if(this._delayedTask) {
           this._delayedTask.cancel();
       }
   }
   

   });}

so, how to I insert more field, information (or edit, customize) in to header tooltip.for example Release field of US

Answer 1

for the second problem I resolved it below:

-download source code of class Rally.ui.popover.WorkProductPopover and then overwrite your template you want.