The approach described below requires Dynamic forms for SharePoint to be set up in the form. You find DFFS here.

For this to work, your workflow must be set up to start manually, then you must go to the page where you can start the workflow and look at the button / link to get the “subscriptionId”. To do this, you can right click the button and select “inspect”. This opens the developer console and you can see the link like this:

<a href="javascript:StartWorkflow4('ab064e56-926c-477b-910e-0d3759f5b956', '12', '{18C41B2A-4C33-482F-BFC5-C06B92072B10}')" id="UI_Auto_ab064e56-926c-477b-910e-0d3759f5b956">ExampleWF</a>

The “subscriptionId” is the first parameter in the StartWorkflow4 function.

When you have the “subscriptionId”, add this to the custom js textarea in the DFFS:

spjs.workflow = {
	"text":{
		"successMessage":"The workflow was started",
		"errorMessage":"Something went wrong. To try again, reload the page and then start the workflow."
	},
	"data":{
		"dlg":null
	},
	"initListItemWF":function(subscriptionId){
		if(typeof SP.WorkflowServices === "undefined"){
			jQuery.getScript(_spPageContextInfo.webServerRelativeUrl+"/_layouts/15/sp.workflowservices.js",function(){
				spjs.workflow.start(subscriptionId);
			});
		}else{
			spjs.workflow.start(subscriptionId);
		}
	},
	"start":function(subscriptionId){
		var itemId = GetUrlKeyValue("ID");
		spjs.workflow.showProgress();
		var ctx = SP.ClientContext.get_current();
		var wfManager = SP.WorkflowServices.WorkflowServicesManager.newObject(ctx, ctx.get_web());
		var subscription = wfManager.getWorkflowSubscriptionService().getSubscription(subscriptionId);
		ctx.load(subscription, 'PropertyDefinitions');
		ctx.executeQueryAsync(
			function(sender, args){
				var params = new Object();
				var formData = subscription.get_propertyDefinitions()["FormData"];
				if(formData != null && formData != 'undefined' && formData != "")
				{
					var assocParams = formData.split(";#");
					for(var i = 0; i < assocParams.length; i++)
					{
						params[assocParams[i]] = subscription.get_propertyDefinitions()[assocParams[i]];
					}
				}
				wfManager.getWorkflowInstanceService().startWorkflowOnListItem(subscription, itemId, params);
				ctx.executeQueryAsync(
					function(sender, args)
					{
						spjs.workflow.closeDlg();
						SP.UI.Notify.addNotification(spjs.workflow.text.successMessage,false);
					},
					function (sender, args)
					{
						spjs.workflow.closeDlg();
						alert(spjs.workflow.text.errorMessage);
					}
				);
			},
			function(sender, args)
			{
				spjs.workflow.closeDlg();
				alert(errorMessage);
			}
		);
	},
	"closeDlg":function(){
		if(spjs.workflow.data.dlg != null){
			spjs.workflow.data.dlg.close();
		}
	},
	"showProgress":function(){
		if(spjs.workflow.data.dlg == null){
			spjs.workflow.data.dlg = SP.UI.ModalDialog.showWaitScreenWithNoClose("Please wait...", "Waiting for workflow...", null, null);
		}
	}
};

Then you can insert a HTML Section to one of your DFFS tabs with this code:

<input type="button" onclick="spjs.workflow.initListItemWF('ab064e56-926c-477b-910e-0d3759f5b956')" value="Start WF">

Post any questions in the forum.

Alexander