Inicio > Apunte, C#, Microsoft Office SharePoint Server, SharePoint, Windows SharePoint Services > Crear menú de acciones de SharePoint programáticamente

Crear menú de acciones de SharePoint programáticamente


Cuando trabajamos con Windows SharePoint Services 3.0 y Microsoft Office SharePoint Server 2007, uno de los requerimientos más comunes con los que contamos es el de extender la interfaz gráfica de usuario para añadir o quitar acciones a la barra de menús de una lista o biblioteca.

image

Hacer esto es relatívamente sencillo usando acciones personalizadas, usualmente basta con seguir estos pasos:

1.- crear un feature que enlace con un manifiesto personalizado.

2.- crear el manifiesto personalizado el cual contendrá una acción personalizada similar a la que se muestra a continuación.

<CustomAction Id="UserInterfaceCustomActions.DocLibNewToolbar"
    RegistrationType="List"
    RegistrationId="101"
    GroupId="NewMenu"
    Rights="ManagePermissions"
    Location="Microsoft.SharePoint.StandardMenu"
    Sequence="1000"
    Title="MY DOCLIB NEW MENU TOOLBAR BUTTON">
    <UrlAction Url="/_layouts/CustomActionsHello.aspx?NewMenu"/>
</CustomAction>

3.- Publicar el feature en la granja y activarlo para el sitio deseado.

Easy peasy (relativamente hablando). Puedes ver más información en este enlace de MSDN, o en este artículo de Joe Ferner.

Pero hay veces en las que por cualquier motivo no podemos usar las acciones personalizadas: bien sea porque estamos desarrollando una página de aplicación, bien sea porque estamos creando un front-end totalmente diferente. En estos casos, querríamos mostrar la barra de menú programáticamente. ¿Qué hacer?

El primer paso es que necesitamos crear una clase que herede de Microsoft.SharePoint.WebControls.ToolBarMenuButton. Esta clase representa un menú en una barra de herramientas (por ejemplo, “New”, “Actions” o “Settings” en la imagen de arriba).

Lo primero que querremos hacer  hacer es seleccionar una acción por default. Para ello nos creamos una propiedad (DefaultAction) o algo así. Si no queremos acción por default, no hacemos nada y ya. La magia, en cualquier caso, ocurre cuando sobreescribimos CreateChildControls, de esta forma:

[SharePointPermission(SecurityAction.Demand, ObjectModel = true)]
protected override void CreateChildControls()
{
    base.CreateChildControls();
    if (!string.IsNullOrEmpty(this._defaultAction))
    {
        base.MenuControl.MenuFormat = MenuFormat.ArrowSplitButton;
        base.MenuControl.ClientOnClickScript = this._defaultAction;
        base.MenuControl.HoverCellInActiveCssClass = "ms-splitbutton";
        base.MenuControl.HoverCellActiveCssClass = "ms-splitbuttonhover";
    }
}

