De SharePoint 2007 a 2010 creando una ventana de dialogo Parte II

En la primera parte http://jmhogua.blogspot.com/2012/08/de-sharepoint-2007-2010-creando-una.html vimos la creación de la Application Page que se utilizará como contenedor de la ventana de dialogo.

El evento Load() del elemento Web en los comentarios “// your code here…”  escribiremos el código de JavaScript para invocar la ventana de dialogo.

/// <summary>
       /// Ensures that the CreateChildControls() is called before events.
       /// Use CreateChildControls() to create your controls.
       /// </summary>
       /// <param name="e"></param>
       protected override void OnLoad(EventArgs e)
       {
           if (!_error)
           {
               try
               {
                   base.OnLoad(e);
                   this.EnsureChildControls();

                   // Your code here...
               }
               catch (Exception ex)
               {
                   HandleException(ex);
               }
           }
       }

Esta sería la línea de código a insertar:

Page.ClientScript.RegisterStartupScript(this.GetType(), "Info-Dialog", Script4OpenDialog(Vinculo,URL));

El método que tiene la parte medular de la invocación la explicaremos a continuación:

Para ejecutar la ventana de dialogo utilizaremos el framework sp.js que es el modelo de objetos de SharePoint 2010 para JavaScript, utilizaremos el método ExecuteOrDelayUntilScriptLoaded con la siguiente sintaxis: 

 ExecuteOrDelayUntilScriptLoaded(‘//código aqui’,’sp.js’);

Dentro del método invocaremos “SP.UI.$create_DialogOptions();” para crear las opciones del dialogo.

Luego la invocación de la ventana de dialogo a través del método showModalDialog() pasando las opciones que se crearon para el dialogo SP.UI.ModalDialog.showModalDialog(dialogOptions);

Por último la invocación del método de JavaScript que encapsula todo este código, pero utilizaremos Jquery para asegurarnos que si se invoca, y que para el caso especifico de esta solución ya esta invocado en el portal que se va instalar en la master page (<script language="javascript" src="jquery-1.4.2.min.js" type="text/javascript"></script>).

$(document).ready(function () {
OpenDialog('/_layouts/infoware/infoenlace.aspx?nlc={0}&vncl={1}&mg={2}'); \n", enlace.Descripcion, enlace.URL, urlImagen);
}

private string Script4OpenDialog(Enlace enlace, string urlImagen)
{
    var scripting = new StringBuilder();
    scripting.Append("<script type=\"text/javascript\"> \n");
    scripting.Append("//<![CDATA[ \n");
    scripting.Append("ExecuteOrDelayUntilScriptLoaded(function () { \n");
    scripting.Append("function OpenDialog(strPageURL) \n");
    scripting.Append("{ \n");
    scripting.Append("var dialogOptions = SP.UI.$create_DialogOptions(); \n");
    scripting.Append("dialogOptions.url = strPageURL; \n");
    scripting.Append("dialogOptions.width = 800; \n");
    scripting.Append("dialogOptions.height = 600; \n");
    scripting.Append("dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); \n");
    scripting.Append("SP.UI.ModalDialog.showModalDialog(dialogOptions); \n");
    scripting.Append(" return false; \n");
    scripting.Append("} \n");
    scripting.Append("function CloseCallback(strReturnValue, target) \n");
    scripting.Append("{ \n");
    scripting.Append("if (strReturnValue === SP.UI.DialogResult.OK) \n");
    scripting.Append("{ \n");
    //scripting.Append("alert('ok'); \n");
    scripting.Append("} \n");
    scripting.Append("if (strReturnValue === SP.UI.DialogResult.cancel) \n");
    scripting.Append("{ \n");
    //scripting.Append("alert('cancel'); \n");
    scripting.Append("} \n");
    scripting.Append("} \n");
    scripting.Append("$(document).ready(function () { \n");
    //scripting.Append("alert('Invoco javascript'); \n");
    scripting.AppendFormat("OpenDialog('/_layouts/infoware/infoenlace.aspx?nlc={0}&vncl={1}&mg={2}'); \n", enlace.Descripcion, enlace.URL, urlImagen);
    scripting.Append("}); \n");
    scripting.Append("}, 'sp.js'); \n");
    scripting.Append("//]]>");
    scripting.Append("</script>");
    return scripting.ToString();
}

Ahora veamos el resultado en SP 2010:

Y ahora ejecutamos el botón Aceptar para ir al enlace indicado que es una encuesta en este caso.

En este artículo vimos como invocar el ventana de dialogo utilizando el modelo de objetos de SharePoint para JavaScript.  Es clave no perder de vista ninguno de los detalles ya que de lo contrario no funcionará como se espera.

SharePoint4Fun!,

Juan Manuel Herrera Ocheita