En nuestras aplicaciones, cada vez más, utilizamos la imagen para representar a un usuario, a un producto, a un país, etc., es decir, utilizamos asociado a un código la imagen que representa a ese objeto.

PHPRunner dispone o hace muchas cosas, pero la funcionalidad de «AUTOFILL» no la hace para el caso de que lo que queramos traer asociado a un campo sea una imagen.

Objetivo

En campo del tipo «lookup«, cuando cargamos un valor nos debe recuperar en otra parte de la pantalla a la imagen del registro seleccionado.

DEMO:  https://fhumanes.com/photo

Solución técnica

Para dar solución a este requisito lo he resuelto de esta forma:

• Para la zona donde queremos que aparezca la imagen he definido un snipped definiendo un «DIV» en su interior. Dicho «DIV» lo vamos a rellenar con la información de la imagen.
• En JavaScript definimos una función para ejecutar un proceso ajax donde nos va a recuperar el PATH de la imagen asociada al valor introducido.
• También en JavaScript, nos va a controlar cuando el campo cambia de valor, para refrescar la imagen.

En el ejemplo se han definido Usuarios «users» y Grupos «groups», cada registro de estas entidades tienen un nombre y una imagen asociada.

Cuando se mantiene la entidad de Usuarios en Grupos «users_group», cuando se introduce un usuario y/o grupo, el sistema recupera la imagen asociada estas entidades.

Muestro algunos ejemplos de código escrito.

JavaScript Onload Event, en la acción de ADD

// USER -------------------------------------------------------------
function loadImageUser(ctrl) {
  pvalor = ctrl.getValue();
  if ( pvalor != '' ) {			// No hay valor en el campo
  $.ajax({
    type: 'POST',
    url: './ajax_load_image_user.php',
    data: {
       valor: pvalor
    }
  }).done(function (msg) {
    // alert(msg);
    var image_user = new Image();

    var src_user = msg;
    image_user.src = src_user;

    $('#image_user').empty().append(image_user);  // Limpiar y cargar nueva imnagen
  }).fail(function (jqXHR, textStatus, errorThrown) {
    alert("The following error occured: " + textStatus + " " + errorThrown);
  });
 } else {
  $('#image_user').empty();
 }
}
// ---------------------------------------------------------------------------------
var ctrl_user = Runner.getControl(pageid, 'user_id');
if ( ctrl_user.getValue()!= '') loadImageUser(ctrl_user);
// ---------------------------------------------------------------------------------
ctrl_user.on('change', function (e) {
  loadImageUser(ctrl_user);
});

// GROUP -------------------------------------------------------------

function loadImageGroup(ctrl) {
  pvalor = ctrl.getValue();
  if ( pvalor != '' ) {			// No hay valor en el campo
  $.ajax({
    type: 'POST',
    url: './ajax_load_image_group.php',
    data: {
       valor: pvalor
    }
  }).done(function (msg) {
    // alert(msg);
    var image_group = new Image();

    var src_group = msg;
    image_group.src = src_group;

    $('#image_group').empty().append(image_group);  // Limpiar y cargar nueva imnagen
  }).fail(function (jqXHR, textStatus, errorThrown) {
    alert("The following error occured: " + textStatus + " " + errorThrown);
  });
 } else {
  $('#image_group').empty();
 }
}
// ---------------------------------------------------------------------------------
var ctrl_group = Runner.getControl(pageid, 'group_id');
if ( ctrl_group.getValue()!= '') loadImageGroup(ctrl_group);
// ---------------------------------------------------------------------------------
ctrl_group.on('change', function (e) {
  loadImageGroup(ctrl_group);
});

Proceso de ajax, para recuperar el path de la imagen ajax_load_image_user.php

<?php 
require_once("include/dbcommon.php"); // DataBase PHPRunner

if (!isset($_POST['valor'])) { //  Control of the call and verification of the existence of the parameter
  echo("Please provide a Valor.");
  die();
}
$id_user = $_POST['valor'];

$rs = DB::Query("select photo from photo_user where id_user = $id_user");
$photo = $rs->value("photo");
// get information about uploaded files
$fileArray = my_json_decode($photo);
$path = $fileArray[0]["name"];

echo($path);
?>

Espero que os guste y si tenéis cualquier duda, por favor, contactar a través de email [email protected]

Os dejo el proyecto, para que lo instaléis en vuestros PC y podáis ver con todo detalle este ejemplo y modificarlo para que se ajuste a vuestras necesidades.