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.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión /  Cambiar )

Google photo

Estás comentando usando tu cuenta de Google. Cerrar sesión /  Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión /  Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión /  Cambiar )

Conectando a %s