Tuesday, October 11, 2011

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.




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 Smile


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!