Compartir a través de

Trabajar con la interfaz de usuario de la cinta de opciones de SharePoint 2010

  • Artículo

Pancarta de inicio rápido de SharePoint

Introducción al desarrollo web en SharePoint 2010: Aprenda a modificar el nuevo menú de cinta de opciones de SharePoint 2010.

Última modificación: miércoles, 12 de enero de 2011

Hace referencia a: Office 2010 | SharePoint Foundation 2010 | SharePoint Server 2010 | Visual Studio | Visual Studio 2010

En este artículo
Crear un proyecto de SharePoint 2010 vacío
Agregar el código de botón para el proyecto
Implementar y probar la solución
Quitar el botón
Pasos siguientes

Se aplica a:   Microsoft SharePoint Foundation 2010 | Microsoft SharePoint Server 2010 | Microsoft Visual Studio 2010
Publicado:   abril de 2010
Proporcionado por:    Frank Rice, Microsoft Corporation

En este ejercicio, se ampliará la cinta de opciones de Microsoft SharePoint 2010 al agregar un botón personalizado que ejecuta el código del servidor. Puede utilizar este método para agregar o reemplazar botones, grupos, pestañas o incluso toda la cinta de opciones. También quita el botón personalizado de la cinta de opciones. Para completar esta tarea, debe realizar lo siguiente:

  • Crear un proyecto de SharePoint 2010 vacío

  • Agregar el código de botón para el proyecto

  • Implementar y probar la solución

  • Quitar el botón

Crear un proyecto de SharePoint 2010 vacío

En esta tarea, se crea un proyecto vacío de SharePoint 2010 en Microsoft Visual Studio 2010.

Para crear el proyecto de SharePoint

  1. Para iniciar Visual Studio 2010, haga clic en el menú Inicio, en Todos los programas, en Microsoft Visual Studio 2010 y, a continuación, haga clic en Microsoft Visual Studio 2010.

  2. En el menú Archivo, elija Nuevo y, a continuación, haga clic en Proyecto.

  3. En la sección Plantillas instaladas de la ventana de diálogo Nuevo proyecto, haga clic en Visual C#, haga clic en SharePoint y, a continuación, haga clic en  2010.

  4. Haga clic en Proyecto vacío de SharePoint de los elementos del proyecto.

  5. En el cuadro Nombre, escriba RibbonDemo y haga clic en Aceptar.

  6. En el Asistente para la personalización de SharePoint, escriba el sitio web local que desea usar para este ejercicio (como https://localhost/SampleWebSite).

  7. En el nivel de confianza, seleccione Implementar como solución de granja de servidores y, a continuación, haga clic en Finalizar.

Agregar el código de botón para el proyecto

En esta tarea, se agrega el código XML para crear el botón y el código ECMAScript (JavaScript, JScript) para darle funcionalidad.

Para agregar el código XML al proyecto

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo RibbonDemo, elija Agregar y haga clic en Nuevo elemento.

  2. En la pantalla del cuadro de diálogo Agregar nuevo elemento de la sección Plantillas instaladas, haga clic en Visual C#, haga clic en SharePoint, haga clic en 2010 y, por último, haga clic en el tipo de elemento Elemento vacío.

  3. Deje el nombre como EmptyElement1 y haga clic en Aceptar.

  4. En el Explorador de soluciones, haga clic con el botón secundario en el nodo EmptyElement1 y, a continuación, haga clic en Ver código.

  5. Elimine los contenidos del archivo Elements.xml.

  6. Agregue el siguiente código al archivo Elements.xml.

    <?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<CustomAction
  Id="DemoHelloWorldButton"
  RegistrationType="List"
  RegistrationId="101"
  Location="CommandUI.Ribbon">
    <CommandUIExtension>
      <CommandUIDefinitions>
        <CommandUIDefinition
         Location="Ribbon.Documents.New.Controls._children">
          <Button
           Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton"
           Alt="Hello World Ribbon Button"
           Sequence="10"
           Image32by32="/_layouts/images/PPEOPLE.GIF"
           Command="Demo_HelloWorld"
           LabelText="Hello World Demo"
           TemplateAlias="o2"/>
        </CommandUIDefinition>
      </CommandUIDefinitions>
      <CommandUIHandlers>
        <CommandUIHandler
         Command="Demo_HelloWorld"
         CommandAction="javascript:alert('Hello World!');" />
      </CommandUIHandlers>
    </CommandUIExtension>
  </CustomAction> 
</Elements>

    El atributo TemplateAlias define si se muestra un botón mediano (o2) o uno grande (o1). El elemento CommandAction contiene el código ECMAScript (JavaScript, JScript) que se ejecuta cuando se presiona el botón.

    Tenga en cuenta que puede agregar una imagen personalizada al botón al hacer clic con el botón secundario en el nodo RibbonDemo, al elegir Agregar y al hacer doble clic en Carpeta de SharePoint "Imágenes" asignada. A continuación, cargue la imagen de 32 x 32 o la imagen de 16 x 16 en la carpeta Images/RibbonDemo. Por último, cambie el atributo Image32by32 (o Image16by16) por _layouts/images/ribbondemo/yourimage.png.

Implementar y probar la solución

En esta tarea, se implementa la solución y se verifica que el botón se haya implementado en la cinta de opciones. A continuación, se hace clic en el botón para mostrar el cuadro de diálogo.

Para probar la solución

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo RibbonDemo y, a continuación, haga clic en Implementar.

  2. Inicie Internet Explorer y busque el sitio web que se especificó anteriormente.

  3. En el panel de navegación izquierdo, haga clic en Documentos compartidos para abrir la biblioteca de documentos compartidos.

  4. Haga clic en la pestaña Documentos en la cinta de opciones de SharePoint 2010.

    Debería ver el nuevo botón Demostración de Hello World que se agregó a la cinta de opciones.

  5. Haga clic en Demostración de Hello World. El cuadro de diálogo de JavaScript de Hello World aparece tal como se muestra en la figura 1.

    Figura 1. Cuadro de diálogo Hello World

    Cuadro de diálogo Hello World

Quitar el botón

En esta tarea, se quita el botón Demostración de Hello World.

Para quitar el botón

  1. En el Explorador de soluciones, haga clic con el botón secundario en el nodo EmptyElement1 y, a continuación, haga clic en Ver código.

  2. Agregue un comentario en el código existente al escribir <!-- adelante del elemento de apertura <CustomAction>. A continuación, escriba --> después del elemento de cierre </CustomAction>.

  3. Después del código con comentarios, inserte el siguiente código.

    <HideCustomAction Id="Ribbon.Documents.New.Controls.DemoHelloWorldButton" Location="Ribbon.Documents.New.Controls._children">
</HideCustomAction>

  4. Implemente y pruebe la solución actualizada al seguir los pasos del 1 al 4 de la tarea 3, Implementar y probar la solución.

    Verá que el botón Demostración de Hello World ya no aparece en la cinta de opciones.

Pasos siguientes