Lo único que hacemos es ver si la propiedad _defaultAction contiene algo, en cuyo caso creamos la acción por defecto (por ello asignamos los estilos de split-button. La acción por default debe ser un JavaScript y debe estar presente en la página donde se ejecute esta acción (ya sea a través de un ClientScript.RegisterClientScriptBlock o algún otro método que elijas). Si nunca tendrás una acción por default, no hagas nada en CreateChildControls.

Lo siguiente que nos interesa es añadir los hijos a nuestro menú. Por ejemplo, el menú “New” sólo muestra un hijo: “Add Item”, mientras que “Actions” muestra cuatro: “Edit in Datasheet”, “Export to spreadsheet”, “View RSS feed” y “Alert me”. En mi ejemplo, voy a crear tres hijos: “Vista previa”, “Editar tema”, “Eliminar tema”.

protected override void AddMenuItems()
{
    base.AddMenuItem(string.Format("{0}Preview", ID),
            "Vista previa",
            "/_layouts/images/searchsettings.gif",
            "Vista preliminar de un tema seleccionado.",
            "Preview.aspx",
            string.Empty);

    base.AddMenuItem(string.Format("{0}Edit", ID),
            "Editar tema",
            "/_layouts/images/MenuEditPictures.gif",
            "Edita las propiedades de un tema seleccionado.",
            string.Empty,
            "EditItems();");

    base.AddMenuItem(string.Format("{0}Delete", ID),
            "Eliminar temas",
            "/_layouts/images/delitem.gif",
            "Elimina los temas seleccionados. ",
            string.Empty,
            "DeleteItems();");
}

Cada llamada a AddMenuItem es quien en realidad añade el hijo. Esta llamada tiene varios parámetros.

1.- En primer lugar, pasamos un ID. Esta puede ser una cadena de texto cualquiera, el chiste es que identifique de forma única al comando.

2.- El segundo parámetro es el texto de nuestro menú.

3.- El siguiente es la URL hacia la imagen que queremos mostrar. Yo me basé en las que ya existen dentro de la carpeta de layouts.

4.- Si queremos que al hacer clic el menú navegue hacia cierta página, usamos el cuarto parámetro para poner dicha URL. El primer elemento del ejemplo navegará hacia la página Preview.aspx.

5.- Por último, si en lugar de navegar queremos ejecutar un JavaScript, usamos el último parámetro. En mi caso, nótese que en la segunda y tercera opción del menú mando llamar a las funciones EditItems y DeleteItems, respectivamente, por lo que la página donde se renderize este control deberá incluir esas funciones o el asunto no funcionará.

Por cierto, puedes sobreescribir la propiedad Text para establecer el texto del menú.

He aquí el código completo de mi clase de ejemplo.

using System;
using System.Security.Permissions;
using Microsoft.SharePoint;
using Microsoft.SharePoint.Security;
using Microsoft.SharePoint.WebControls;

namespace Menus
{
    class ActionsThemeMenu : ToolBarMenuButton
    {
        private string _defaultAction;

        public ActionsThemeMenu()
        {
            _defaultAction = string.Empty;
        }

        public override string Text
        {
            get { return "Acciones"; }
        }

        protected override void AddMenuItems()
        {
            base.AddMenuItem(string.Format("{0}Preview", ID),
                    "Vista previa",
                    "/_layouts/images/searchsettings.gif",
                    "Vista preliminar de un tema seleccionado.",
                    "Preview.aspx",
                    string.Empty);

            base.AddMenuItem(string.Format("{0}Edit", ID),
                    "Editar tema",
                    "/_layouts/images/MenuEditPictures.gif",
                    "Edita las propiedades de un tema seleccionado.",
                    string.Empty,
                    "EditItems();");

            base.AddMenuItem(string.Format("{0}Delete", ID),
                    "Eliminar temas",
                    "/_layouts/images/delitem.gif",
                    "Elimina los temas seleccionados. ",
                    string.Empty,
                    "DeleteItems();");
        }

        [SharePointPermission(SecurityAction.Demand, ObjectModel = true)]
        protected override void CreateChildControls()
        {
            base.CreateChildControls();
            if (!string.IsNullOrEmpty(this._defaultAction))
            {
                base.MenuControl.MenuFormat = MenuFormat.ArrowSplitButton;
                base.MenuControl.ClientOnClickScript = this._defaultAction;
                base.MenuControl.HoverCellInActiveCssClass = "ms-splitbutton";
                base.MenuControl.HoverCellActiveCssClass = "ms-splitbuttonhover";
            }
        }
    }
}

Y ya con esto tenemos nuestro menú definido. Ahora lo que sigue es crear una instancia de la clase Microsoft.SharePoint.WebControls.ToolBar y en su colección Buttons, añadir el control que hemos creado:

ToolBar toolbar = Page.LoadControl("/_controltemplates/ToolBar.ascx") as ToolBar;
toolbar.Buttons.Controls.Add(new ActionsThemeMenu());
Controls.Add(toolbar);

En este ejemplo, creamos un cotrol ToolBar y le añadimos nuestro recién creada clase, en mi caso, ActionsThemeMenu. Y con eso tenemos. Abajo muestro una imagen de cómo se ve en acción nuestro menú.

image

  1. Aún no hay comentarios.
  1. No trackbacks yet.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s