SharePoint 2010: Uso de las ventanas modales desde una página de aplicación!

Otra de las novedades que incorpora SharePoint 2010 es el uso de ventanas modales por todos los lados. Se trata de mejorar la experiencia de usuario en operaciones típicas como la creación de un sitio o de una lista / biblioteca, de un elemento de lista, etc. Estas ventanas modales se basan en el nuevo Framework de ventanas modales que por supuesto podemos usar en nuestros desarrollos para SharePoint 2010.

image

Para demostraros el uso del nuevo framework de ventanas modales de SharePoint 2010:

  • He creado un proyecto de SharePoint 2010 de tipo Empty SharePoint Project.
  • En el asistente configuración del proyecto he especificado que la solución a crear se desplegará en modo granja.
  • Una vez creado el proyecto, le he añadido la carpeta Layouts al proyecto como carpeta mapeada.
image image image

 

  • Al añadir la carpeta mapeada, dentro de la misma se crea una carpeta con el nombre que le he puesto al proyecto. Esto es así para evitar posibles conflictos con archivos existentes.
  • A continuación he añadido una página de aplicación al proyecto.
image image

 

  • En la vista de código de la página de aplicación es dónde se he añadido el correspondiente código JavaScript que se encarga de utilizar el framework de ventanas modales: 

<asp:Content ID=”PageHead” ContentPlaceHolderID=”PlaceHolderAdditionalPageHead” runat=”server”>  

<script type=”text/javascript”>  

    function OpenDialog() {  

        var options = SP.UI.$create_DialogOptions();  

        options.url = “/_layouts/SPDialogsFramework/SampleDialog.htm” 

        options.width = 400;  

        options.height = 300; 

        options.dialogReturnValueCallback =  

            Function.createDelegate(null, CloseCallback);  

        SP.UI.ModalDialog.showModalDialog(options);  

     

    function CloseCallback() {  

        alert(‘Has pulsado OK’);  

     

</script 

</asp:Content 

<asp:Content ID=”Main” ContentPlaceHolderID=”PlaceHolderMain” runat=”server”>  

    <input type=”button” value=”Mostrar Diálogo” onclick=”OpenDialog()” />  

</asp:Content 

<asp:Content ID=”PageTitle” ContentPlaceHolderID=”PlaceHolderPageTitle” runat=”server”>  

Mostrar Diálogo Modal  

</asp:Content 

<asp:Content ID=”PageTitleInTitleArea” ContentPlaceHolderID=”PlaceHolderPageTitleInTitleArea” runat=”server” > 

Framework de ventanas modales 

</asp:Content>

  • Como podéis ver en el código anterior:
    • He añadido en el Place Holder de la cabecera de la página un bloque de código JavaScript que se encarga de mostrar la ventana modal a través de la función OpenDialog(). Esta función crea un tipo options a partir de llamar al método create_DialogOptions() definido en SP.UI.
    • A partir de aquí se configuran los distintos parámetros de la ventana modal y se modela el comportamiento de gestión del valor de vuelta a la página desde la que se abrió la ventana modal. Para ello se crea el correspondiente delegado que establece la comunicación a realizar con la página origen en el caso en el que se cierre la ventana modal (función CloseCallBack).
    • A continuación simplemente mostramos la ventana modal que hemos configurado a través de SP.UI.ModalDialog.showModalDialog() que recibe el objeto options que contiene las configuracioens comentadas.
    • La función CloseCallback() es la que realiza las operaciones definidas en el caso en el que se cierre la ventana modal. En este caso, mostrar un mensaje al usuario.
    • En cuanto a la acción de llamar a OpenDialog(), la tenéis definida en el botón Mostrar Diálogo.
  • A continuación he añadido al proyecto una sencilla página HTML y la correspondiente feature en la sección feature.
  • Una vez añadida y configurada la feature realizamos el despliegue del proyecto a través de la opción deploy.
  • Abrimos la página de aplicación en el navegador y comprobamos que al pulsar el botón se muestra nuestra ventana modal.
  • De la misma forma, al cerrar la página comprobamos que tiene lugar la comunicación efectiva con la página que realizo la llamada originalmente.
image image image

    Y hasta aquí llega este post sobre como utilizar las ventanas modales de SharePoint 2010.

Publicado por

Juan Carlos González

Juan Carlos es Ingeniero de Telecomunicaciones por la Universidad de Valladolid y Diplomado en Ciencias Empresariales por la Universidad Oberta de Catalunya (UOC). Cuenta con más de 12 años de experiencia en tecnologías y plataformas de Microsoft diversas (SQL Server, Visual Studio, .NET Framework, etc.), aunque su trabajo diario gira en torno a SharePoint & Office 365. Juan Carlos es MVP de Office Servers & Services desde 2015 (anteriormente fue reconocido por Microsoft como MVP de Office 365 y MVP de SharePoint Server desde 2008 hasta 2015), coordinador del grupo de usuarios .NET de Cantabria (Nuberos.Net, www.nuberos.es), co-fundador y coordinador del Grupo de Usuarios de SharePoint de España (SUGES, www.suges.es), así como co-director de la revista gratuita en castellano sobre SharePoint CompartiMOSS (www.compartimoss.com). Hasta la fecha, ha publicado 8 libros sobre SharePoint & Office 365 y varios artículos en castellano y en inglés sobre ambas plataformas.

Un comentario en “SharePoint 2010: Uso de las ventanas modales desde una página de aplicación!”

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *