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
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}&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!
