Customizing the Ribbon triggering workflow

In SharePoint, if a workflow is triggered manually, the user needs to select item and then click Workflow to direct another page to start the workflow.

Here I want to add a ribbon button, the Ribbon button can be a drop-down menu, listing all the workflow that can be triggered, the user only need to select some item, and then directly click on one of the drop-down menu to trigger the workflow, do not need the page to turn.

Here is an introduction to the implementation method:

In the first step, we add a ribbon button to the Ribbon.

I used the Ribbon button of the flyout anchor type to add it to the Ribbon.ListItem.Workflow group in the Ribbon:

The configuration code for the Ribbon:

<elements xmlns= "http://schemas.microsoft.com/sharepoint/" > <control id= "Additionalpagehead"
                  Sequence= "controlclass=" Shrenky.projects.workflowtrigger.RibbonLoaderControl " Controlassembly= "$SharePoint. project.assemblyfullname$" > </Control> <customaction id= "Shre
                Nky.projects.workflowtrigger.Ribbon "location=" Commandui.ribbon "registrationid=" 100 " Registrationtype= "List" sequence= "title=" descript "Tigger" ion= "Trigger Workflow" > <CommandUIExtension> <CommandUIDefinitions> <commanduidefiniti On location= "Ribbon.listitem.workflow.controls._children" > <flyoutanchor id= "Shrenky.projects.workflowtrig Ger. Anchor "sequence=" "labeltext=" Workflows "image32by32="/_layouts/15/images/shr Enky.projects.workflOwtrigger/trigger.jpg "populatedynamically=" true "Populateonlyonce=" false "Popul
              Atequerycommand= "Shrenky.projects.workflowtrigger.PopulateMenus" tooltiptitle= "Dynamic dropdown"
          Tooltipdescription= "shows dropdown made of buttons defined in JavaScript" templatealias= "O1" > </FlyoutAnchor> </CommandUIDefinition> </CommandUIDefinitions> <commanduihandle rs> <commanduihandler command= "Shrenky.projects.workflowtrigger.TriggerMenuClick" commandaction= "javascript : WorkflowTrigger.Ribbon.RibbonComponent.get_instance (). Triggerworkflow (Arguments[2].  Menuitemid, '); Enabledscript= "true"/> <commanduihandler command= "Shrenky.projects.workflowtrigger.MessageMenuClick" Comman  daction= "Javascript:alert (' No workflow associated on current list. ')" Enabledscript= "true"/> </CommandUIHandlers> </CommandUIExtension> &Lt;/customaction> </Elements> 

First, a delegate control is added to register some scripts such as Jquery,spservices and the pagecomponent that the Ribbon needs to use, and so on.

Then a flyoutanchor button is defined, which does not have a drop-down menu, because the drop-down menu is dynamically generated by the Populatequerycommand property, and when the user clicks on the button, it executes " Shrenky.projects.workflowtrigger.PopulateMenus "This method, which is defined in the Pagecomponent, is used to construct the XML for the drop-down menu.

In addition to Flayoutanchor, there are two commanduihandler defined, one is "Shrenky.projects.workflowtrigger.TriggerMenuClick", For the user to click on the Flyoutanchor dynamically generated drop-down menu when called, the other is temporarily useless.

Delegate control in addition to loading the script, there is a purpose is to the current list of all the associated Workflow Information (association Id,title,description) and so on to the page to use after the operation.

The second step, when the user clicks on the Ribbon, displays all the workflows that can be triggered in the current list

The dynamic Add drop-down menu to flyout anchor is implemented through the Pagecomponent (workflowtriggerpagecomponent.js file), and the introduction to Pagecomponent can refer to the SharePoint As development platform The example in this book. It is defined as follows:

Type.registerNamespace (' Workflowtrigger.ribbon '); 

WorkflowTrigger.Ribbon.RibbonComponent = function () {WorkflowTrigger.Ribbon.RibbonComponent.initializeBase (this);} WorkflowTrigger.Ribbon.RibbonComponent.get_instance = function () {if (! WorkflowTrigger.Ribbon.RibbonComponent.s_instance) {WorkflowTrigger.Ribbon.RibbonComponent.s_instance = new WORKF
    LowTrigger.Ribbon.RibbonComponent ();
} return WorkflowTrigger.Ribbon.RibbonComponent.s_instance; } WorkflowTrigger.Ribbon.RibbonComponent.prototype = {focusedcommands:null, globalcommands:null, Registerw Ithpagemanager:function () {SP.
        Ribbon.PageManager.get_instance (). Addpagecomponent (this); Sp.
    Ribbon.PageManager.get_instance (). Get_focusmanager (). Requestfocusforcomponent (this); }, Unregisterwithpagemanager:function () {SP.
    Ribbon.PageManager.get_instance (). Removepagecomponent (this);
      }, Init:function () {}, Getfocusedcommands:function () {  return [' Shrenky.projects.workflowtrigger.PopulateMenus '];
    }, Getglobalcommands:function () {return [' Shrenky.projects.workflowtrigger.PopulateMenus ']; }, Canhandlecommand:function (commandId) {if (commandId = = = Shrenky.projects.workflowtrigger.PopulateMenus
        ') {return true;
    } else {return false;} }, Handlecommand:function (CommandId, properties, sequence) {if (commandId = = = SHRENKY.PROJECTS.WORKFLOWTR Igger. Populatemenus ') {properties. Populationxml = this.
        Getdynamicmenuxml ();
        } else {return Handlecommand (CommandId, properties, sequence); }}, Getdynamicmenuxml:function () {...}, SelectedItems: [], Workflowassociationid:n Ull, Triggerworkflow:function (workflowassoid, param) {...}, Triggerworkflowexec:functio N () {...}, triggerworkflowfailed:function()
    {
        ... ...
    }
} WorkflowTrigger.Ribbon.RibbonComponent.registerClass (' WorkflowTrigger.Ribbon.RibbonComponent ', CUI.
Page.pagecomponent);
WorkflowTrigger.Ribbon.RibbonComponent.get_instance (). Registerwithpagemanager ();
 Notifyscriptloadedandexecutewaitingjobs ("Workflowtriggerpagecomponent.js");

