How To Trigger SharePoint 2013 Designer Workflow On A List Item By Calling REST API Using jQuery

Introduction

In SharePoint 2013 designer workflow, we uncheck the workflow triggering mechanism on a list item being created or updated. This is done in an effort to prevent the recursive calls to the workflow initiation.

However, even though it takes quite a few workflow Start options, it is still possible to start the workflow manually from within the calling workflow. The following Option does the trick: start workflow automatically when an item is Created/Changed in Workflow Designer internally (automatically)

Scenario

I have created a custom list named “TEST” on the host site and have added multiple items. Now, let’s say we want to “Trigger the Sharepoint 2013 list workflow” on any particular item and send an email to the user as per our need.



Objective

I wanted to get the item ID of the list item so that I could use it in my HTML to fetch the Item ID of the list item and bind to the drop-down. Once we have selected any Item ID from the list of Item IDs from the drop-down, click on the "Trigger Workflow" button.

Use the procedure given below.

I have created a simple Sharepoint designer workflow for sending an email. Given below is the created mail template.



In the following code, we fetch the "subscriptionId” in the code as per our Workflow

Step 1

Navigate to your SharePoint 2013 site.

Step 2

From this page, select Site Actions | Edit Page.

Edit the page, go to the "Insert" tab in the Ribbon and click "Web Part" option. In the Web Parts picker area, go to the "Media and Content" category, select the Script Editor Web Part, and press the "Add" button.

Step 3

Once the Web Part is inserted into the page, you will see an "EDIT SNIPPET" link; click it. You can insert HTML and/or JavaScript, as shown below.

<script type="text/javascript" src="../.../SiteAssets/Script/jquery-1.10.2.js"></script>
    <script type="text/javascript">
        $(document).ready(function ($) {
            ItemIdDropDownBind();
            $("#StartWorkflow").click(function () { StartWF() });
        });

        //StartWorkflow
        function StartWF() {
            $.ajax({
                url: _spPageContextInfo.siteAbsoluteUrl + "/_api/SP.WorkflowServices.WorkflowInstanceService.Current/StartWorkflowOnListItemBySubscriptionId(subscriptionId='BB20B816-2AEF-4299-B6BF-43910578BA8F',itemId=' " + $("#drpItem option:selected").text() + "')",
                type: "POST",
                contentType: "application/json;odata=verbose",
                headers: {
                    "Accept": "application/json;odata=verbose",
                    "X-RequestDigest": $("#__REQUESTDIGEST").val()
                },
                success: function (data) {
                    alert('Workflow Trigger Successfully');
                },
                error: function (data) {
                    alert("Error");
                }
            });

        }
        function ItemIdDropDownBind() {
            var url = _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/getbytitle('TEST')/items?$orderby=ID asc&$top=5000";
            getListItems(url, function (data) {
                var items = data.d.results;

                var inputItemIDElement = '<select id="drpItem" name="options"><option  value=""></option>';

                for (var i = 0; i < items.length; i++) {
                    var itemId = items[i].ID,
                     itemVal = items[i].ID;
                    inputItemIDElement += '<option value="' + itemVal + '"selected>' + itemId + '</option>';
                }

                inputItemIDElement += '</select>';

                $('#ItemID').append(inputItemIDElement);


            }, function (data) {
                alert("An error occurred. Please try again.");
            });
        }
        function getListItems(siteurl, success, failure) {
            $.ajax({
                url: siteurl,
                method: "GET",
                headers: { "Accept": "application/json; odata=verbose" },
                success: function (data) {
                    success(data);
                },
                error: function (data) {
                    failure(data);
                }
            });
        }
    </script>

Final out Put

Select the Item Id and click "Trigger workflow" button.




Trigger Workflow Email O/P