Mostrando las entradas con la etiqueta Java Script. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Java Script. Mostrar todas las entradas

miércoles, 5 de junio de 2013

Saliendo de la caja llamada IFRAME en las Apps para SharePoint 2013

El nuevo modelo Apps esta diseñado para que estas se ejecute en un dominio asilado diferente del domino donde se ejecutan los sitios de SharePoint, por lo que para desplegar un App Part en un sitio de SharePoint es necesario utilizar un IFRAME,el problema de esto es que hay riesgos de seguridad y además un perímetro físico que es establecido por las dimensiones del App Part, por lo que todo lo que muestre realmente se esta ejecutando en el dominio aislado.

Esto hace complicado el ejecutar operaciones fuera del Iframe, cosas tan sencillas como colocar un enlace o link que redireccione a otra página lo hará dentro del Iframe a menos que hagamos uso del objeto window de javascript de la siguiente forma window.location.href = url.

Pero esto no funciona en el App Part ya que es bloqueado, que podemos hacer?

Utilizar la propiedad Top del objeto Window de la siguiente forma:

top.window.location.href = url

Para ver un ejemplo del segmento de código quedaría así:

<a  onclick=”top.window.location.href='url'” target='_blank'>Read More</a>

Eso es todo, Apps4Fun!,

Juan Manuel Herrera Ocheita

ACTUALIZACION 14/JUL/2013

En Windows 7 y IE 8 no funciona top.window.location.href, por lo que es mejor utilizar parent.location.href:

      parent.location.href = url;

domingo, 5 de agosto de 2012

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:

image

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

image

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

sábado, 4 de agosto de 2012

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

Una solución (WSP) para 2007 ahora el portal migrado en 2010 se necesita que levante una ventana de dialogo de 2010 que permita desplegar un mensaje y un enlace o link que el usuario podrá acceder.

Para utilizar la ventana de Dialogo necesitamos crear una Application Page que nos servirá como un contenedor para el mensaje y el enlace.  La estructura de esta página es la siguiente:

<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Page Language="C#" MasterPageFile="~/_layouts/application.master" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase"
EnableViewState="false" EnableViewStateMac="false" %>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
</asp:Content>
<asp:Content ID="PageTitle" runat="server" ContentPlaceHolderID="PlaceHolderPageTitle">
</asp:Content>
<asp:Content ID="PageTitleInTitleArea" runat="server" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea">
</asp:Content>

image

* La buena noticia es que aunque estemos haciendo referencia al ensamblado de SharePoint Version 12 que es equivalente a SharePoint 2007 funciona para 2010 también.

Esta página será depositada en un directorio virtual para que pueda ser accedido desde cualquier sitio de SharePoint y la ubicación es será: /_layotus/[miempresa] en el proyecto ser verá de la siguiente forma:

image

* Otra cosa de no preocuparse aunque apunta al directorio 12 SharePoint 2010 interpretará que es para el SharePoint Root, así que lo depositará en su lugar.  LAYOUTS es el directorio virtual que esta accesible para cualquier sitio dentro de SharePoint.

La lógica de la página es la siguiente:

1) Recibirá los parámetros; nombre del enlace, el vínculo y la dirección URL de una imagen.  Con Script de ASP.NET que se ejecutará de lado del servidor vamos a leerlos y a depositar en los controles de servidor de la página ASP.NET. 

image

2) Serán desplegados en la página que estará embebida dentro de la ventana de dialogo de SP2010.  Abajo la declaración en ASP.NET de los controles

image

3) Con la ayuda de JavaScript a través de los botones Aceptar y Cancelar daremos la funcionalidad a la página cerrando la ventana de Dialogo y dirigiéndonos al vínculo que recibió la página como parámetro.

image

En esta primera parte vimos como crear una Application Page que funcionará como un contenedor para desplegar la información y proveer la funcionalidad esperada que será embebida en la ventana de Dialogo de SP 2010.  El reto aquí es que estamos desarrollándolo en una solución de 2007 debido a que ya existía esta y solo la estamos mejorando.

En la segunda parte revisaremos como invocar la ventana de dialogo a través del framework SP.JS disponible en SP2010.

Happy SharePointing!,

Juan Manuel Herrera