The dynamic Build drop-down menu is implemented using the following code:

if (commandId = = = ' Shrenky.projects.workflowtrigger.PopulateMenus ') {
            properties. Populationxml = this. Getdynamicmenuxml ();
        }

Getdynamicmenuxm This method is responsible for generating the XML of the drop-down menu, which needs to be used when generating XML delegate Control outputs the information in advance to the workflow on the page (that is, the variable workflowtrigger.data.WorkflowData, a JSON object that contains workflow specific information such as id,title, etc.)

 Getdynamicmenuxml:function () {var counter = 0;
        var data = Workflowtrigger.data.WorkflowData; var xml = ' <menu Id = ' Shrenky.projects.workflowtrigger.Anchor.Menu ' > ' + ' <menusection id= ' Shrenky.projec Ts.workflowtrigger.Anchor.Menu.MenuSection1 "> ' + ' <controls id=" Shrenky.projects.workflowtrigger.Anchor.Men
        U.menusection1.controls ">";
        var len = data.length;  for (var i = 0; i < Len;
            i++) {counter = counter + 1;
            var current = Data[i]; var Workflowassociationid = current.
            Workflowassociationid; var workflowname = current.
            Workflowtitle; var Workflowdesc = current.
            Workflowdescription; var buttonxml = String.Format (' <button id= ' shrenky.projects.workflowtrigger.Anchor.Menu.MenuSecti On1. menu{0} "' + ' command=" shrenky.projects.workflowtrigger.TriggerMenuClick "' + ' men Uitemid= "{1}" '
                    + ' labeltext= ' {2} ' + ' tooltiptitle= ' {2} ' ' + ' TOOLTIPDESCRI
            Ption= "{3}" templatealias= "O1"/> ', counter, Workflowassociationid, Workflowname, Workflowdesc);
        XML + = Buttonxml; } if (counter = = = 0) {var msgxml = String.Format (' <button id= ' Shrenky.projec ts.workflowtrigger.anchor.menu.menusection1.menu{0} "' + ' command=" shrenky.projects.workflowtrigger.Me Ssagemenuclick "' + ' menuitemid=" 1 "' + ' labeltext=" {0} "' + ' Tooltiptitle= "{0}" ' + ' tooltipdescription= "{0}" templatealias= "O1"/> ', ' No workflow associated on
            Current list ');
        XML + = Buttonxml;
        XML + = ' </Controls> ' + ' </MenuSection> ' + ' </Menu> ';
    return XML; },

When we construct the XML, we assign the command property of the drop-down menu to the "Shrenky.projects.workflowtrigger.TriggerMenuClick" method, One way is to commanduihandler one of the previous definitions. When the user clicks the drop-down menu, triggering the "Shrenky.projects.workflowtrigger.TriggerMenuClick" method, this method actually calls another method Triggerworkflow:

    SelectedItems: [], Workflowassociationid:null, triggerworkflow:function (workflowassoid, param) {
        This.workflowassociationid = workflowassoid; var ctx = SP.
        Clientcontext.get_current ();
        var web = Ctx.get_web ();
        var lists = web.get_lists (); var listId = SP.
        ListOperation.Selection.getSelectedList ();
        var list = Lists.getbyid (listId); var items = SP.
        ListOperation.Selection.getSelectedItems ();
        This.selecteditems = [];
                if (Items.length > 0) {for (var i in items) {var id = items[i].id;
                var item = List.getitembyid (ID);
                This.selectedItems.push (item);
            Ctx.load (item); } ctx.executequeryasync (Function.createdelegate (this, this). triggerworkflowexec), function.createdelegate (this, this.
        triggerworkflowfailed));
        } else {alert ("Please select item"); }
    },

This method first obtains all the item selected by the user, saves the item in the variable SelectedItems, and then uses the Executequeryasync method to obtain information about the item, which is used to trigger the workflow on the item at the end. If the information for these item is successful, the callback function triggerworkflowexec is called, and the workflow is formally triggered:

 Triggerworkflowexec:function () {for (var i in This.selecteditems) {VA
            R item = This.selecteditems[i];
            var itemId = Item.get_item ("ID");
            var itemtitle = Item.get_item ("Title");
            var itemfileref = Item.get_item ("FileRef");
            var webUrl = _sppagecontextinfo.webabsoluteurl;
            var url = webUrl + itemfileref;
            var id = This.workflowassociationid; !function outer (ID, URL, itemtitle) {$ (). Spservices ({debug:true, Operation: "Startworkflow", async:t Rue, Item:url, Templateid:id, workflowparameters: "<data/ > ", Completefunc:function () {SP. Ui. Notify.addnotification ("Start workflow on" + Itemtitle + "successfully", true);});
        (ID, URL, itemtitle); }
    },

This iterates through the user-selected items, triggers the workflow using Spservices, and uses spservices to trigger the workflow, see: Click to open the link.

In the third step, select the workflow that needs to be started and then use Spservices to trigger the workflow, and a message will be notified when the workflow starts normally (here "Thinkpad" is the title of item):

Currently this tool can only be run on the list and is not perfect, but it is a good example of a custom Ribbon.

Specific code can be downloaded on github: https://github.com/shrenky/sharepointprojects.git