Using flows as a form tool for external users

There are many good form tools that integrate with Salesforce. Salesforce even has their own surveys product now - which will be interesting to watch.

But i’m going to illustrate how to roll your own using visual workflow, embedded in a visualforce page, on a force.com (er, lightning platform) site.

If you just want to see the finished product, go here and try it out

2022 UPDATE

h/t from Peter Churchill - you can easily embed flows in public experience cloud sites.

try it out - its the exact same flow in experience cloud

and running flow in system mode now allows updating existing objects - contacts in my case.

and the ux for flows in visualforce pages seems ok now, though there is no real reason to use that.

here are the docs re embedding flow in experience builder community cloud lightning jedi temple site

~~And some caveats : Site external users cant update any standard objects, only insert. So you will need to use a custom object and a flow / process to update the contact. ~~

And i still have no idea if this is in violation of any of the salesforce terms of service, since you are using a workaround to something that they have blocked. So…with that out of the way…onwards

Ingredients

You can build them yourself (recommended) or install all except the site from this package (use at your own risk). Sites cant be packaged - they have to be created by you yourself.

The flow
Lets start with the flow. In my sample, you can enter an email address, and pull up the matching contact info (if it exists). If there is no match, the flow inserts a new contact. If there is a match, the flow currently does nothing - but could update the contact w/ a bit of extra effort.

You will need to build yourself a flow. Trailhead has a good trail re: flows.

The lightning application and Visualforce Page

I’m putting these together b/c the documentation is on a single page. link to documentation

The application
This is a very very simple application, just 3 lines. Create it once, and you can embed any flow on any visualforce page. Go to developer console, and click new lightning resource - lightning application, and give it a name. Then enter these lines.

<aura:application access="global" extends="ltng:outApp" implements="ltng:allowGuestAccess" >
    <aura:dependency resource="lightning:flow"/>
</aura:application>

There is one line that is not in the docs above, which is : implements=“ltng:allowGuestAccess”

This allows a non authenticated user to access the lightning application which is used to embed the flow on the page. You should really think twice about doing this, per the docs. So think. Twice. We dont have a custom apex controller and so they should only have acccess to what is provided by the flow, but think about it a third time and check w someone who does this for a living.

Also, this interface is said to only be available for orgs w communities enabled. As of winter18 all EE+ orgs get up to 100 communities so maybe that means everyone now, but your mileage may vary…Test it out!

The visualforce page
The documentation has some cool bells and whistles that you can explore, re flow finish behavior and passing variables into the flow. But you can use the simpler version below. You probably want to add the ‘showHeader = false’ so it doesnt look like salesforce, but i’ll leave that to you!

<apex:page >
   <html>
      <head>
         <apex:includeLightning />
      </head>
      <body class="slds-scope">
         <div class="slds-scope">                                                 
         <div id="flowContainer" />
         <script>
            $Lightning.use("c:flowVF", function() {
               // Create the flow component and set the onstatuschange attribute
               $Lightning.createComponent("lightning:flow", {},
                  "flowContainer",
                  function (component) {
                     // Set the input variables                                      
                     // Start an interview in the flowContainer div, and 
                     // initializes the input variables.
                     component.startFlow("contact_lookup_and_update_info");
                  }
               );
            });
         </script>
         </div>
      </body>
   </html>
</apex:page>

The lighting platform site
This is probably the trickiest part, bc/ sites are the long lost indiana jones meets gremlins in the temple of doom part of salesforce.

So, you need to do the following

This is easier said than done, but with some luck you can pull it off! You can find me on the twitter and i can try to confuse you further.

 
57
Kudos
 
57
Kudos

Now read this

101 little things to make salesforce a lot better

A sporadically maintained list of coal seams smoldering deep in the caverns of salesforce.com that cause needless liver damage in many an awesome admin. In honor of summer19, this post now has the subtitle of: 101 things that might be... Continue →