ECS my Request row hightlight and clickable on mouse over

[Eli7]

Hi All

I am trying to tweak the below HTML from the my request widget in ECS to make the entire row clickable and highlight it.

I tweaked the <a href and add it to the <li role element but cannot get it to work. 

Does anyone have any idea how to make this work

<ul role="rowgroup" class="padder-l-none padder-r-none">
<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-6 padder-l-none padder-r-none main-column">
<div class="primary-display">
<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>

[gurjot5]

To make this the entire <li> element should be clickable and not just <a>(anchor tag element) so what you can do is add 'ng-click' in your <li> element and call a client script function which allows you to navigate 

HTML

<li ng-click= "funcName(item.url.id , item.url.table, item.url.sys_id)">

Client Script

var funcName = function(urlID , tablename , sysid){

$location.search({

'id':urlID,

'table':tablename,

'sys_id':sysid

});

}

Just one more thing in the client script do include the dependency injector i.e $location on the top and should look like this

api.controller = function($location , #$scope){

}

Please mark the response helpful , if this solves the issue

[Eli7]

Hi Gurjot, Thank you very much for the suggestion. I am trying to apply it but having trouble in the client script. 

The ng-click I added like this; 

<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" ng-click= "funcName(item.url.id , item.url.table, item.url.sys_id)"> 

The client script I added like below at the end in the My Request widget:

api.controller = function($location , $scope){

    var funcName = function(urlID, tablename, sysid) {

            $location.search({

                'id': urlID,

                'table': tablename,

                'sys_id': sysid

            });

}

}

Could you share if you have it code snipped how you integrated this

Many Thanks!

[gurjot5 · Accepted solution]

Hi i identified there is just a minor error in your client script use $scope before your varible name 

$scope.funcName = function(urlID, tablename, s

            $location.search({

                'id': urlID,

                'table': tablename,

                'sys_id': sysid

            });

}

Please mark this as helpful if it solves your issue

[Eli7]

Hi Gurjot,

I got it to work 🙂

Thanks a ton!