lunes, 23 de junio de 2014

Nuevas ventanas modales en Doors 7


A partir de la versión 7.1 de Doors, se introdujeron nuevas ventanas modales a la aplicación. Son ventanas que se muestran dentro de la misma pantalla de navegación mostradas a través de código Javascript en las que se puede agregar cualquier tipo de contenido Web.
Estas nuevas ventanas son beneficiosas debido a que el usuario centra su atención en las mismas y no ocurren accidentales cambios de foco entre ventanas (como las modales del navegador) haciendo que el usuario olvide pantallas abiertas, no ingrese cierta información que pueda ser requerida o en algunos casos no se pueda navegar hacia otra página debido a ventanas modales abiertas.
Ejemplos de estas nuevas ventanas se pueden encontrar en el  nuevo editor de vistas, administrador de vistas, y propiedades de documentos.

En esta entrada explicaremos como utilizar estas ventanas y sus características desde código Javascript.

Apertura

El método disponible para abrir las nuevas ventanas modales se encuentra dentro del archivo jscript.asp y es el siguiente:

function topPopup(popId,url,title,width,height,modal,inIframe,frameToRefresh){...}

Parámetros: (todos requeridos)
popId (texto): Identificador de la ventana modal a mostrar. Este debe ser un identificador que servirá también para el cerrado de la misma. Letras, números y guiones bajos son aceptados.
url (texto): Dirección del recurso/página web que se mostrará en la pantalla.
title (texto): Título a mostrar en el encabezado de la ventana.
width (numérico): Ancho de la ventana en píxeles.
height: Alto de la ventana en pixeles.
modal (booleano): Si la ventana bloquea el fondo de la pantalla.
inIframe (booleano): Determina si el contenido de se mostrará en un iframe o se cargará a través de una petición ajax (XmlHttpRequest)
frameToRefresh (texto): En caso de querer refrescar alguno de los frames de la pantalla principal de Doors, especificar el nombre del frame. De no necesitar realizarlo, enviar un texto vacío.

Cierre

Para cerrar la ventana modal, se deberá llamar al siguiente método (también ubicado dentro del archivo jscript.asp):

function topClosePopup(popupId){...}

Parámetros:
popupId (texto): Identificador de la ventana modal que se desea cerrar.

NOTA: Futuras versiones de estos métodos permitirán enviar y recibir parámetros a través del cierre/apertura hacia/desde las ventanas modales.

Acceso a funciones en origen

Normalmente las páginas llamadas a través de los metodos window.open o window.showModalDialog utilizan como referente los parámetros window.opener o window.dialogArguments. Para poder acceder al documento "padre" ahora se debe cambiar este acceso por el frame donde se encuentra el código originador. Por ejemplo si el código se encuentra en un control, tan solo con llamar a top.frameDer o en caso de estar en una nueva ventana, llamar a top permitirá el acceso a las funciones deseadas.

Código anterior:


var op = null;

if (window.opener != undefined) {op = window.opener;}

else {op = window.dialogArguments;}


Código actual:

//Se verifica si esta en la pantalla principal de doors (home) o en una ventana separada.
var op = top.frameDer ? top.frameDer : top;

Ejemplo

El siguiente ejemplo muestra el código de como mostrar la ventana del selector de Contactos en Casos de un CRM por la nueva ventana modal:

Código en ScriptBeforeRender del control:


'Esto abrirá la nueva ventana en modo modal contenida en un iframe con nombre CASES_CONTACTLIST

Dim urlText

urlText = "'" & Application("VirtualRoot") & "/crm/customs/empresa/contactsList.asp?fld_id=4502&callbackfunction=crmlubotCallback_customer&mode=1&limitsearch=500&includes=1%2C2%2C%2D1&selected=' + urlEncode(document.getElementById('customer').value.split('|')[1]) "
'Asigno al boton de busqueda la apertura de la ventana.
lbSearch.ControlLookupBox.Buttons.item(2).Attributes.Item("onclick") = "topPopup('CASES_CONTACTLIST'," & urlText & ",'Buscador de contactos...',480,580,true,true,'')"


Código en la página a abrir:

- Al iniciar
//Recibo la referencia del llamador. En este caso, se abrirá la pantalla desde el frame de la derecha o desde una nueva pestaña en donde se contemplan las dos posibilidades.

var op = top.frameDer ? top.frameDer : top;

- Al generar una acción de cierre/confirmación
//Se llama a la función de referencia en caso de confirmación, y luego se cierra la ventana.
if (op != undefined) {
    try {
 op.functionEnElPadre(parametroAEnviar);
    }
    catch(err){
 alert(err.description || err);
    }
    topClosePopup("CASES_CONTACTLIST");
}

Antes:

Después:



No hay comentarios:

Publicar un comentario