Mostrando las entradas con la etiqueta Desarrhollo SharePoint 2010. Mostrar todas las entradas
Mostrando las entradas con la etiqueta Desarrhollo SharePoint 2010. Mostrar todas las entradas

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>

lunes, 7 de noviembre de 2011

SharePoint 2010 & InfoPath 2010: Creación de formulario asociado a un flujo de trabajo – Parte I

En esta serie de artículos veremos lo fácil que es crear un formulario, subirlo a SharePoint, crear un formulario y asociarlo al formulario para evaluar la información ingresada en el formulario y en base a la evaluación ejecutar algunas acciones.

En esta primera parte veremos como crear el formulario basado en un tipo de contenido o Content Type.

Plataforma Tecnológica:

SharePoint Server 2010; Nos permitirá almacenar el formulario, ejecutarlo desde el navegador a través de InfoPath Services y lograremos conectar el formulario al flujo a través de los tipos de contenido de SharePoint.

Herramientas utilizadas:

InfoPath 2010; Para crear el formulario.
SharePoint Designer 2010; Para crear el flujo de trabajo.

Iniciemos entonces abriendo el InfoPath 2010, seleccionemos File, New, SharePoint Form Library y por ultimo la opción Desing Form.


InfoPath nos despliega un formato de formulario que vamos a utilizar agregando el Título del formulario.


Ahora vamos agregar el título de cada campo y vamos agregar un Check Box disponible en la sección Controls.






Al lado derecho nos mostrará una ventana de Fields (campos) y debemos hacer doble clic sobre el nuevo campo para cambiar el nombre del mismo.


Eso debemos hacer para cada campo del formulario, de tal forma que obtengamos como resultado la imagen siguiente:


Ahora vamos a guardar el formulario y a publicarlo en SharePoint 2010. Para ello hacemos clic sobre la imagen del disco en la parte superior izquierda de InfoPath.


Ahora publicaremos el formulario. Para ello vamos a seleccionar la pestaña File, luego Publish y luego SharePoint Server.


En la casilla Enter the location escriba la dirección del portal de SharePoint y en el sitio donde se encuentra la biblioteca donde se usará el formulario.


Ahora vamos a seleccionar la opción Site Content Type (advanced) para que luego podamos asociar este a una biblioteca y luego a un flujo de trabajo.


Luego seleccionamos la opción Create a new content type y luego presionamos el botón Next.


En la casilla Name deberá colocarse el nombre del tipo de contenido y luego la descripción, para continuar presione el botón Next.


Ahora vamos a ubicar la plantilla de formulario, para ello presionamos el botón Browse.


Ubicamos la biblioteca y colocamos un nombre al formulario, para continuar presionamos el botón Save.


Ahora solo presionemos el botón Next para continuar con el proceso.


Ahora vamos agregar los campos del formulario que se convertirán en columnas de sitio en SharePoint. Esto nos permitirá validar esta información desde el formulario en un flujo de trabajo. Para continuar presionemos el botón Add.


Seleccionamos uno de los campos del formularios y luego verificamos que esta la opción Create new site (column) y luego presionamos el botón OK.


Esto debemos de hacer con cada campo, como se muestra la imagen. Luego haz clic en el botón Next.


Revisamos la información configurada y si estamos seguros presionamos el botón Publish.


Bueno hemos finalizado la publicación del formulario presionemos el botón Close.


Si revisamos en la biblioteca el formulario veremos que allí esta almacenada.


En este artículo vimos como crear un formulario en InfoPath y luego publicarlo en SharePoint asociado a un Tipo de Contenido para su futura asociación. En la segunda parte vamos a ver como asociar el Content Type a una biblioteca de SharePoint.

SharePoint4Fun!,

Juan Manuel Herrera