My time break for Office in 365 days: 2016

Wednesday, March 16, 2016

Google Chart examples in Office 365 Sites and SharePoint

Some days ago i was playing around with the Google api and found the Google Charts and was surprise how different are from the older version....
But yes, everyone is talking about SP2016, Power BI for Data and visualization, but decide to give a try and make some examples integrating the Chart API with SharePoint List "Classic"...
For this example i use the html from the chart to inject in the SharePoint Modal Dialog and not any support page to generate the reports, i try to keep very simple in the architectural approach.

There is another interesting Chart call "Org Chart" that make my attention and of course i will try to integrate in the user profile "another classic" but that is another article.
Right now i like to play with this API and make some example in JavaScript and of course my favorite topic create Custom Ribbons Actions. :)

Here the link from the Google Charts API.
https://developers.google.com/chart/

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

For other Examples of Ribbons Customization in SharePoint/Office 365 i would like the recommend the following link:
http://aaclage.blogspot.ch/2016/03/part-v-examples-of-ribbons.html

Configuration of the Chart Examples

To support the example was created a custom List with the Columns "Country, Sales".
where should display the amount of sales by country.
For the Ribbons was create an FlyoutAnchor where are listed the different Ribbons Options "Bar Chart, Pie Chart and All Charts", when selected should popup the SharePoint Modal Dialog with the chart's associated.
If you make changes on the list using Quick Edit the Chart will reflect the changes without need of refresh the page.

Bar Chart Example

The Ribbon Custom Action "Bar Chart" read the List items from the Custom List and display in a html SharePoint Modal Dialog as Bar Chart.

Code Bar charts:

javascript:
function DialogApps(element) {
SP.UI.ModalDialog.showModalDialog({
html: element,
title: "Google Chart Example",
allowMaximize: false,
showClose: true,
autoSize: true,
height: 600,
width: 600,
});
}

function drawStuff(array) {
var data = new google.visualization.arrayToDataTable(array);

var options = {
title: 'Chart Example',
width: 600,
height: 600,
legend: {
position: 'none'
},
chart: {
subtitle: 'Sales by Country'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Sales'
} // Top x-axis.
}
},
bar: {
groupWidth: "90%"
}
};
var element = document.createElement('div');
element.setAttribute("id", "top_x_div");
var chart = new google.charts.Bar(element);
chart.draw(data, google.charts.Bar.convertOptions(options));
DialogApps(element);
}

function ChartLoad() {
google.charts.load('current', {
'packages': ['bar', 'corechart']
});
google.charts.setOnLoadCallback(GetListItems);
}

function GetListItems() {
var ctx = new SP.ClientContext.get_current();
var targetList = ctx.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList());
var query = SP.CamlQuery.createAllItemsQuery();

var queryResults = targetList.getItems(query);
ctx.load(queryResults);

ctx.executeQueryAsync(function getDocsAllItemsSuccess(sender, args) {
var array = [];
array.push(['Country', 'Sale']);
var listEnumerator = queryResults.getEnumerator();
while (listEnumerator.moveNext()) {
array.push([listEnumerator.get_current().get_item("Title"), listEnumerator.get_current().get_item("Sales")]);
}
drawStuff(array);
},
function getDocsAllItemsFailure(sender, args) {
alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
});
}

SP.SOD.registerSod("Chart", "//www.gstatic.com/charts/loader.js");
SP.SOD.executeFunc('Chart', false, ChartLoad);
GetListItems();

Pie Chart Example

The Ribbon Custom Action "Pie Chart" read the List items from the Custom List and display in a html SharePoint Modal Dialog as Pie Chart.

Code Pie charts:

javascript:
function DialogApps(element) {
SP.UI.ModalDialog.showModalDialog({
html: element,
title: "Google Chart Example",
allowMaximize: false,
showClose: true,
autoSize: true,
height: 600,
width: 600,
});
}

function drawStuff(array) {
var data = new google.visualization.arrayToDataTable(array);

var options = {
title: 'Chart Example',
width: 600,
height: 600

};
var element = document.createElement('div');
element.setAttribute("id", "top_x_div");
var chart = new google.visualization.PieChart(element);
chart.draw(data, options);
DialogApps(element);
}

function ChartLoad() {
google.charts.load('current', {'packages': ['bar','corechart']});
google.charts.setOnLoadCallback(GetListItems);
}

function GetListItems() {
var ctx = new SP.ClientContext.get_current();
var targetList = ctx.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList());
var query = SP.CamlQuery.createAllItemsQuery();

var queryResults = targetList.getItems(query);
ctx.load(queryResults);

ctx.executeQueryAsync(function getDocsAllItemsSuccess(sender, args) {
var array = [];
array.push(['Country', 'Sale']);
var listEnumerator = queryResults.getEnumerator();
while (listEnumerator.moveNext()) {
array.push([listEnumerator.get_current().get_item("Title"), listEnumerator.get_current().get_item("Sales")]);
}
drawStuff(array);
},
function getDocsAllItemsFailure(sender, args) {
alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
});
}

