He estado trabajando en el arranque de un proyecto y el trabajo me ha absorbido el tiempo que tengo disponible para añadir posts... pero vuelvo al ataque y con una técnica que para mi es espectacular tiene buenos resultados y nos permite hacer algunas cosas verdaderamente interesantes y que dan calidad a nuestros informes.
Bueno os explico como usarla y ya me comentareis que uso le dais a estas ventanas.
Vamos a ello... os aviso que esta vez la descripción es larga...
En este caso voy a crear un informe desde cero utilizando el paquete GO Data Warehouse (query) de los ejemplos de IBM Cognos y vamos a utilizar la ventana emergente como una ventana que contendra los prompts del informe.
1.) Desde Report Studio, creamos un informe nuevo tipo lista y arrastramos a la lista los campos del namespace Sales (query)
- Product line y Product type de Product
- Quantity de Sales Fact
<script type="text/javascript">
function popUp(box){
var msgbox = document.getElementById(box);
if (msgbox) {
toggleVisibility(msgbox);
toggleObjects(box);
}
}
function toggleVisibility(object){
//Toggle visibility of given object
//object.style.visibility = (object.style.visibility == 'visible') ? 'hidden' : 'visible';
if (object.style.visibility == 'hidden') {
object.style.visibility = 'visible';
} else {
object.style.visibility = 'hidden';
}
}
function toggleObjects(parent){
//Toggle visibility of all of "DIV" objects within given parent object
var parentObj = document.getElementById(parent);
if (parentObj){
var objects = parentObj.getElementsByTagName("DIV");
if (objects){
for (var i = 0; i < objects.length; i++){
toggleVisibility(objects[i]);
}
}
}
}
</script>
A este HTML le podemos llamar 'Popup show hide'
3.) A continuacion otro HTML Item que podremos llamar 'Popup Drag Functions', que contendra lo siguiente:
<SCRIPT LANGUAGE="JavaScript">
// global variables used while dragging
var offsetX = 0;
var offsetY = 0;
var obj = null;
document.onmouseup = release;
// do the dragging (called repeatedly by onMouseMove)
function dragIt() {
if (obj) {
obj.style.left = event.clientX - offsetX;
obj.style.top = event.clientY - offsetY - 83;
// -83 is included to offset the Cognos header, which is added dynamically
// For prompt pages, which does not include the Cognos header, this -83 value
// should be removed.
return false;
}
}
// set global vars and turn on mousemove trapping (called by onMouseDown)
function engage(box) {
obj = document.getElementById(box);
if (obj) {
document.onmousemove = dragIt;
offsetX = window.event.offsetX;
offsetY = window.event.offsetY;
}
}
// restore everything as before (called by onMouseUp)
function release() {
if (obj) {
document.onmousemove = null;
obj = null;
}
}
</SCRIPT>
4.) Ahora donde deseamos que aparezca la pantalla, en este caso, justo por encima de la lista, arrastraremos un bloque, a este bloque arrastraremos otro HTML Item , que podemos llamar 'Popup Start', con el siguiente contenido
<div id="popUp1" style="position:absolute; z-index:3; background: #FFFFFF;">
<div style="position: relative; left: -3px; top: -3px;">
<div style="position: absolute; height:1px; width:100%; cursor:move;"
onmousedown="javascript:engage('popUp1');"
></div>
5.) Ahora dentro de este bloque, que es el que aparecerá como una ventana emergente, llevamos un contenedor, es este caso voy a añadir una tabla, pues quiero hacer un menú, para que el usuario desde este informe pueda ejecutar otros informes. La tabla tendrá 4 filas y 2 columnas.
En la primera fila de la primera columna colocaremos un texto que sirve para identificar la ventana.
6.) En la primera fila, en la segunda columna, arrastramos un HTML Item, que contiene lo siguiente
<a title="Close" href="javascript:void(0);" onclick="popUp('popUp1');" style="text-decoration:none;"><font color="002364">[x]</font></a>
7.) Ahora rellenamos la ventana con los objetos que queremos a aparezcan. En este caso, es fácil, pues quiero unos textos que tendrán asociado un drill throught para que ejecuten otros informes en ventanas separadas.
8.) Animo, que queda poco.
9.) Llevamos otro HTML, dentro del bloque que contiene nuestra tabla, justo debajo de la tabla. A este HTML le podemos llamar Popup End y contiene lo siguiente
</DIV></DIV>
<script type="text/javascript">
popUp("popUp1");
</script>
10.) Ahora, nos queda hacer la llamada al Menú, así que colocaremos un Bloque donde deseemos que aparezca el botón que llamara a nuestra ventana y dentro de este bloque otro HTML, que llamaremos Search Buttom y que contiene lo siguiente.
<button href="javascript:void(0);" " title="Menú de Acceso Directo Informes" onclick="popUp('popUp1');"><b><font color=black size="2">Menú</font></b></button>
....
Al fin... ya estamos en condiciones de ejecutarlo. A continuación os muestro un imagen de como queda el informe en Report Studio
Bueno, ahora solo queda ejecutarlo y ver que aparece.
Al comienzo un informe muy sencillo, como el siguiente:
y cuando pulsamos sobre el botón Menú, aparece la ventana emergente.
Bueno, pues como veis ahora este informe dispone de una ventana emergente. Como comente al principio, hay que dar luz a nuestros informes y esta es una tecnica que podemos utilizar en varias situaciones, menus, prompts cuando no hay espacio, navegacion a otros informes... vamos muchas utilidades.
En el futuro tambien os contare como generar esta ventana y que se pueda llamar desde varios informes
No hay comentarios:
Publicar un comentario