Thursday, December 11, 2014

Add custom ribbon tab in app web using javascript/ecmascript and open the page in modal dialog . SharePoint 2013/Office 365

Hello All,

Today i am going to show how to add a custom ribbon tab in app web using javascript. Please refer the below code for adding custom ribbon tab and open the page using SharePoint Modal Dialog


function AddCustomAction() {
    var context = new SP.ClientContext.get_current;

    this.oWebsite = context.get_web();
    var collUserCustomAction = this.oWebsite.get_userCustomActions();

    var oUserCustomAction = collUserCustomAction.add();
    oUserCustomAction.set_name('Welcome');
    oUserCustomAction.set_title('Welcome Title');
    oUserCustomAction.set_description('Welcome to new custom Action');
    oUserCustomAction.set_location('CommandUI.Ribbon');
    oUserCustomAction.set_registrationId('101');
    oUserCustomAction.set_registrationType(1);
    oUserCustomAction.set_group('');


    var ca = '<CommandUIExtension xmlns="http://schemas.microsoft.com/sharepoint/">' +
  '<CommandUIDefinitions>' +
    '<CommandUIDefinition Location="Ribbon.Tabs._children">' +
      '<Tab Id="Demo.Tab" Title="Utilities" Description="Utilities" Sequence="10000">' +
        '<Scaling Id="Demo.Tab.Scaling">' +
          '<MaxSize Id="Demo.Tab.Group.Scaling.MaxSize" GroupId="Demo.Tab.Group" Size="LargeLarge" />' +
          '<Scale Id="Demo.Tab.Group.Scaling.Scale" GroupId="Demo.Tab.Group" Size="LargeLarge" />' +
        '</Scaling>' +
        '<Groups Id="Demo.Tab.Groups">' +
          '<Group Id="Demo.Tab.Group" Title="Print" Description="Print the selected items" Template="Ribbon.Templates.Flexible2">' +
            '<Controls Id="Demo.Tab.Group.Controls">' +
              '<Button Id="DemoControlID" LabelText="" ToolTipTitle="Print" ToolTipDescription="Print the selected items" Command="DemoControlID.Command" TemplateAlias="o1" Image32by32="~site/images/printer.png"/>' +
            '</Controls>' +
          '</Group>' +
        '</Groups>' +
      '</Tab>' +
    '</CommandUIDefinition>' +
    '<CommandUIDefinition Location="Ribbon.Templates._children">' +
      '<GroupTemplate Id="Ribbon.Templates.Flexible2">' +
        '<Layout Title="LargeLarge" LayoutTitle="LargeLarge">' +
          '<OverflowSection DisplayMode="Large" TemplateAlias="o1" Type="OneRow" />' +
          '<OverflowSection DisplayMode="Large" TemplateAlias="o2" Type="OneRow" />' +
        '</Layout>' +
        '<Layout Title="LargeMedium" LayoutTitle="LargeMedium">' +
          '<OverflowSection DisplayMode="Large" TemplateAlias="o1" Type="OneRow" />' +
          '<OverflowSection DisplayMode="Medium" TemplateAlias="o2" Type="ThreeRow" />' +
        '</Layout>' +
        '<Layout Title="LargeSmall" LayoutTitle="LargeSmall">' +
          '<OverflowSection DisplayMode="Large" TemplateAlias="o1" Type="OneRow" />' +
          '<OverflowSection DisplayMode="Small" TemplateAlias="o2" Type="ThreeRow" />' +
        '</Layout>' +
        '<Layout Title="MediumLarge" LayoutTitle="MediumLarge">' +
          '<OverflowSection DisplayMode="Medium" TemplateAlias="o1" Type="ThreeRow" />' +
          '<OverflowSection DisplayMode="Large" TemplateAlias="o2" Type="OneRow" />' +
        '</Layout>' +
        '<Layout Title="MediumMedium" LayoutTitle="MediumMedium">' +
          '<OverflowSection DisplayMode="Medium" TemplateAlias="o1" Type="ThreeRow" />' +
          '<OverflowSection DisplayMode="Medium" TemplateAlias="o2" Type="ThreeRow" />' +
        '</Layout>' +
        '<Layout Title="MediumSmall" LayoutTitle="MediumSmall">' +
          '<OverflowSection DisplayMode="Medium" TemplateAlias="o1" Type="ThreeRow" />' +
          '<OverflowSection DisplayMode="Small" TemplateAlias="o2" Type="ThreeRow" />' +
        '</Layout>' +
        '<Layout Title="SmallLarge" LayoutTitle="SmallLarge">' +
          '<OverflowSection DisplayMode="Small" TemplateAlias="o1" Type="ThreeRow" />' +
          '<OverflowSection DisplayMode="Large" TemplateAlias="o2" Type="OneRow" />' +
        '</Layout>' +
        '<Layout Title="SmallMedium" LayoutTitle="SmallMedium">' +
          '<OverflowSection DisplayMode="Small" TemplateAlias="o1" Type="ThreeRow" />' +
          '<OverflowSection DisplayMode="Medium" TemplateAlias="o2" Type="ThreeRow" />' +
        '</Layout>' +
        '<Layout Title="SmallSmall" LayoutTitle="SmallSmall">' +
          '<OverflowSection DisplayMode="Small" TemplateAlias="o1" Type="ThreeRow" />' +
          '<OverflowSection DisplayMode="Small" TemplateAlias="o2" Type="ThreeRow" />' +
        '</Layout>' +
      '</GroupTemplate>' +
    '</CommandUIDefinition>' +
  '</CommandUIDefinitions>' +
  '<CommandUIHandlers>' +
    '<CommandUIHandler Command="DemoControlID.Command" CommandAction="javascript:SP.UI.ModalDialog.showModalDialog({url:\'{SiteUrl}/Pages/Demo.aspx?{StandardTokens}&amp;SPListItemId={ItemId}&amp;SPListId={ListId}\', title:\'Page Title\'});"/>' +
  '</CommandUIHandlers>' +
'</CommandUIExtension>';

    oUserCustomAction.set_commandUIExtension(ca)
    oUserCustomAction.update();

    context.load(this.oWebsite, 'Title', 'UserCustomActions');

    context.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceededs), Function.createDelegate(this, this.onQueryFaileds));
}

function onQuerySucceededs() {

    alert('Custom action created for ' + this.oWebsite.get_title());
}

function onQueryFaileds(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

No comments:

Post a Comment