SP.SOD.registerSod("Chart", "//www.gstatic.com/charts/loader.js");
SP.SOD.executeFunc('Chart', false, ChartLoad);
GetListItems();

Bar and Pie Charts in Modal Dialog

The Ribbon Custom Action "All Charts" read the List items from the Custom List and display in a html SharePoint Modal Dialog as Bar Chart and Pie Chart.

Code All charts:

javascript:
function DialogApps(element) {
SP.UI.ModalDialog.showModalDialog({
html: element,
title: "Google Chart Example",
allowMaximize: false,
showClose: true,
autoSize: true,
height: 650,
width: 1200,
});
}

function drawStuff(array) {
var data = new google.visualization.arrayToDataTable(array);

var optionsPie = {
title: 'Chart Example',
width: 600,
height: 600

};
var elementPie = document.createElement('div');
elementPie.setAttribute("id", "top_Pie_div");
var chartPie = new google.visualization.PieChart(elementPie);
chartPie.draw(data, optionsPie);

var optionsBar = {
title: 'Chart Example',
width: 600,
height: 600,
legend: {
position: 'none'
},
chart: {
subtitle: 'Sales by Country'
},
bars: 'horizontal',
axes: {
x: {
0: {
side: 'top',
label: 'Sales'
}
}
},
bar: {
groupWidth: "90%"
}
};
var elementBar = document.createElement('div');
elementBar.setAttribute("id", "top_Bar_div");
var chartBar = new google.charts.Bar(elementBar);
chartBar.draw(data, google.charts.Bar.convertOptions(optionsBar));
var element = document.createElement('div');
element.appendChild(elementBar);
element.appendChild(elementPie);

var x = document.createElement("TABLE");
x.setAttribute("id", "myTable");

var y = document.createElement("TR");
y.setAttribute("id", "myTr");
x.appendChild(y);

var z = document.createElement("TD");
z.appendChild(elementBar);
y.appendChild(z);

z = document.createElement("TD");
z.appendChild(elementPie);
y.appendChild(z);

DialogApps(x);
}

function ChartLoad() {
google.charts.load('current', {'packages': ['bar','corechart']});
//google.charts.load('current', {'packages': ['bar']});
google.charts.setOnLoadCallback(GetListItems);
}

function GetListItems() {
var ctx = new SP.ClientContext.get_current();
var targetList = ctx.get_web().get_lists().getById(SP.ListOperation.Selection.getSelectedList());
var query = SP.CamlQuery.createAllItemsQuery();

var queryResults = targetList.getItems(query);
ctx.load(queryResults);

ctx.executeQueryAsync(function getDocsAllItemsSuccess(sender, args) {
var array = [];
array.push(['Country', 'Sale']);
var listEnumerator = queryResults.getEnumerator();
while (listEnumerator.moveNext()) {
array.push([listEnumerator.get_current().get_item("Title"), listEnumerator.get_current().get_item("Sales")]);
}
drawStuff(array);
},
function getDocsAllItemsFailure(sender, args) {
alert('Failed to get list items. \nError: ' + args.get_message() + '\nStackTrace: ' + args.get_stackTrace());
});
}

SP.SOD.registerSod("Chart", "//www.gstatic.com/charts/loader.js");
SP.SOD.executeFunc('Chart', false, ChartLoad);
GetListItems();

After the creation of this example you are able to make more chart and integrated other type of content and display in custom Ribbon Actions.

I hope you like this article,
Kind regards,
Andre Lage

Thursday, March 10, 2016

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

As a follow up of my other article i would like to share another groups of custom Ribbons that could help business users using Charts or Developers in the analysis of SharePoint Objects (Web and List). This new Ribbons Custom Actions are "Web Properties,List Properties and Google Chart" examples.
The first 2 are for development analysis and not for end user usability, the Google chart example can be more interesting for business users when they want to generate KPI or Charts base in SharePoint List, this example just displays the chart with JSON dummy Data but not from a SharePoint List, that is a topic for another article.....

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

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

List Properties

This example creates a new Ribbon Action in the Document Library "Settings area".

When the custom Action is selected the SharePoint List Properties are displayed in SharePoint Modal Dialog.

Sub Object from the Object SP.List are not displayed, this is a example on how to get the List properties and not to display all the object dependency like the SharePoint Client Browser solution.

Code

This JavaScript code Lists properties and not they sub objects from the SharePoint SP.List Object.

CommandAction:

javascript:
function runCode(ListId) {
var clientContext = new SP.ClientContext.get_current();
var targetList = clientContext.get_web().get_lists().getById(ListId.replace(/[{}]/g, ""));
clientContext.load(targetList);
clientContext.executeQueryAsync(function() {
var stringHtml = '';
var methods = getMethods(targetList);
for (var i = 0; i < methods.length; i++) {
if (methods[i].indexOf('get_') > -1 && methods[i].indexOf('$') == -1) {
try {
if (methods[i].replace("get_", "") != 'customActionElements') {
var object= targetList[methods[i]]();
stringHtml += '<div><b>' + methods[i].replace("get_", "") + '</b></br>' + JSON.stringify(object) + '</div>';
}
} catch (e) {}
}
}
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: "List Properties",
allowMaximize: false,
showClose: true,
autoSize: true
});
}

