Ribbon Customizations and CustomActions in SharePoint 2010

In the beginning of October 2011 we did the second off-site meeting with our User Groups in Bansko (Bulgaria). Below are the slides and demo code from my presentation.

I covered the development of customizations, for SharePoint 2010 user interface, meaning custom actions, ribbon elements, notifications, statuses and dialog framework.

"Developing with the New User Interface Features in Microsoft SharePoint Server 2010" by Tihomir Ignatov

View more presentations from Tihomir Ignatov

You could download the full Visual Studio project from here:http://db.tt/eZncKy2E

It contains an extra code for playing with bulk selection, ribbon button and modal dialog. Feel free to use it 

Simple ribbon button

                <!-- Simple button -->
                <CommandUIDefinition Location="Ribbon.Library.Share.Controls._children">
                    <Button Id="Ribbon.Library.Share.SugbgButton"
                             Command="SugbgButtonCommand"
                             Image32by32="/_layouts/images/PPEOPLE.GIF"
                             LabelText="Hello SUGBG"
                             TemplateAlias="o1" />
                </CommandUIDefinition>

Tooltip ribbon button

                <!-- ToolTip button -->
                <CommandUIDefinition Location="Ribbon.Documents.New.Controls._children">
                    <Button Id="Ribbon.Documents.New.Ribbontest"
                             Alt ="Test Button"
                             Sequence="5"
                             Command="RibbonTestCommand" 
                             LabelText="Test Button"
                             Image32by32="/_layouts/images/QuickTagILikeIt_32.png"
                             TemplateAlias="o1"
                             ToolTipTitle="My test button tool tip"
                             ToolTipDescription="My tool tip description"
                             ToolTipShortcutKey="Ctrl-T,E"
                             ToolTipImage32by32="/_layouts/images/mwac_infob.gif"
                             ToolTipHelpKeyWord="WSSEndUser"/>
                </CommandUIDefinition>

Replace an existing ribbon button (New Folder)

                <!-- Replace a button -->
                <CommandUIDefinition Location="Ribbon.Documents.New.NewFolder" >
                    <Button Id="Ribbon.Documents.New.NewFolder.MyNewFolderButton"
                             Alt ="Test button"
                             Sequence="5"
                             Command="MyNewFolderButtonCommand"
                             LabelText="New Folder" 
                             Image32by32="/_layouts/images/menureply.gif"
                             TemplateAlias="o1" />
                </CommandUIDefinition>

Add ribbon button to edit form

                <!--Add a button to the edit form-->
                <CommandUIDefinition Location="Ribbon.DocLibListForm.Edit.Actions.Controls._children" >
                    <Button Id="Ribbon.DocLibListForm.Edit.Actions.MySettings"
                             Command="EditFormButtonCommand" 
                             Description="Go to settings"
                             LabelText="Site Settings"
                             Image32by32="_layouts/images/settingsIcon.png"
                             TemplateAlias="o2"
                             Sequence="91"/>
                </CommandUIDefinition>

All elements above are using the these handlers:

            <CommandUIHandlers>
                <CommandUIHandler Command="SugbgButtonCommand"
                                   CommandAction="javascript:HelloRibbon();" />
                
                
                <CommandUIHandler Command="RibbonTestCommand"
                                   CommandAction="javascript:alert('RIBBON-test was clicked');" />


                <CommandUIHandler Command="MyNewFolderButtonCommand"
                                   CommandAction="javascript:alert('I replaced the OOB New Folder :)');" />

                
                <CommandUIHandler Command="EditFormButtonCommand"
                                   CommandAction="/_layouts/settings.aspx" />
            </CommandUIHandlers>

HelloRibbon() function and related javascriptcode also could be deployed with CustomAction

    <CustomAction Id="Ribbon.Library.Actions.NewButton.Script"
                   Location="ScriptLink"
                   ScriptBlock="
                   function HelloRibbon()
                   {
                        alert('Hello, Ribbon Script is here!');
                    }" />

Very powerful Visual Studio add-in for quick start with ribbon customizations are SharePoint 2010 Extensibility Projects and especially SharePoint Ribbon VSIX

 

