How to add custom column for My request widget?

[linhntp25]

I have a requirement to add a target person column to my request widget. I have cloned the widget, edited the HTML, and edited the server script. But it doesn't display the name of the target person. And the padding isn't as good as the original padding. 

1. I added the Target person to HTML

 ....<span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${Request}</span>
          <span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${Target Person}</span> 
          <span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${State}</span>
          <span role="columnheader" class="col-xs-3 padder-r-none padder-l-none">${updated_capital}</span>....

 I also added the item.requested_for to get the target person

<li role="row" class="list-group-item table-responsive" ng-repeat="item in c.data.request.req_list | limitTo: c.data.lastLimit track by item.sys_id" style="margin:0px" >
          <div role="cell" class="col-xs-3 padder-l-none padder-r-none main-column">
            <div class="primary-display">and
              <a href="?id={{::item.url.id}}&table={{::item.url.table}}&sys_id={{::item.url.sys_id}}" sn-focus="{{::item.highlight}}" aria-label="{{::item.display_field}} , {{::item.display_number}}"> {{::item.display_field}} </a>
            </div>
            <small class="text-muted">
              <div ng-repeat="f in item.secondary_displays" class="secondary-display">
                <span >{{::f.display_value}}</span>
              </div>
            </small>
          </div>
          <div role="cell" class="col-xs-3 padder-l-none padder-r-none target-person-column">
            <div class="target-person">
              <span> {{::item.requested_for}}</span>
            </div>
          </div>
          <div role="cell" class="col-xs-3 padder-l-none padder-r-none state-column">
            <div class="state">
              <span> {{::item.state}}</span>
            </div>
          </div>
          <div role="cell" class="col-xs-3 padder-l-none padder-r-none updated-column">
            <div class="updated">
              <i class="fa fa-clock-o" aria-hidden="true" title="${Updated}"></i>
              <sn-time-ago timestamp="::item.updated_on"/>
            </div>
          </div>
        </li>

2. On the server script, I added a line '

record.requested_for = gr.getDisplayValue('requested_for'); ' at the line 255

 And the result is below:

- the alignment isn't good

- they didn't display the name of the target person.

Can anyone help me specify what's wrong with the steps that I have made? Can you help me specify what I should do next? Thank you