How to Create a Custom Workflow Initiation Form

Step 2 – Create your SharePoint Initiation Form List

Create a new SharePoint list to be used as your workflow initiation form. For this example I’m going to add a couple of additional columns to the list:

List name = “StartWFInitiationForm”

• Approvers (multiple people column) *required
• Due Date (Date only) *required
• Comments
• TargetItemID (number, 0 decimals) – this will store the List Item ID we will be targeting

A benefit to using a SharePoint list as our initiation form is that SharePoint does all the work for you when it comes to the OOTB functionality such as required fields, people picker, etc… It also provides an easy way to track additional/custom information pertaining to the initiation should you want to include that level of auditing.

Step 3 – Modify the Default New Form on the StartWFInitiationForm List

Go to the List tab on the new list and edit the “Default New Form” and then edit the page.

This will bring you to your traditional web part page view of the default new form. Now you add a script editor web part to the top of the form.

n the script editor you can load jQuery, if not already being loaded on your site, and then all the work will happen in the next 2 lines.

1. CustomInitiation.js – a custom JavaScript file that will load all the information we want to display on the form; we’ll create this file in the next step
2. HTML div “CustomDisplayDiv” will be the placeholder to insert the custom information we want to display

Step 4 – Code the CustomInitiation.js file

Here is where the “heavy lifting” starts. In this example, I am just pulling back information from the target list item to be displayed on the custom initiation form. This script:

1. Retrieves the target item ID we want to start the workflow on from the URL QueryString
2. Uses CSOM to populate the initiation form with custom information

//Create your JavaScript Namespace

var INCWORX = INCWORX || {}

INCWORX.SP = INCWORX.SP || {}

INCWORX.SP.WFInitiation = {

itemID: null,

targetItem: null,

init: function() {

// Hide columns that the user does not need to see

$ ("[id^='Title']").closest('tr').hide();

$ ("[id^='TargetItemID']").closest('tr').hide();

// Change the "Save" button to say "Start Workflow"

$ ("[id$='SaveItem']").prop('value', 'Start Workflow');

// Retrieve the List Item ID from the query string that this workflow will be targeting

INCWORX.SP.WFInitiation.itemID = $.getUrlVar('itemid');

if(!INCWORX.SP.WFInitiation.itemID)

{

// Add some custom message incase the target item ID was not found in the QueryString

$ ("#CustomDisplayDiv").html("ERROR: The item ID was not located.");

$ ("[id$='SaveItem']").hide(); // Hide the Save button so the form cannot be submitted}

// Set the target item ID in the custom column we created so we have access to it after the form is saved

$ ("[id^='TargetItemID']").val(INCWORX.SP.WFInitiation.itemID);

$ ("[id^='Title']").val("Custom Initation for " + INCWORX.SP.WFInitiation.itemID);

// Build your client context

var clientContext = new SP.ClientContext();

var web = clientContext.get_web();

// Retrieve the list of the target item

var list = web.get_lists().getByTitle("RandomApproval");

// Retrieve the target item with the columns we will display on the initiation form

INCWORX.SP.WFInitiation.targetItem = list.getItemById(INCWORX.SP.WFInitiation.itemID, "Include(Title,ApprovalType,DateRequested,Reason,Author)");

clientContext.load(INCWORX.SP.WFInitiation.targetItem);

clientContext.executeQueryAsync(Function.createDelegate(this, INCWORX.SP.WFInitiation.onQuerySucceeded), Function.createDelegate(this, INCWORX.SP.WFInitiation.onQueryFailed));

},

onQuerySucceeded: function() {

var displayDiv = $ ("#CustomDisplayDiv");

// Retrieve the columns to be displayed on the initiation form

var itemTitle = INCWORX.SP.WFInitiation.targetItem.get_item("Title");

var itemApprovalType = INCWORX.SP.WFInitiation.targetItem.get_item("ApprovalType");

var itemDate = new Date(INCWORX.SP.WFInitiation.targetItem.get_item("DateRequested"));

var itemReason = INCWORX.SP.WFInitiation.targetItem.get_item("Reason");

var itemAuthor = INCWORX.SP.WFInitiation.targetItem.get_item("Author").get_lookupValue();

displayDiv.append("<h2>" + itemTitle + "</h2>");

displayDiv.append("<strong>Requestor: </strong>" + itemAuthor);

displayDiv.append("<br >");

displayDiv.append("<strong>Approval Type: </strong>" + itemApprovalType);

displayDiv.append("<br >");

// Format the date, remember that getMonth is 0 based

displayDiv.append("<strong>Date Requested: </strong>" + (itemDate.getMonth()+1) + "/" + itemDate.getDate() + "/" + itemDate.getFullYear());

displayDiv.append("<br >");

displayDiv.append("<strong>Reason: </strong>" + itemReason);},

onQueryFailed: function(sender, args) {

$ ("#CustomDisplayDiv").html("ERROR: " + args.get_message());

}}

jQuery (document).ready(function ()

{

// Function to retrieve QueryString parameters from the URL

$.extend({

getUrlVars: function(){

var vars = [], hash;

var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');

for(var i = 0; i < hashes.length; i++)

{

hash = hashes[i].split('=');

vars.push(hash[0]);

vars[hash[0]] = hash[1];

}

return vars;

},

getUrlVar: function(name){

return $.getUrlVars()[name];

}

});

// Make sure the custom JavaScript is loaded after the SharePoint client object model is loaded

SP.SOD.executeFunc('sp.js','SP.ClientContext',INCWORX.SP.WFInitiation.init);

 });

The resulting display of the New Item form on the custom Initiation list should look like the following.: