So I chose the hooks way to get the same implemented into the admin interface. Below is the hook to be used to make it display the required custom field's value along with the product name:
<?php
if ( !defined('WHMCS')) {
header("Location: ../../index.php");
}
use WHMCS\Database\Capsule;
// Please set custom field id here.
$customfieldId = 1;
if($_REQUEST['getAll'] == '1')
{
if($_REQUEST['userid'] != '')
{
$all = Capsule::table('tblcustomfieldsvalues')
->join('tblhosting', 'tblcustomfieldsvalues.relid', '=', 'tblhosting.id')
->where('fieldid', $customfieldId )
->where('userid', $_REQUEST['userid'] )
->get();
}else
{
$all = Capsule::table('tblcustomfieldsvalues')->where('fieldid', $customfieldId)->get();
}
$all = json_decode( json_encode( $all ) , true );
$newAll = [];
foreach($all as $a)
{
$newAll[$a['relid']] = $a['value'];
}
ob_clean();
echo json_encode(array( "all" => $newAll ));
die;
}
add_hook('AdminAreaPage', 1, function($vars) {
if( $vars['filename'] == 'clientsservices' )
{
echo '<script>
document.addEventListener("DOMContentLoaded", function(){
$.post(window.location,
{ getAll: 1 },
function(data, status){
var data = JSON.parse(data);
var first = [];
setInterval(function() {
var x = document.querySelectorAll("[data-value]");
for (var i = 1; i < x.length ; i++) {
if(typeof first[x[i].dataset.value] === "undefined")
{
first[x[i].dataset.value] = x[i].innerText;
}
if(typeof data.all[x[i].dataset.value] !== "undefined" && data.all[x[i].dataset.value] != "")
{
x[i].innerText = first[x[i].dataset.value] + " - " + data.all[x[i].dataset.value];
}
}
}, 100);
});
});
</script>';
}
if( $vars['filename'] == 'clientshostinglist')
{
echo '<script>
document.addEventListener("DOMContentLoaded", function(){
$.post(window.location,
{ getAll: 1 },
function(data, status){
var data = JSON.parse(data);
var table = document.getElementById("sortabletbl1");
var rows = table.rows;
for (var i = 1; i < rows.length ; i++) {
if(data.all[rows[i].cells[1].innerText] != null && data.all[rows[i].cells[1].innerText] != "")
{
rows[i].cells[2].innerHTML = rows[i].cells[2].innerHTML+ " - " + data.all[rows[i].cells[1].innerText];
}
}
});
});
</script>';
}
});
The only thing that needs to be setup is the $customfieldId inside the hook.
Hope this is useful to someone.
Thanks!