En los casos en que en la presentación de la información de una tabla cambiamos un «id» por un «nombre o clave», en la visualización vemos un texto que normalmente es simple pero suficiente. Cuando en vez de tener un sólo valor en el campo tenemos múltiples valores, la presentación de esos textos, uno detrás de otro, separados por una coma, normalmente es insuficiente.

Objetivo

Mejorar la visualización de los campos «Lookup» resaltando los valores, tanto en el Lookup estándar como si se utiliza algún Plugin (Los plugins ya tienen versión para PHPRunner v11)

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

Solución Técnica

Para revolver este problema he utilizado la mejor de las soluciones o al menos, la que siempre debemos tener como primera opción para solucionar este tipo de cosas. La utilización de «campos Custom».

Pero antes de especificar el código, indicaré que se va utilizar los elemento «badge» de Bootstrap 3, que es lo que incorpora PHPRunner, pero modificándolo a nuestro gusto.

En el caso de utilizar la solución estándar de PHPRunner tenemos que saber que  el programa da control al código que escribimos en el campo CUSTOM por cada uno de los valores y que estos valores que devuelve no son los «id’s», sino los «nombre o claves».

Teniendo en cuenta estas circunstancias, el código que tenemos que incluir en Field Custom, es:

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

Además tenemos que incluir en CSS Custom, los cambios de estilo que deseemos:

.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 */
}

Este código es igual para el caso de un sólo valor o varios valores en el mismo campo.

Para el caso de utilizar Plugins (MultiSelect, Select2, Arbol, etc.) el plugin que corresponda te soluciona la parte de edición, pero no te suele facilitar la parte de visualización y en este caso se puede utiliza este código en el Field Custom:

$in = $value;
if ( $value <> '' ) {
    $rs = DB::Query(
    "SELECT group_concat(
          concat(
           '<span class=\"badge \">',
           NombrePais,
           '</span>'
           )
           order by NombrePais ASC
           separator '  ') names
    FROM prueba_plugin_pais
    WHERE CodigoPais IN ( $in )"
    );
    while( $data = $rs->fetchAssoc() )
    {
       $value = $data['names'];
    }
}

Este código es el esquema, pues hay que adaptarlo para la conversión de los «id’s» a los «Textos» que corresponda. Esta función de «group_concat» es de MySQL.

También hay que utilizar el CSS Custom.

Espero que os sirva y como siempre, dejo los fuentes del proyecto por si queréis hacer pruebas en vuestros PC’s.