SharePoint 2010: Apertura de ventanas modales y páginas desde acciones personalizadas (II)!

Siguiendo con la serie de posts sobre como abrir ventanas modales  y páginas desde acciones personalizadas, en esta ocasión vamos a ver como crear estas acciones de forma declarativa. Básicamente, si queremos crear una acción personalizada para abrir una ventana modal crearemos un proyecto de tipo vacío en Visual Studio 2010 y le añadiremos un elemento de tipo vacío. Dicho elemento constará de un archivo elements.xml que configuraremos de acuerdo al siguiente código:

   1: <?xml version="1.0" encoding="UTF-8"?>

   2: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

   3:     <CustomAction Location="CommandUI.Ribbon" RegistrationId="101" RegistrationType="List" Id="80AFCE46-0DD4-4A11-9B1B-9B8FBCD38AAD">    

   4:         <CommandUIExtension>

   5:         <CommandUIDefinitions>

   6:             <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">

   7:                     <Button Id="Ribbon.Documents.Manage.Controls.AbrirDialogoByCommandHandler" TemplateAlias="o1" LabelText="Abrir Diálogo" Image32by32="/_layouts/images/SPCAOpenDialog/open.gif" Command="OpenDialog" Sequence="1981"/>

   8:             </CommandUIDefinition>

   9:         </CommandUIDefinitions>                

  10:         <CommandUIHandlers>            

  11:             <CommandUIHandler Command="OpenDialog" CommandAction="javascript:

  12:                 function CallDETCustomDialog(dialogResult, returnValue)

  13:                 { 

  14:                     SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

  15:                 }

  16:                 var options = {

  17:                     url: '{SiteUrl}' + '/Documentos%20compartidos/Forms/Todos%20los%20documentos.aspx',

  18:                     title: 'Detalle de elemento', 

  19:                     allowMaximize: false,

  20:                     showClose: true,

  21:                     width: 500, 

  22:                     height: 300,

  23:                     dialogReturnValueCallback: CallDETCustomDialog }; 

  24:                     SP.UI.ModalDialog.showModalDialog(options);">                

  25:             </CommandUIHandler>            

  26:             </CommandUIHandlers>

  27:         </CommandUIExtension>        

  28:     </CustomAction>

  29: </Elements>

Como vemos, lo más interesante en la acción es que podemos especificar como CommandAction un bloque de código JavaScript en el que levantemos una ventana modal. Si lo que queremos es hacer una redirección, simplemente especificamos la Url a la que qureemos ir en el CommandAction.

   1: <?xml version="1.0" encoding="UTF-8"?>

   2: <Elements xmlns="http://schemas.microsoft.com/sharepoint/">

   3:     <CustomAction Location="CommandUI.Ribbon" RegistrationId="101" RegistrationType="List" Id="D6D6D9AE-64D6-4B26-96BF-B2F942260821">        

   4:         <CommandUIExtension>        

   5:             <CommandUIDefinitions>

   6:                 <CommandUIDefinition Location="Ribbon.Documents.Manage.Controls._children">

   7:                     <Button Id="Ribbon.Documents.Manage.Controls.AbrirDialogoByUrlAction" TemplateAlias="o1" LabelText="Abrir Diálogo (2)" Image32by32="/_layouts/images/SPCAOpenDialog/open.gif" Command="RedirectToPage" Sequence="1982"/>

   8:                 </CommandUIDefinition>

   9:             </CommandUIDefinitions>

  10:             <CommandUIHandlers>

  11:                 <CommandUIHandler Command="RedirectToPage" CommandAction="~site/Documentos%20compartidos/Forms/Todos%20los%20documentos.aspx?List={ListId}&amp;ID={ItemId}">

  12:                 </CommandUIHandler>

  13:             </CommandUIHandlers>

  14:         </CommandUIExtension>        

  15:     </CustomAction>

  16: </Elements>

Otros posts relacionados:

Algunas referencias:

Visual Studio 11: Disponible la release de octubre del training kit!

Ya tenemos disponible para descarga la primera release del training kit de octubre para Visual Studio 11. En la misma página os podréis descargar el kit junto con el Web Platform Installer Preview. En cuanto a contenido del training kit, el resumen es el siguiente (de los laboratorios incluidos):

  • Visual Studio Development Environment:
    • A Lap Around the Visual Studio 11 Development Environment.
  • Languages:
    • Asynchronous Programming in .NET 4.5 with C# and Visual Basic.
  • Web:
    • What’s New in ASP.NET and Visual Studio 11 Developer Preview.
    • What’s New in ASP.NET Web Forms 4.5.
    • Build RESTful APIs with WCF Web API.
  • Application Lifecycle Management:
    • Building the Right Software: Generating Storyboards and Collecting Stakeholder Feedback with Visual Studio 11.
    • Agile Project Management in Team Foundation Server 11.
    • Making Developers More Productive with Team Foundation Server 11.
    • Diagnosing Issues in Production with IntelliTrace and Visual Studio 11.
    • Exploratory Testing and Other Enhancements in Microsoft Test Manager 11.
    • Unit Testing with Visual Studio 11: MSTest, NUnit, xUnit.net, and Code Clone.
  • Windows Metro Style Apps:
    • Windows 8 Developer Preview Hands on Labs from BUILD.

image