Fausto Martinez
El objetivo es colocar un botón de enlace a la derecha de un campo de una aplicación formulario, la idea es poder abrir una aplicación modal y mostrar información referente al campo donde colocaremos el botón, quedando nuestro botón de esta forma:
1.- Crear botón de enlace con la siguiente características y nos aseguramos que el botón quede en la barra superior de botones (barra de herramientas).
Como puedes notar utilizamos en modo de visualización de tipo imagen y una imagen png de las que trae SC en su biblioteca de imágenes.
2.- En la configuración del botón enlace presionamos el botón enlace y configuramos el enlace tal y como usted lo ha venido haciendo cada vez que necesita un botón de enlace. En mi caso las propiedades del enlace quedaron de la siguiente forma:
El url de salida se refiere a la aplicación que debe regresar al cerrar el modal, si lo deja vacío regresará a la misma aplicación desde donde se está cargando el modal, yo de todos modos prefiero ponerle el nombre de la aplicación aunque sea la misma.
3.- Usando el inspector de código de su navegador consiga el ID del botón que quieres colocar al lado del campo y el ID del campo.
En mi caso:
Id del campo: id_ajax_label_disponible
Id del Botón: sc_btnHistorico_top
4.- En el evento onScriptInit, pegamos el siguiente código y solo es necesario cambiar el Id de su botón y de su campo.
?>
<head>
<style>
img#id_img_sc_btnHistorico_top:hover {
transform: scale(1.2);
}
img#id_img_sc_btnHistorico_top:active {
transform: scale(0.98);
}
</style>
</head>
<body>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
$("#sc_btnHistorico_top").clone().insertAfter( "#id_ajax_label_disponible" );
$("td.scFormToolbar #sc_btnHistorico_top" ).remove();
$("<span> </span>").insertAfter("#id_ajax_label_disponible");
});
</script>
</body>
<?php
El estilo es opcional, este afecta directamente la imagen en el botón y lo que hace es proporcionar un efecto cuando el puntero del mouse pasa sobre este y cuando se da un click a la imagen.
Con estos 4 simples pasos, su botón debería funcionar al 100%. En este caso utilice en un botón de enlace, pero usted puede utilizarlo para colocar cualquier tipo de botón (php, javascript, ajax, etc.) y podría servir para cumplir diferentes tipo de requerimientos.
Espero que este pequeño instructivo pueda servir de ayuda!!!!
Fausto
document.addEventListener("DOMContentLoaded", function(event) {
$("#sc_btnHistorico_top").clone().insertAfter( "#id_ajax_label_disponible" );
$("td.scFormToolbar #sc_btnHistorico_top" ).remove();
$("<span> </span>").insertAfter("#id_ajax_label_disponible");
});
</script>
.appendTo( $("#id_ajax_label_disponible").parent() )
.css({'padding-left':'5px','padding-bottom':'3px'});
</script>
José Luis Cuesta Landoni
José Luis Cuesta Landoni
?>
<span>Hello</span>
<?
En desarrollo funciona bien, pero desplegado en produccion, no carga el formulario y da el error 500 de servidor.
José Luis Cuesta Landoni
<span>Hello</span>
<?php