Utilizando los Modal Dialogs de SharePoint 2010 [Tip UI # 3]

  • Article

Siguiendo con los tips acerca de como manejar la nueva interfaz gráfica de SharePoint 2010 en esta ocasión veremos los modal dialogs o diálogos. Si no conoces que es esto, te dejo la siguiente imagen

1

Lo genial de este modal dialog es que podemos manejar todo desde JavaScript, desde su apertura hasta el cierre de el (detectando si fue por una acción de Aceptar o Cancelar).

Ahora bien, ¿cómo abrimos un nuevo diálogo? Simple, llamamos a la función SP.UI.ModalDialog.showModalDialog la cual acepta como parámetro las opciones de como será abierta nuestro diálogo. Si desean mayor información con respecto a las opciones que podemos utilizar, les recomiendo que vean el siguiente link.

Veamos la apertura de un diálogo que se direccione a una página que poseo en mi sitio SharePoint, basta ejecutar el siguiente código:

function crearDialogo()
{
var options = {
url: '/SitePages/Ejemplo.aspx',
title: 'Diálogo de Ejemplo',
allowMaximize: true,
showClose: true,
width: 800,
height: 600,
dialogReturnValueCallback: CallbackCerrar
};

SP.UI.ModalDialog.showModalDialog(options);
} 

Con lo cual obtendremos el siguiente resultado:

2

Como podrán darse cuenta, en las opciones de la función JavaScript especifiqué un método llamado “CallbackCerrar” su propósito es que al momento de cerrar el diálogo podamos obtener información de que fue lo que ocurrió ya sea el usuario presionó el botón Aceptar o el botón Cancelar.

function CallbackCerrar(dialogResult, returnValue)
{
if(dialogResult == SP.UI.DialogResult.OK)
{
SP.UI.Notify.addNotification('Presionaste OK o Guardar');
document.title = returnValue;
}

if(dialogResult == SP.UI.DialogResult.cancel)
SP.UI.Notify.addNotification('Presionaste Cancelar!');
} 

Ahora viene lo entretenido, ¿Cómo hacemos que desde nuestra ventana modal podamos notificar a la ventana padre que acción sucedió en ella? Solamente tenemos que llamar a la función SP.UI.ModalDialog.commonModalDialogClose el cual acepta dos parámetros, el primero es una enumeración las posibles acciones invocadas y el segundo parámetro es un valor de retorno definido por el usuario. Si desean mayor información con respecto a la enumeración, sigan el siguiente link

A nuestro diálogo anterior le agregaremos dos botones: Aceptar y Cancelar, los cuales invocarían la función “fnAceptar” y “fnCancelar” respectivamente.

<input type="button" value="Aceptar" onclick="javascript:fnAceptar();" />
<input type="button" value="Cancelar" onclick="javascript:fnCancelar();" /> 

function fnAceptar() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, "El usuario presiono aceptar");
}

function fnCancelar() {
SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.Cancel, "El usuario presiono cancelar")
} 

Con lo cual obtendríamos lo siguiente:

3

Al presionar el botón aceptar, veremos como usando el área de notificación nos aparece un mensaje diciendo “Presionaste OK o Guardar”. Mientras que si presionamos el botón Cancelar veremos el mensaje “El usuario presiono cancelar”.

  4

ó

5

respectivamente

Como puedes ver, manejar las ventanas modales de SharePoint 2010 no es nada complejo simplemente son unas funciones JavaScript y unos pocos parámetros Winking smile! Espero que este artículo haya sido de tu utilidad, hasta la próxima!

A continuación les dejo un listado con todos los artículos con tips de la UI que publiqué: