Paul Andrew

Technical Product Manager for Office 365 at Microsoft

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

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

  • Comments 1

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="http://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="http://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('http://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>

  • 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?

Page 1 of 1 (1 items)