SharePoint 2010: Como abrir ventanas modales desde WebParts (I)!

Hace unos días en una formación de desarrollo en SharePoint 2010 uno de los temas que traté fue el del nuevo framework de ventanas modales y lo fácil que resulta utilizarlo desde páginas de SharePoint (ya sean de aplicación o no) mediante el correspondiente código ECMAScriipt como se muestra en este artículo…y como siempre, surgió una pregunta interesante: ¿Se puede usar el framework de ventanas modales desde una WebPart? De nuevo la respuesta es que sí gracias a una vieja técnica propia de ASP.NET que permite registrar nuestros propios scripts en el lado del servidor de forma que la página devuelta contenga nuestro código JavaScript…en el caso de una WebPart para SharePoint 2010 (de tipo visual) basta con:

  • Crear en Visual Studio 2010 el correspondiente proyecto de tipo WebPart visual.
  • En la vista de código de la WebPart, añadimos el siguiente código en el evento Page_Load() que básicamente nos permite indicar la función JavaScript que va a ser invocada cuando se hace clic en el botón (en este caso) y registrar su implementación a través del manejador añadido al método PreRender de la WebPart. Fijaros también como además de especificar la función que se va a llamar, se añade un return false para evitar que al hacer clic se produzca una recarga de página y por lo tanto no se muestre la ventana modal que es lo que necesitamos
   1: protected void Page_Load(object sender, EventArgs e)

   2: {

   3:     //Añadimos el manejador para Control.PreRender

   4:     if (!Page.IsPostBack)

   5:     {

   6:         this.PreRender +=

   7:             new EventHandler(SPDialogsWP_PreRender);

   8:         string sTargetuRl =

   9:             "http://demo2010a:100/Shared%20Documents/SQL%20Azure.aspx";           

  10:         this.btnOpenDialog.OnClientClick =

  11:             @"OpenDialog('" +

  12:             sTargetuRl +

  13:             "'); return false;";       

  14:     }

  15: }

  • La codificación del manejador del método PreRender() contiene el registro efectivo del código JavaScript que se va a ejecutar al hacer clic en el botón. Fijaros que en este caso estamos comprobando antes de añadir ese script que se debe añadir porque se ha hecho clic en el botón.
  • Como veis, a través de Page.ClientScript.RegisterClientScriptBlock estamos registrando el código JavaScript que permite abrir la ventana modal cuando se hace clic en el botón.
   1: private void SPDialogsWP_PreRender(object sender, System.EventArgs e)

   2:  {

   3:      //ButtonClickScript

   4:      if (!Page.ClientScript.IsClientScriptBlockRegistered("ButtonClickScript"))

   5:      {

   6:          string includeScript = 

   7:              @"<script language='javascript'>" + 

   8:              "function OpenDialog(formURL) {" + 

   9:              "var options = SP.UI.$create_DialogOptions();" +

  10:              "options.url = formURL;" + 

  11:              "SP.UI.ModalDialog.showModalDialog(options); }"+

  12:              "</script>";

  13:  

  14:          Page.ClientScript.RegisterClientScriptBlock(

  15:              this.GetType(), "ButtonClickScript", includeScript);

  16:      }

  17:  

  18:  }

  • Desplegamos la WebPart en nuestro sitio de trabajo.
  • Comprobamos que al hacer clic sobre el botón se muestra la ventana modal como se esperaba y que en este caso nos redirige a otra en la que podríamos recoger por querystring un parámetro y mostrar la información que necesitemos.
image image image

Otros enlaces sobre este tema son los siguientes:

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.

2 comentarios en “SharePoint 2010: Como abrir ventanas modales desde WebParts (I)!”

Deja un comentario

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