Create Custom Ribbon Actions in Visual Studio

This example creates an “Email to Someone” custom action in the Ribbon of lists and libraries.

emailtosomeone

  1. Create a new SharePoint empty project (Sandbox solution);
  2. Add a new item >> Empty Element;
  3. Sample code for Elements.xml
    <?xml version=”1.0″ encoding=”utf-8″ ?>
    <Elements xmlns=”http://schemas.microsoft.com/sharepoint/”&gt;
    <CustomAction
    Id=”CAAlertRibbonButton”
    RegistrationId=”100″
    RegistrationType=”List”
    Location=”CommandUI.Ribbon.ListView”
    Sequence=”5″
    Title=”Alert Ribbon Button”>
    <CommandUIExtension>
    <CommandUIDefinitions>
    <CommandUIDefinition
    Location=”Ribbon.ListItem.Groups._children”>
    <Group
    Id=”MiTek.ListItem”
    Sequence=”80″
    Description=”MiTek group”
    Title=”MiTek Custom”
    Template=”Ribbon.Templates.Flexible2″>
    <Controls Id=”MiTek.SharePoint.Administration.Application.Group.Controls”>
    <Button
    Id=”MiTek.Ribbon.ListItem.EmailSomeone”
    Command=”CMDRibbonButton”
    Image32by32=”/Style%20Library/Custom%20Images/emailIcon.png”
    LabelText=”Email To Someone”
    TemplateAlias=”o2″
    Sequence=”20″ />
    </Controls>
    </Group>
    </CommandUIDefinition>
    <CommandUIDefinition
    Location=”Ribbon.ListItem.Scaling._children”>
    <MaxSize
    Id=”MiTek.Ribbon.ListItem.MaxSize”
    Sequence=”15″
    GroupId=”MiTek.ListItem”
    Size=”LargeLarge” />
    </CommandUIDefinition>
    <!– Put in the Actions Group –>
    <!–CommandUIDefinition Location=”Ribbon.ListItem.Actions.Controls._children”>
    <Button
    Id=”Ribbon.ListItem.Actions.Controls.EmailButton”
    Alt=”Alert Ribbon Button”
    Sequence=”5″
    Command=”CMDAlertRibbonButton”
    Image32by32=”/_layouts/images/menulistsettings.gif”
    Image16by16=”/_layouts/images/itdcl.gif”
    LabelText=”Email To Someone”
    TemplateAlias=”o1″ />
    </CommandUIDefinition–>
    </CommandUIDefinitions>
    <CommandUIHandlers>
    <CommandUIHandler
    Command=”CMDRibbonButton”
    CommandAction=”javascript:
    function resultCallback(result, value)
    {
    SP.UI.Notify.addNotification(‘Success!’);
    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
    }var ctx = SP.ClientContext.get_current();
    var items = SP.ListOperation.Selection.getSelectedItems(ctx);
    var myItems = ”;
    var i;for (i in items)
    {
    myItems += ‘|’ + items[i].id;
    }

    if(myItems != ”)
    {
    var options = {
    url: ‘{SiteUrl}/Pages/Page-to-Test-List.aspx?Items=’ + myItems + ‘&amp;ListType=100&amp;ListId={SelectedListId}&amp;Source={Source}’,
    tite: ‘My Page’,
    allowMaximize: false,
    showClose: true,
    width: 500,
    height: 500,
    dialogReturnValueCallback: resultCallback };

    SP.UI.ModalDialog.showModalDialog(options);
    } else {
    alert(‘Please select at lease one item’);
    }

    ” />
    </CommandUIHandlers>
    </CommandUIExtension>
    </CustomAction>

    <CustomAction
    Id=”CAAlertRibbonButton”
    RegistrationId=”101″
    RegistrationType=”List”
    Location=”CommandUI.Ribbon”
    Sequence=”5″
    Title=”Alert Ribbon Button”>
    <CommandUIExtension>
    <CommandUIDefinitions>
    <CommandUIDefinition
    Location=”Ribbon.Documents.Groups._children”>
    <Group
    Id=”MiTek.Documents”
    Sequence=”80″
    Description=”MiTek group”
    Title=”MiTek Custom”
    Template=”Ribbon.Templates.Flexible2″>
    <Controls Id=”MiTek.SharePoint.Administration.Application.Group.Controls”>
    <Button
    Id=”MiTek.Ribbon.Documents.EmailSomeone”
    Command=”CMDRibbonButton”
    Image32by32=”/Style%20Library/Custom%20Images/emailIcon.png”
    LabelText=”Email To Someone”
    TemplateAlias=”o2″
    Sequence=”20″ />
    </Controls>
    </Group>
    </CommandUIDefinition>
    <CommandUIDefinition
    Location=”Ribbon.Documents.Scaling._children”>
    <MaxSize
    Id=”MiTek.Ribbon.Documents.MaxSize”
    Sequence=”15″
    GroupId=”MiTek.Documents”
    Size=”LargeLarge” />
    </CommandUIDefinition>
    <!– Put in the Actions Group –>
    <!–CommandUIDefinition Location=”Ribbon.ListItem.Actions.Controls._children”>
    <Button
    Id=”Ribbon.ListItem.Actions.Controls.EmailButton”
    Alt=”Alert Ribbon Button”
    Sequence=”5″
    Command=”CMDAlertRibbonButton”
    Image32by32=”/_layouts/images/menulistsettings.gif”
    Image16by16=”/_layouts/images/itdcl.gif”
    LabelText=”Email To Someone”
    TemplateAlias=”o1″ />
    </CommandUIDefinition–>
    </CommandUIDefinitions>
    <CommandUIHandlers>
    <CommandUIHandler
    Command=”CMDRibbonButton”
    CommandAction=”javascript:
    function resultCallback(result, value)
    {
    SP.UI.Notify.addNotification(‘Success!’);
    SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);
    }

    var ctx = SP.ClientContext.get_current();
    var items = SP.ListOperation.Selection.getSelectedItems(ctx);
    var myItems = ”;
    var i;

    for (i in items)
    {
    myItems += ‘|’ + items[i].id;
    }

    if(myItems != ”)
    {
    var options = {
    url: ‘{SiteUrl}/Pages/Page-to-Test-List.aspx?Items=’ + myItems + ‘&amp;ListType=101&amp;ListId={SelectedListId}&amp;Source={Source}’,
    tite: ‘My Page’,
    allowMaximize: false,
    showClose: true,
    width: 500,
    height: 500,
    dialogReturnValueCallback: resultCallback };

    SP.UI.ModalDialog.showModalDialog(options);
    } else {
    alert(‘Please select at lease one item’);
    }

    ” />
    </CommandUIHandlers>
    </CommandUIExtension>
    </CustomAction>

    </Elements>

  4. Deploy the project
Advertisements
This entry was posted in SharePoint 2010, Visual Studio 2010. Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s