Other CustomActions

    <!-- Custom Action Group in Site Settings page -->
    <CustomActionGroup
        Id="MyActionGroup"
        Description="This group contains all my custom actions."
        Title="My Action Group"
        Location="Microsoft.SharePoint.SiteSettings"
        Sequence="30"
         ImageUrl="/_layouts/images/mwac_textpb.gif"/>

    <!-- Custom Action in Custom Action Group in Site Settings page -->
    <CustomAction
        Id="MyCustomAction"
        Description="This link is a custom action."
        Title="My Custom Action"
        GroupId="MyActionGroup"
        Location="Microsoft.SharePoint.SiteSettings"
        Rights="ManageWeb"
        RequireSiteAdministrator="FALSE"
        Sequence="20">
        <UrlAction Url="~sitecollection/_layouts/create.aspx" />
    </CustomAction>

    <!-- Custom Action in Site Actions Menu -->
    <CustomAction
        Id="MyNewCustomAction"
        Description="This menu item is a new custom action."
        Title="My New Custom Action"
        GroupId="SiteActions"
        Location="Microsoft.SharePoint.StandardMenu"
        ImageUrl="/_layouts/images/mwac_thumbb.gif"
        Sequence="10">
        <UrlAction Url="~sitecollection/_layouts/settings.aspx" />
    </CustomAction>

    <!--Adding Custom action for items in Document Library-->
    <CustomAction Id="ListMenuForMyPage"
        RegistrationType="List"
        RegistrationId="101"
        ImageUrl="/_layouts/images/GORTL.GIF"
        Location="EditControlBlock"
        Sequence="105"
        Title="My Page" >
            <UrlAction Url="DispForm.aspx?ItemId={ItemId}&amp;ListId={ListId}"    />
    </CustomAction>

Playing with Dialogs – below is the client code which shows dialogs, using Sharepoint 2010dialog framework

<a href="javascript:showMyDialog();" id="ShaowMydialogID" style="display:inline;">
Show MyDialog
</a>

<!--Define dialog inline-->

<div id="SugbgDiv" style="display:none; padding:5px">

    <input type="text" value="SUGBG dialog" />

    <input type="button" value="OK" onclick="closeDialog()" />

</div>







<!--Load Sharepoint ScriptLink-->

<SharePoint:ScriptLink ID="SPScript" runat="server" Localizable="false" LoadAfterUI="true" />







<!--Open Dialogs-->

<script language="ecmascript" type="text/ecmascript">




    var myDialog;


    var sid;





    function showMyDialog() {


        var MyDialogDiv = document.getElementById("SugbgDiv"); MyDialogDiv.style.display = "block";





        var options = { html: MyDialogDiv, width: 200, height: 200 };


        myDialog = SP.UI.ModalDialog.showModalDialog(options);





    }





    function closeDialog() {


        myDialog.close();

</script>

You could show everything in the modal window, see how to use it to show en ExcelServices chart as image, using REST

<a href="javascript:ExcelChart();" id="ExcelChartID" style="display:inline;">
Excel MyDialog
</a>

<script language="ecmascript" type="text/ecmascript">

function ExcelChart() {
    var options = { url: 'http://intranet/_vti_bin/ExcelRest.aspx/Shared%20Documents/Gears%20Sales%20History.xlsx/model/Charts(\'Chart 1\')?$format=image', width: 400, height: 400 };
    myDialog = SP.UI.ModalDialog.showModalDialog(options);
}

</script>

Playing with StatusBar

<script language="ecmascript" type="text/ecmascript">

var sid;

//Status bar

    function createStatusBar() {
        sid = SP.UI.Status.addStatus("My status bar title", "My status bar <a href=\"#\">message<\a>", true);
    }

    function removeStatusBar() {
        SP.UI.Status.removeStatus(sid);
    }

    function removeAllStatusBars() {
        SP.UI.Status.removeAllStatus(true);
    }

    function updateStatusBar() {
        SP.UI.Status.updateStatus(sid,"This is a status update");
    }

    function appendStatusBar() {
        SP.UI.Status.appendStatus(sid,"This is appended", "This is my appended <i>status</i>");
    }

    function redStatusBar() {
        SP.UI.Status.setStatusPriColor(sid, "red");
    }

    function greenStatusBar() {
        SP.UI.Status.setStatusPriColor(sid, "green");
    }

    function blueStatusBar() {
        SP.UI.Status.setStatusPriColor(sid, "blue");
    }

    function yellowStatusBar() {
        SP.UI.Status.setStatusPriColor(sid, "yellow");
    }

</script>

Notifications

<script language="ecmascript" type="text/ecmascript">

//Notifications
    var notificationId;

    function showNotification() {
        notificationId = SP.UI.Notify.addNotification("The party has to begin after 6 hours! :)");
    }

    function removeNotification() {
        SP.UI.Notify.removeNotification(notificationId);
    }

</script>

Find the download link above to get the full VS project. Enjoy!