function getMethods(obj) {
var res = [];
for (var m in obj) {
if (typeof obj[m] == "function") {
res.push(m)
}
}
return res;
}
runCode('{ListId}');

Web Properties

This example creates a new Ribbon Action in the Wiki Page.

When the custom Action is selected the SharePoint Web Properties are displayed in SharePoint Modal Dialog.

Sub Object from the Object SP.Web are not displayed, this is a example on how to get the Web properties and not to display all the object dependency.

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.Groups._children\">\n<Group Id=\"Web.Site.Properties\" Title=\"Web Site Properties\" Description=\"Web Site Properties\" Template=\"Ribbon.Templates.Flexible2\">\n<Controls Id=\"Web.Site.Properties.Controls\">\n<Button Id=\"Web.Properties\" LabelText=\"Web Properties\" Image32by32=\"/_layouts/15/1033/images/formatmap32x32.png?rev=33\" Image32by32Left=\"-0\" Image32by32Top=\"-409\" ToolTipTitle=\"Web Properties\" Command=\"Web.Properties.Command\" TemplateAlias=\"o1\" />\n</Controls>\n</Group>\n</CommandUIDefinition>\n<CommandUIDefinition Location=\"Ribbon.WikiPageTab.Scaling._children\">\n<MaxSize Id=\"Web.Site.Properties.Scaling.MaxSize\" GroupId=\"Web.Site.Properties\" Size=\"LargeMedium\" />\n</CommandUIDefinition>\n<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>\n</CommandUIDefinitions>\n<CommandUIHandlers>\n<CommandUIHandler Command=\"Web.Properties.Command\" CommandAction=\"<Code>\" />\n</CommandUIHandlers>\n</CommandUIExtension>

Code

This JavaScript code List properties and not they sub objects from the SharePoint SP.Web Object.

CommandAction:

javascript:
function runCode(ListId) {
var clientContext = new SP.ClientContext.get_current();
var targetList = clientContext.get_web();
clientContext.load(targetList);
clientContext.executeQueryAsync(function() {
var stringHtml = '';
var methods = getMethods(targetList);
for (var i = 0; i < methods.length; i++) {
if (methods[i].indexOf('get_') > -1 && methods[i].indexOf('$') == -1) {
try {
if (methods[i].replace("get_", "") != 'customActionElements') {
stringHtml += '<div><b>' + methods[i].replace("get_", "") + '</b></br>' + JSON.stringify(targetList[methods[i]]()) + '</div>';
}
} catch (e) {}
}
}
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: "Web Properties",
allowMaximize: false,
showClose: true,
autoSize: true
});
}

function getMethods(obj) {
var res = [];
for (var m in obj) {
if (typeof obj[m] == "function") {
res.push(m)
}
}
return res;
}
runCode();

Popup Google Chart

This example provides a example on how you can create a custom Ribbon Action and make call to Google Chart API and display the content in a SharePoint Modal Dialog.

Here the code Google Chart Example using in my Ribbon Action:
https://developers.google.com/chart/interactive/docs/gallery/columnchart#dual-y-charts

Code

This JavaScript code adds the support Script "https:///www.gstatic.com/charts/loader.js" and generate the Chart in a Element, that is included in a SharePoint Modal Dialog.

CommandAction:

javascript:
function DialogApps(element) {
SP.UI.ModalDialog.showModalDialog({
html: element,
title: "Google Chart Example",
allowMaximize: false,
showClose: true,
autoSize: true,
height: 600,
width: 600,
});
}
function drawStuff() {
var data = new google.visualization.arrayToDataTable([
['Move', 'Percentage'],
["King's pawn (e4)", 44],
["Queen's pawn (d4)", 31],
["Knight to King 3 (Nf3)", 12],
["Queen's bishop pawn (c4)", 10],
['Other', 3]
]);

var options = {
title: 'Chess opening moves',
width: 600,
height: 600,
legend: { position: 'none' },
chart: { subtitle: 'popularity by percentage' },
axes: {
x: {
0: { side: 'top', label: 'White to move'} // Top x-axis.
}
},
bar: { groupWidth: "90%" }
};
var element = document.createElement('div');
element.setAttribute("id", "top_x_div");
var chart = new google.charts.Bar(element);
chart.draw(data, google.charts.Bar.convertOptions(options));
DialogApps(element);
}
function ChartLoad(){
google.charts.load('current', {'packages':['bar']});
google.charts.setOnLoadCallback(drawStuff);
}
SP.SOD.registerSod("Chart","//www.gstatic.com/charts/loader.js");
SP.SOD.executeFunc('Chart', false, ChartLoad);
drawStuff();

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

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