Module 10 - Code Snippets: Creating Dialogs and Ribbon Controls for SharePoint 2010

The following markup is a simple example of how to add a control to the Site Actions menu. This example adds a menu item that navigates the user directly to the Solutions Gallery, without requiring them to go to the Site Settings page first: 

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<CustomAction Id="NewUIActionsMenu"
GroupId="SiteActions"
Location="Microsoft.SharePoint.StandardMenu"
Sequence="1970"
Title="Manage Solutions">
<UrlAction Url="/_catalogs/solutions/Forms/AllItems.aspx" />
</CustomAction>
</Elements> 

 

The following markup shows how to add a control to the server ribbon. This example adds a 'Help' button to the ribbon in the same group as the built-in 'New Document', 'New Folder', and 'Upload Document' ribbon controls:

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="https://schemas.microsoft.com/sharepoint/">
<CustomAction
Id="NewUIRibbonControl"
RegistrationType="List"
RegistrationId="101"
Location="CommandUI.Ribbon">
<CommandUIExtension>
<CommandUIDefinitions>
<CommandUIDefinition
Location="Ribbon.Documents.New.Controls._children">
<Button
Id="NewUIRibbonControl.ShowHelp"
Alt="Help"
Sequence="1981"
Command="ShowHelp"
Image32by32="/_layouts/images/newui/dochelp.png"
LabelText="Help"
TemplateAlias="o1"/>
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers>
<CommandUIHandler
Command="ShowHelp"
CommandAction="javascript:window.open('https://office.microsoft.com/training/training.aspx?AssetID=RC102345091033');" />
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
</Elements> 

 

The following code is the source for a Visual Web Part that includes a dialog control that enables the user to change the site title. The JavaScript code uses the client object model to make the changes requested by the user.
Note: The code shows good practice by only showing the hyperlink for changing the site title after the client object model has loaded the Web object.

<a href="javascript:showTitleChanger();" href="javascript:showTitleChanger();" id="linkChanger" style="display:none;">
Change Site Title
</a>
<div id="divEditSiteTitle" style="display:none; padding:5px">
<b>Site Title Changer</b>
<input type="text" id="siteTitle" />
<br />
<input type="button" value="Update Site Title" onclick="changeTitle()" />

</div>
<SharePoint:ScriptLink ID="showDialog" runat="server" Name="sp.js" Localizable="false" LoadAfterUI="true" />
<script language="ecmascript" type="text/ecmascript">
var clientCtx;
var thisWeb;
var thisDialog;
_spBodyOnLoadFunctionNames.push("Initialize()");
function Initialize() {
clientCtx = SP.ClientContext.get_current();
thisWeb = clientCtx.get_web();
clientCtx.load(thisWeb);
clientCtx.executeQueryAsync(onWebLoaded,null);
}
function onWebLoaded() {
var linkChanger = document.getElementById("linkChanger");
linkChanger.style.display = "inline";
}
function showTitleChanger() {
var divEditSiteTitle = document.getElementById("divEditSiteTitle");
divEditSiteTitle.style.display = "block";
var dialog = { html: divEditSiteTitle, width: 200, height: 200};
thisDialog = SP.UI.ModalDialog.showModalDialog(dialog);
}
function hideTitleChanger() {
thisDialog.close();
}
function changeTitle() {
thisWeb.set_title(siteTitle.value);
thisWeb.update();
clientCtx.executeQueryAsync(onTitleUdated, null);
}
function onTitleUdated() {
hideTitleChanger();
}
</script>

Comments

• Anonymous
  December 10, 2009
  Hello pandrew, I try your examples, but i have problem about dialog. I try it in imagebutton. dialog opening well. but closing automaticly in a second. Do you have any idea? What am i missing?