Ahora el detalle de todo el código de la página:

<%@ Assembly Name="Microsoft.SharePoint, Version=12.0.0.0, Culture=neutral, PublicKeyToken=71e9bce111e9429c" %>

<%@ Page Language="C#" MasterPageFile="~/_layouts/application.master" Inherits="Microsoft.SharePoint.WebControls.LayoutsPageBase"
    EnableViewState="false" EnableViewStateMac="false" %>

<script runat="server">
    protected override void OnLoad(EventArgs e)
    {
        string valorMensaje = Request.QueryString.Get("nlc");
        if (string.IsNullOrEmpty(valorMensaje))
            valorMensaje = "no paso parametro";
        lblSiteTitle.Text = valorMensaje;

        string valorUrl = Request.QueryString.Get("VNCL");

        string valorImg = Request.QueryString.Get("MG");

        LBRedireccion.Text = valorUrl;

        if (string.IsNullOrEmpty(valorImg))
            Imagen.Visible = false;
        else
        {
            Imagen.Visible = true;
            Imagen.ImageUrl = valorImg;
        }
    }
</script>

<asp:Content ID="Main" ContentPlaceHolderID="PlaceHolderMain" runat="server">
    <link href="/_layouts/images/styles/InfoEnlace.css" type="text/css" rel="stylesheet" />

    <script type="text/javascript">
        //<![CDATA[
        function getUrlParams() {
            var result = {};
            var params = (window.location.search.split('?')[1] || '').split('&');
            for (var param in params) {
                if (params.hasOwnProperty(param)) {
                    paramParts = params[param].split('=');
                    result[paramParts[0]] = decodeURIComponent(paramParts[1] || "");
                }
            }
            return result;
        }
        function OpenNewWindow() {
            var results = getUrlParams();
            var urlPage = results["vncl"];
            window.open(urlPage, "_blank");
            window.frameElement.commitPopup();
        }

        function CloseDialog() {
            window.frameElement.commitPopup();
        }
        //]]>
    </script>

    <span id="MensajeOculto" runat="server" style="display: none"></span>
    <div class="InfoEnlace-Contenedor">
        <div class="InfoEnlace-Contenido">
            <table cellpadding="4" cellspacing="0" class="InfoEnlace-Tabla">
                <tr>
                    <td>
                        <asp:Image ID="Imagen" runat="server" CssClass="InfoEnlace-Imagen" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="lblSiteTitle" runat="server" CssClass="InfoEnlace-Titulo" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Label ID="LBRedireccion" runat="server" CssClass="InfoEnlace-URL" />
                    </td>
                </tr>
                <tr>
                    <td>
                        <asp:Button ID="Aceptar" runat="server" Text="Aceptar" OnClientClick="OpenNewWindow();" />&nbsp;&nbsp;
                        <asp:Button ID="Cancelar" runat="server" Text="Cancelar" OnClientClick="CloseDialog();" />
                    </td>
                </tr>
            </table>
        </div>
    </div>
</asp:Content>
<asp:Content ID="PageTitle" runat="server" ContentPlaceHolderID="PlaceHolderPageTitle">
</asp:Content>
<asp:Content ID="PageTitleInTitleArea" runat="server" ContentPlaceHolderID="PlaceHolderPageTitleInTitleArea">
</asp:Content>

martes, 25 de agosto de 2009

Como cambiar dinámicamente un enlace de una página maestra en SharePoint

Hace poco tiempo un cliente me solicitó que cambiará el enlace de la página de inicio dependiendo de la dirección donde estaba ubicado el usuario. Si estaba en los sitios en Inglés o en Español.

Prerrequisitos para los lectores de este artículo:

  • Este familiarizados con la interface de SharePoint, por lo menos hallan subido documentos a librerías y alguna vez hayan cambiado la página maestra del portal o de algún sitio de SharePoint.
  • Este artículo asume que esta trabajando sobre una plantilla de colección de sitios Publishing Colaboration, que nos permite modificar las páginas maestras de los sub-sitios.
  • Utiliza como herramienta de desarrollo Visual Studio.
  • Tiene nociones básicas sobre Java Script y páginas maestras en ASP.Net 2.0.

