This topic is locked

Guide 96 – Improving the presentation of single or multiple Lookups

6/3/2025 2:15:00 PM
PHPRunner Tips and Tricks
fhumanes author

When we replace an "id" with a "name or key" in the table's display, we see text that is usually simple but sufficient. When, instead of having a single value in a field, we have multiple values, displaying these texts one after the other, separated by a comma, is usually insufficient.

img alt

Objetive

Improve the display of "Lookup" fields by highlighting the values, both in the standard Lookup and if a Plugin is used ( The plugins already have a version for PHPRunner v11 )

DEMO: https://fhumanes.com/test_lookup/

img alt
To solve this problem, I used the best solution, or at least the one we should always have as our first option for solving this type of problem: the use of "Custom Fields."

But before specifying the code, I will indicate that the Bootstrap 3 "badge" element will be used, which is what PHPRunner incorporates, but modifying it to our liking.

In the case of using the standard PHPRunner solution, we must know that the program gives control to the code that we write in the CUSTOM field for each of the values ​​and that these values ​​that it returns are not the "id's", but the "name or keys".

Taking these circumstances into account, the code we have to include in Field Custom is:

$in = $value;
if ( $value <> '' ) {
$value = '<span class="badge">'
.'<i class="glyphicon glyphicon-map-marker"></i>  '
.$value
.'</span>';
}

We also have to include in CSS Custom, the style changes we want:

.badge {
/* Bordes más cuadrados (reduce el radio de borde) */
border-radius: 3px !important; /* Valor original en BS3 es 10px */

/* Opcional: ajustar padding para más "cuadratura" */
padding: 3px 6px !important; /* Ajusta según necesites */

/* Opcional: otros estilos para parecerse más a una etiqueta */
font-weight: normal !important;
font-size: 85% !important;
background-color: #777 !important; /* Color de fondo estándar */
color: white !important; /* Para fijar el color del texto */
}

This code is the same for a single value or multiple values ​​in the same field.

If you are interested in this article or want to get the code, follow this link .