Start Flow on Edit Form and redirect to Display Form when complete

Description

Sometimes, you might want to save the item you are working with, start Flow (or Workflow) and see results of the Flow straight away.

For this, we will show you how you can configure both the Flow and the forms to achieve this result.

Result

List and Flow configuration

First, we'll create a List. I'll call it FlowList in just one word, but you can give it a different name.

What's important is that it must include two Yes/No columns, I've called one StartFlow and the other FlowFinished, all without spaces:

FlowList

Make sure both columns have default value of No. We're going to use these fields in our Flow.

Go to Flow, create an automated flow, which starts when SharePoint item (not file) is created or modified:

Create automated Flow

Then, fill out the information about the list we've just created and add a condition, where you need to check value of StartFlow field.

Use Expression tab to populate with real true value:

Flow condition

Then, you only need to add anything to Yes part, the No part can remain empty - there is nothing to execute.

I've added a small delay in mine, you don't have to, though you can do it for experiment, but I don't recommend delay larger than 3 seconds - it takes much longer to execute in practice. You can just skip it. This is the place where you'll put real actions when running in production.

And in the end, make sure to update the item (use the ID from the trigger), and set FlowFinished to Yes, while I also update Title to make it more obvious:

Flow itself

Building forms

Now, we'll need to build the forms and customize their JS to make this possible.

First of all, we're going to create New and Display Form - they don't need much, simply drop Title field into them:

Display Form

Open the Edit Form for the List. I've added Title and StartFlow field, but I've hidden StartFlow with the following Style property:

display:none;

Since it's hidden, users won't modify it manually.

Edit Form

I've also added Start Flow button, but we'll populate the OnClick code afterwards.

Next, you need to create a new Form Set for waiting. Don't need to select any groups or priority, just give it a name:

Create Form Set

In Waiting Form Set, modify the Display Form only. I didn't add any fields, just two Plain Text controls:

Waiting form

More important is the code here. It will use Interval timer to execute requests to the list and check FlowFinished field for the current item. Once the FlowFinished field is set to Yes, it will redirect users to Display Form. It will also play a small "animation" while waiting - each time a request is sent, the dots will update - this is optional, but at least gives user knowledge that something is happening.

Here's the code:

fd.spRendered(function(){
    $(fd.toolbar.$el).hide();
    //we use Interval timer to send requests checking Flow completion
    var timer = setInterval(checkFlowStatus, 1000);

    function checkFlowStatus(){
        //optional animation call
        playAnimation();
        //use List title and column's Internal Name here
        pnp.sp.web.lists.getByTitle('FlowList').items.select('FlowFinished').getById(fd.itemId).get().then(function(item){
            if (item.FlowFinished) {
                clearInterval(timer);
                //use URL of your own site/list
                window.location.href = 'https://domain.sharepoint.com/sites/sitename/SitePages/PlumsailForms/FlowList/Item/DisplayForm.aspx?item=' + fd.itemId;
            }
        });
    }

    //optional animation function
    function playAnimation(){
        var dotsCount = (fd.control('Text1').text.match(/\./g) || []).length;
        if(dotsCount < 3){
            fd.control('Text1').text = fd.control('Text1').text + '.';
        }
        else{
            fd.control('Text1').text = fd.control('Text1').text.replace(/\./g, "");
        }
    }
});

After you save this form, go to Site Pages -> PlumsailForms -> FlowList -> Item -> FormSetIDFolder and open the form you've just saved:

Plumsail Forms

It will give an error (since there is no ID), but it will allow you to copy the URL, and we need it for redirection:

Copy the URL

Finally, return to the default Form Set's Edit Form we've created in the beginning and populate OnClick property with the following code:

fd.field('StartFlow').value = true;
fd.spSaved(function(result) {
    //simply replace this URL with the copied one and add ?item=
    result.RedirectUrl =
        'https://site.sharepoint.com/sites/sitename/SitePages/PlumsailForms/FlowList/Item/a539eec7-1669-45be-b960-6ab96ceae1a2/DisplayForm.aspx?item=' + fd.itemId;
});

return fd.save();

Button OnClick property

This is it!

Now, you can open Edit Form in your browser and try starting the Flow.

Workflow configuration as alternative

If you want to run SharePoint Workflow instead - it's very easy! You just need to configure the Workflow instead.

Create a new Workflow for the List and make sure that it starts automatically when an item is changed:

Start Workflow automatically

Then, configure a similar condition which will check StartFlow (or StartWorkflow) field before applying any action:

Workflow condition

Make sure to set FlowFinished (or WorkflowFinished) field to Yes, after finishing all the other actions in Workflow.