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:
This JavaScript code List the PropertyBags from the SharePoint Web Object.
After selection of the Option the SharePoint Modal Dialog appear listing all properties from the SharePoint ListItem Object.
This JavaScript code Lists the Item Metainformation.
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
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.
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:
This JavaScript code create a new Document Set in the Library.
<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
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
No comments:
Post a Comment