Primero vamos a crear una función en javascript para reemplazar la dirección Web de una etiqueta de HTML <a hef> basado en la dirección Web donde esta navegando el usuario, como lo muestro abajo:

   1:  function VerificaUbicacion()


   2:  {


   3:  var x= document.getElementById('HomeLink');


   4:  var url = ""+document.location;


   5:  if (url.indexOf("Spanish") > -1)


   6:  {


   7:      var enlace = document.getElementById('HomeLink');


   8:      var url2 = ""+enlace.href;


   9:      enlace.href = url2.replace(/english/i,"Spanish");


  10:  }


  11:  };





  • HomeLink será el Id de la etiqueta <a href> que veremos luego.


  • document.location obtiene el url actual. Las comías “” son para indicarle a javascript que es el objeto que va a crear es de tipo string; el tipo string tiene un método indexOf() para buscar dentro de la cadena de caracteres el valor que nos interesa. –1 Indica que no lo encontró arriba de eso devuelve el índice donde inicia el primer carácter del valor encontrado.


  • Otro método de un objeto tipo string es replace, el primer valor debe de estar entre caracteres scape “/” y la i indica que no es sensible a las mayúsculas o minúsculas. Lo que estamos diciéndole es que reemplace el valor english por Spanish.



Ahora vamos a guardar este código en un archivo js que llamaremos VerificaUbicacion.js (Podemos utilizar algún programa como Javascript minimizer para compactar el archivo y hacerlo mas eficiente). Este lo podemos subir a una librería de estilos dentro de algún sitio de SharePoint para luego hacer referencia al mismo (este paso esta fuera del alcance del artículo, por ser una tarea tan sencilla de realizar).



Ahora vamos a modificar la página maestra para:




  1. Descargar una copia de la página maestra que vamos a utilizar para agregar este enlace de la página de inicio o Home. Para acceder directamente escriba la siguiente dirección: http://miservidor/_catalogs/masterpage . Esto nos llevará directamente a la librería de páginas maestras. Ahora seleccione la página maestra y en el menú que aparece sobre el nombre de la página seleccione la opción Send To:Download a Copy.


  2. Abra el archivo .master en Visual Studio o en Notepad.


  3. Agregar la referencia del archivo VerificaUbicacion.js dentro de las etiquetas <head> de la siguiente forma:



  4.    1:   <script type='text/javascript' 


       2:               src='/StyleLibrary/VerificaUbicacion.js' language="javascript">


       3:  </script>


       4:   




  5. Agregar el enlace de la página de inicio y la invocación del método VerificaUbicacion() en el método OnClick de la etiqueta <a href>. Comente el logo que SharePoint predeterminadamente coloca en las páginas maestras por el logo de home. Ud. puede ubicarlo de mejor forma como mejor le convenga.



  6.    1:  <td class="ms-globalTitleArea" >


       2:      <table width="100%" cellpadding="0" cellspacing="0" border="0">


       3:      <tr>


       4:      <td>


       5:      <a href="/English" id="HomeLink" onclick="VerificaUbicacion()">


       6:            <img src="/_layouts/images/home.gif" alt="Home" />


       7:       </a>


       8:       </td>


       9:           <!--


      10:          <td id="GlobalTitleAreaImage" class="ms-titleimagearea">


      11:          <sharepoint:sitelogoimage id="onetidHeadbnnr0" logoimageurl="/_layouts/images/titlegraphic.gif"


      12:          runat="server" />


      13:          </td>


      14:           -->


      15:          ..


      16:  </table>




  7. Subir la página maestra a la librería de páginas maestras del sitio de SharePoint. No se olvide de publicar la página maestra y luego de aprobar dicha publicación sino no podrá ver los cambios realizados.


  8. Seleccione la nueva página maestra como la página predeterminada de ese sitio. Para ello vaya a: Site Actions, Site Settings, Master Page.



Este ejemplo resuelve de una forma muy particular y sencilla la forma de cambiar la dirección web de un enlace basado en la dirección actual del usuario conectado dentro de la página maestra. No soy un experto en javascript pero me fue de mucha utilidad resolverlo de esta forma, combinando la disponibilidad de las páginas maestras en todos los sitios de SharePoint.



Eso es todo amigos, nos vemos hasta la próxima,



Manolo Herrera