One of the features which is extensively used with SharePoint 2010 is Ribbons controls. In this post we would be creating a custom ribbon and open up a application page when ribbon is clicked using client object model using javascript
//// Creating Ribbon XML
<CustomAction
Id="CustomRibbonButton" /// Represent Unique Id of custom action
Location="CommandUI.Ribbon.ListView" // Represent Location where Ribbon will be visible( I have kept it at List View, for other options you can try out "https://msdn.microsoft.com/en-us/library/bb802730.aspx"
RegistrationId="0x01003E510038825141608FE2D66FF6804EDD" // Guid of Element specified in Registration type, make sure it is all capital letters, i have seen issues with lowercase letters"
Rights="EditListItems" // Represent security rights i.e. users who has edit list items will only see this ribbon
RegistrationType="ContentType"> // Type for which ribbon is attached for e.g. list,content type
<CommandUIExtension> // Tag for user Interface
<CommandUIDefinitions> // Represent commands for user interface
<CommandUIDefinition
Location="Ribbon.ListItem.Actions.Controls._children"> // Location of RIbbon Tab{ For this example it is under actions tab of list item}
<Button
Id="Ribbon.ListItem.Manage.Controls.TestButton"
Command="ShowAlert" // The command to execute When Button is clicked
LabelText="Sample Ribbon"// The label to be shown under ribbon
Image32by32="/_layouts/images/menupersonalize.gif"//The image to shown as ribbon icon
TemplateAlias="o2" //The TemplateAlias attribute is used to size and position controls within a group when a template is applied to the group. This is used when we have created Group tab and sections for showing ribbons
Sequence="501" /> // Represent order of placement among other ribbons
</CommandUIDefinition>
</CommandUIDefinitions>
<CommandUIHandlers> // Represent Commands
<CommandUIHandler
Command="ShowAlert" // Name should match Command attribute of Button
CommandAction ="javascript:CustomCommandAction('{SiteUrl}', 'mybutton');" // Javascript function to execute when command(click event of button in this case as defined in button control)
EnabledScript="javascript:EnableOnSingleItemSelection();" > // Javascript function to execute to enable/disable the ribbon
</CommandUIHandler>
</CommandUIHandlers>
</CommandUIExtension>
</CustomAction>
// Custom Action to Specify the JS File
<CustomAction
Id="CustomRibbonButton.Script"
Location="ScriptLink"
ScriptSrc ="/_layouts/SampleFolder/js/CustomRibbon.js"/>
</Elements>
-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
Javascript functions in CustomRibbon.js
var listItem;
var buttonpressed;
var siteURL;
function EnableOnSingleItemSelection() {
var items = SP.ListOperation.Selection.getSelectedItems();
var itemsCount = CountDictionary(items);
return (itemsCount == 1)
}
function CustomCommandAction(siteurl, buttonpressed) {
this.buttonpressed = buttonpressed;
this.currentSiteUrl = siteurl;
var ctx = SP.ClientContext.get_current();// get client context
var web = context.get_web();
var selectedItems = SP.ListOperation.Selection.getSelectedItems(); // Get selected List items
var listItm = selectedItems[0]; // this will only return ID of list item, to get list object server call has to be mad
this.listItem = sdlist.getItemById(listItm.id);
this.spContext.load(this.listItem);// Load listitem in spcontext to fetch all properties of listitem
this.spContext.load(this.spContext.get_site());// To fetch site properties
this.spContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));
}
/// spContext.executeQueryAsync make asyncronous call to server and return the requested objects, two delegates are attached to handle success(onQuerySucceeded) and faliure(onQueryFailed) operations
function onQuerySucceeded(sender, args) {
var title = this.listItem.get_item('Title'); // get the selected item title
var options = SP.UI.$create_DialogOptions();
var siteguid = spContext.get_site().get_id(); // get current site guid
var itemid = this.listItem.get_item('ID'); // get the selected item id
var appUrl;
appUrl = this.currentSiteUrl + "/_layouts/SampleFolder/SamplePage.aspx?title=" + title + "&siteguid=" + siteguid;// To redirect to SamplePage.aspx with query string parameter as selected item title and current siteguid
options.url = appUrl;
options.height = 600;
options.width = 800;
options.dialogReturnValueCallback=Function.createDelegate(null, DialogClosedCallback);
SP.UI.ModalDialog.showModalDialog(options); // To Open Page in Model Dialogue
}
function DialogClosedCallback() {SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);} // To refresh the parent page after model dialogue closes
function onQueryFailed(sender, args) {
alert('failed ' + args.toString());
}