My time break for SharePoint: 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:

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:

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

Friday, March 04, 2016

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

Web Property Bags

List Item Field Properties

Create DocumentSet