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:

• SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (I)!
• SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (II)!
• SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (III)!
• SharePoint 2010- Añadiendo acciones personalizadas en la interfaz de usuario (IV)!
• SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (V)!
• SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (VI)!
• SharePoint 2010: Añadiendo acciones personalizadas en la interfaz de usuario (VII)!

Algunas referencias:

• Ejemplos de acciones personalizadas:  http://www.sharepointfix.com/2010/11/custom-actions-in-sharepoint-2010.html
• How To de MSDN: http://msdn.microsoft.com/en-us/library/ms473643.aspx
  • Sección de personalización de la Ribbon en MSDN: http://msdn.microsoft.com/en-us/library/ee539395.aspx , aquí tienes todo lo que necesitas para personalizar…te recomiendo dentro dela sección:
  • Otro ejemplo: http://msdn.microsoft.com/en-us/library/ff407458.aspx
  • Explicación detallada del esquema XML (realmente CAML) para personalizar la Ribbon: http://msdn.microsoft.com/en-us/library/ff407290.aspx
  • Las localizaciones dónde puedes añadir tus acciones personalizadas: http://msdn.microsoft.com/en-us/library/ee537543.aspx
• Como agregar JavaScritp en una custom action para la Ribbon:
  • En este ejemplo se puede ver una técnica en la que se tira de un archivo .js y en el CommandUIHandler se llama a las funciones JavaScript necesarias:
    • http://www.deviantpoint.com/post/2010/05/08/SharePoint-2010-Download-as-Zip-File-Custom-Ribbon-Action.aspx
    • http://www.sharemuch.com/2010/03/21/referencing-external-javascript-when-building-custom-sharepoint-2010-ribbon/
• Otra referencia muy buena: http://www.sharepointnutsandbolts.com/2010/01/customizing-ribbon-part-1-creating-tabs.html