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: