Part IV: Examples of Ribbons Customization in SharePoint 2013/Office 365

After the launch of my last article, i have 3 new requests for Ribbons Custom Action that could help your users with more functionalities to better manage the content of your SharePoint Sites. The new Ribbon Custom Actions are "Web Property Bags,List Item Field Properties and Create DocumentSet".

Here the collection and compilation of SharePoint Ribbon Custom Actions examples from my Articles:

• Web Property Bags (new!)
• List Item Field Properties (new!)
• Create DocumentSet (new!)
• Add Custom Tab
• Add Custom Group to Custom Tab
• Add Custom Group Template with Checkbox Control
• Add Custom Control in Custom Group and Custom Tab
• Add Custom Group/Control (Large) in existing Tab
• Add Custom Group/Control (Large/Medium) in existing Tab
• Add FlyoutAnchor in Custom Tab/Custom Group
• Add Button Control in Existing Tab/Group
• Hide existing Ribbon control
• Replace existing Ribbon control
• Manage List/Library Visibility  in Site Content
• Display in Modal dialog Hidden Lists/Libraries
• Hidden  Document/Folder in Explorer Viewer
• Delete all Items to Recycle Bin
• Copy Document to another Folder
• Copy ListItem with Metadata
• Popup all SharePoint Apps
• Move Documents in Library with Metadata/versions
• OneNote Custom Actions (Create/Move Pages and Sections and conversion to Folder)

All this Ribbons were made using the following tool "Processlynx Ribbon Manager"
http://aaclage.blogspot.ch/2014/06/sharepoint-app-processlynx-custom.html

Web Property Bags

This Custom Action includes a new Ribbon button that display the Web Property bags using the SharePoint Modal Dialog.

This example XML create a new Option in the Wiki Page call "Get Web PropertyBag", that is used to display the propertybag associated.

After selection of the Option the SharePoint Modal Dialog appear listing all properties from the SharePoint Web Object.

For the XML structure of the Ribbon Configuration you can use the following:

<CommandUIExtension xmlns=\"http://schemas.microsoft.com/sharepoint/\">\n<CommandUIDefinitions>\n<CommandUIDefinition Location=\"Ribbon.WikiPageTab.Manage.Controls._children\">\n<Button Id=\"GetWebPropertyBag\" LabelText=\"Get Web PropertyBag\" Image32by32=\"/_layouts/15/1033/images/formatmap32x32.png?rev=33\" Image32by32Left=\"-2\" Image32by32Top=\"-409\" ToolTipTitle=\"Get Web PropertyBag\" Command=\"GetWebPropertyBag.Command\" TemplateAlias=\"o1\" />\n</CommandUIDefinition>\n</CommandUIDefinitions>\n<CommandUIHandlers>\n<CommandUIHandler Command=\"GetWebPropertyBag.Command\" CommandAction=\"<Code>\" />\n</CommandUIHandlers>\n</CommandUIExtension>

Code

This JavaScript code List the PropertyBags from the SharePoint Web Object.

CommandAction:

javascript:

var webProperties;

function getWebProperty() {

var clientContext = new SP.ClientContext.get_current(); 

    webProperties = clientContext.get_web().get_allProperties(); 

    clientContext.load(webProperties); 

    clientContext .executeQueryAsync(Function.createDelegate(this, gotProperty), Function.createDelegate(this, onQueryFailed));

}  

function gotProperty() {

var stringHtml='';

var fieldValues = webProperties.get_fieldValues();

      for (var prop in fieldValues) {

  if(!fieldValues.hasOwnProperty(prop)) continue;

  stringHtml += '<div><b>' + prop + '</b></br>'+fieldValues[prop]+'</div>';

     }

 DialogApps(stringHtml);

}

function onQueryFailed(sender, args) {

     alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());

   }

function DialogApps(stringHtml) {

            var element = document.createElement('div');

            element.innerHTML = stringHtml;

            SP.UI.ModalDialog.showModalDialog({

                html: element,

                title: "web Property Bag",

                allowMaximize: false,

                showClose: true,

                autoSize: true

            });

     }

getWebProperty()

List Item Field Properties

This Custom Action includes a new Ribbon button that display the Selected ListItem Properties using the SharePoint Modal Dialog.

After selection of the Option the SharePoint Modal Dialog appear listing all properties from the SharePoint ListItem Object.

For the XML structure of the Ribbon Configuration you can use the following:

<CommandUIExtension xmlns=\"http://schemas.microsoft.com/sharepoint/\">\n<CommandUIDefinitions>\n<CommandUIDefinition Location=\"Ribbon.Documents.Copies.Controls._children\">\n<Button Id=\"ListItemField \" LabelText=\"List Item Field \" Image32by32=\"/_layouts/15/1033/images/formatmap32x32.png?rev=33\" Image32by32Left=\"-439\" Image32by32Top=\"-204\" ToolTipTitle=\"List Item Field \" Command=\"ListItemField .Command\" TemplateAlias=\"o1\" />\n</CommandUIDefinition>\n</CommandUIDefinitions>\n<CommandUIHandlers>\n<CommandUIHandler Command=\"ListItemField .Command\" CommandAction=\"<Code>\" EnabledScript=\"<Code>\" />\n</CommandUIHandlers>\n</CommandUIExtension>

Code

This JavaScript code Lists the Item Metainformation.

CommandAction:

javascript:

   function runCode(ListId) {

   var values = SP.ListOperation.Selection.getSelectedItems();

     var clientContext = new SP.ClientContext(); 

     var targetList = clientContext.get_web().get_lists().getById(ListId.replace(/[{}]/g, ""));

     targetListItem = targetList.getItemById(values[0].id);

     var fieldValuesAsText = targetListItem.get_fieldValuesAsText();

     clientContext.load(fieldValuesAsText);

     clientContext.executeQueryAsync(function(){

 var stringHtml='';

      var fieldValues = fieldValuesAsText.get_fieldValues();

      for (var prop in fieldValues) {

  if(!fieldValues.hasOwnProperty(prop)) continue;

  stringHtml += '<div><b>' + prop + '</b></br>'+(('fieldValues[prop]' == null) ? 'null' : fieldValues[prop])+'</div>';

     }

     DialogApps(stringHtml);

 }

     , Function.createDelegate(this, this.onQueryFailed));

   }

   function onQueryFailed(sender, args) {

     alert('Request failed. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());

   }

   function DialogApps(stringHtml) {

            var element = document.createElement('div');

            element.innerHTML = stringHtml;

            SP.UI.ModalDialog.showModalDialog({

                html: element,

                title: "Field Content",

                allowMaximize: false,

                showClose: true,

                autoSize: true

            });

   }

runCode('{ListId}')

Create DocumentSet 

This Custom Action includes a new Ribbon button in a Document Library that give the ability to Create DocumentSet with a Custom Name.

After the providing the name of the Document Set the page is refresh and new DocumentSet appears in the Document Library.

For the XML structure of the Ribbon Configuration you can use the following:

<CommandUIExtension xmlns=\"http://schemas.microsoft.com/sharepoint/\">\n<CommandUIDefinitions>\n<CommandUIDefinition Location=\"Ribbon.Documents.New.Controls._children\">\n<Button Id=\"NewDocumentSet\" LabelText=\"New DocumentSet\" Image16by16=\"/_layouts/15/images/icdocset.gif\" Image32by32=\"/_layouts/15/1033/images/formatmap32x32.png?rev=33\" Image32by32Left=\"-171\" Image32by32Top=\"-70\" ToolTipTitle=\"New DocumentSet\" Command=\"NewDocumentSet.Command\" TemplateAlias=\"o1\" />\n</CommandUIDefinition>\n</CommandUIDefinitions>\n<CommandUIHandlers>\n<CommandUIHandler Command=\"NewDocumentSet.Command\" CommandAction=\"<Code>\" />\n</CommandUIHandlers>\n</CommandUIExtension>

Code

This JavaScript code create a new Document Set in the Library.

CommandAction:

javascript:

//example code from stackexchange

//http://sharepoint.stackexchange.com/questions/114711/create-a-document-set-with-jsom

SP.SOD.executeFunc('sp.documentmanagement.js', 'SP.DocumentSet.DocumentSet', function() {

    var NewDocumentSet = prompt("Name of Document Set", "");

    if (NewDocumentSet != null) {

        createDocumentSet(_spPageContextInfo.webAbsoluteUrl,'{ListId}',NewDocumentSet,Success,Error);

    }

   function Success()

   {

       SP.UI.Notify.addNotification('Document Set created with Success!', false);

       SP.UI.ModalDialog.RefreshPage(SP.UI.DialogResult.OK);

   }

   function Error(sender,args)

   { 

       SP.UI.Notify.addNotification('Document Set created with Success!', false);

   }

});

function createDocumentSet(siteUrl,listTitle,docSetName,success,error) {

    

    var ctx = new SP.ClientContext(siteUrl);

    var web = ctx.get_web();

    var list = web.get_lists().getById(listTitle.replace(/[{}]/g, ""));

    ctx.load(list);

    var parentFolder = list.get_rootFolder();

    ctx.load(parentFolder);

 

    var docSetContentTypeID = "0x0120D520";

    var docSetContentType = ctx.get_site().get_rootWeb().get_contentTypes().getById(docSetContentTypeID);

    ctx.load(docSetContentType);

    ctx.executeQueryAsync(function (){ 

        SP.DocumentSet.DocumentSet.create(ctx, parentFolder, docSetName, docSetContentType.get_id());

        ctx.executeQueryAsync(success,error);

    }, 

    error);

}

As you can see, very easy. :)

I hope you like this article,

Best regards, 

André Lage