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.

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.Library.Settings.Controls._children\">\n<Button Id=\"ListProperties\" LabelText=\"List Properties\" Image16by16=\"/_layouts/15/1033/images/formatmap16x16.png?rev=33\" Image16by16Left=\"-0\" Image16by16Top=\"-294\" Image32by32=\"/_layouts/15/1033/images/formatmap32x32.png?rev=33\" Image32by32Left=\"-0\" Image32by32Top=\"-408\" ToolTipTitle=\"List Properties\" Command=\"ListProperties.Command\" TemplateAlias=\"o1\" />\n</CommandUIDefinition>\n</CommandUIDefinitions>\n<CommandUIHandlers>\n<CommandUIHandler Command=\"ListProperties.Command\" CommandAction=\"<Code>\" />\n</CommandUIHandlers>\n</CommandUIExtension>

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

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.Library.Settings.Controls._children\">\n<Button Id=\"CallChart\" LabelText=\"Chart\" Image16by16=\"/_layouts/15/1033/images/formatmap16x16.png?rev=33\" Image16by16Left=\"-0\" Image16by16Top=\"-294\" Image32by32=\"/_layouts/15/1033/images/formatmap32x32.png?rev=33\" Image32by32Left=\"-270\" Image32by32Top=\"-169\" ToolTipTitle=\"Chart\" Command=\"CallChart.Command\" TemplateAlias=\"o1\" />\n</CommandUIDefinition>\n</CommandUIDefinitions>\n<CommandUIHandlers>\n<CommandUIHandler Command=\"<Code>\" />\n</CommandUIHandlers>\n</CommandUIExtension>

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
Post a Comment