From Frank Caron: Pre-fill the Fields of Embedded Flows
Flows are among the Salesforce Customer 360 Platform’s most powerful declarative tools, and yet there are still many admins out there who haven’t taken advantage of one of the tool’s coolest features: the ability to embed flows in external, non-Salesforce web sites.
The Embedded Service Deployment feature allows you to, with the help of a flow and a community, embed a flow in an external website by generating a simple HTML and JavaScript snippet that an admin can copy and paste.
Unfortunately, by default, this external deployment of Flows lacks certain conveniences that go along with using a Flow in Experience Cloud, like easily pre-populating input fields in the Flow. Say, for example, the end-user is already logged into your external site, and you want to pass their basic first name, last name, and email into the Flow. You won’t find an obvious way to achieve that type of pre-fill with the feature alone.
But wait! Embedded Flows can actually be pre-filled by the external website, and that’s what this Embedded Pre-Filled Flows extension is all about. With the unmanaged package and code repository we’ve provided, you can easily extend your Flows to external websites while still pre-filling fields.
How It Works
Getting a Flow embedded into an external site is actually very easy and requires no code. The Embedded Service Deployment feature lets you do this; it uses Salesforce Experience Cloud (Communities) and the concept of a guest user to allow the Flow to run in an external context.
In order to actually pass values into that external flow, though, we need some kind of mechanism. URL query parameters to the rescue! Like many great web applications, Salesforce can easily read arbitrary data from the current URL in the end user’s browser. The external application that embeds a Flow, then, can actually be made to pass values to the Flow through the URL.
Once the flow starts, action needs to be taken to retrieve those parameters from the URL and pull them into the flow. This is done with Flow Local Actions. By using a Flow Local Action component to grab some query params from the URL, we can allow the external website to send attributes into the Flow neatly. This is very similar in principle to Flow internal URL variables.
The installable extension below includes a local action that grabs URL parameters for use in a Flow that is distributed via an External Service Deployment.
In this example, the Flow uses the Custom Local Action that’s designed to look for a URL parameter called “userName”. When the Flow runs, it looks to the URL in the end-user’s browser for the query param — e.g., www.mysite.com/Flow?userName=Frank — and grabs it, passing it into the flow for use.
The Flow can then use this value to fill any field, grab records, and more: any and all of the typical work you would do in a Flow.
You can see a working example here:
https://fc-sfdc-public-assets.s3.us-east-2.amazonaws.com/test.html?userName=Frank
Reviewing The Code
Let’s dig into the composition of the GrabQueryParams Local Action in a little more detail:
| Name | GrabQueryParams |
| Usable In | Flows as a Local Action |
| Attributes | parameter1Name – The String attribute name for a query parameter that will be identified in the URL parameter1Value – The String value retrieved from the attribute of parameter1Name in the URL for use in the Flow parameter2Name – The String attribute name for a query parameter that will be identified in the URL parameter2Value – The String value retrieved from the attribute of parameter2Name in the URL for use in the Flow parameter3Name – The String attribute name for a query parameter that will be identified in the URL parameter3Value – The String value retrieved from the attribute of parameter3Name in the URL for use in the Flow |
| Controller | The JavaScript controller has a function that, on component load, does the following: Read the current URLLook for query parameters in the style of “name=value”Set the value of a given URL query param to the matching parameter value in the component (e.g., if varName=Frank in the URL, set param1Name to “varName” and catch param1Value to get “Frank” in the Flow). |
| Extending | To extend the component…Add additional attributes to the component to represent the specific variables you want to expose to the flow Update the controller to parse the according values from the URL and map them to the attributes in the component. |
How To Set It Up
To make things easy, we’ve included both an unmanaged package and an SFDX-friendly source code repo at the bottom of this post.
Once you’ve cloned the repo and pushed the source to your org, or you’ve installed the package, here’s what you’ll need to do:
- Set up a Community
- Set up the Embedded Service Deploy, and use the included Flow
- Update the code snippet in the included test page (test.html) with the one generated by your Embedded Service Deploy.
- Deploy the HTML page somewhere (e.g., AWS S3)
- Update your CORS settings in the Org to whitelist the web page URL you’ve deployed
- Visit the deployed HTML page and add ?userName=ABC to the URL to see it work.
With that, you’ll be able to hit the external site and begin to experiment.
Modifying The Attribute Pre-Fill Mapping
Out of the box, we’ve set up three query params (parameter1, parameter2, parameter3) that you can work with. All three are optional. This allows you to use up to three unique URL parameters from your external site with no-code configuration.
To specify a particular URL parameter name, create a text variable in the Flow that has the desired attribute name as its value (e.g., “userName”) and set it as an input value for the “parameter1Name” field in the Action config screen. In this example, which is included in the package, QueryParamToFind is set to “userName”.
Then create a text variable to store the value that will be retrieved from the URL for that parameter1 attribute. Set it as the output value for the “parameter1Value” field.
Now, when the Flow is run on a page with a URL that includes “?userName=Frank”, the code will check for parameter1Name (“userName”) and capture its value (“Frank”) in the parameter1Value variable (“varName”) for use in the Flow.
You can use the same approach for the other two parameters, which allows you to capture up to three URL query parameters with the out-of-the-box Flow and Local Action.
Oh, And One Quick Security Tip
The ability for external Flows to work with query attributes from the URL can be very powerful. However, it’s important to note that this method of sharing data with a flow is not well suited to situations where you need to pass very sensitive data to the Flow.
Query parameters are visible to the client (e.g., the end-user’s browser) and can be accessed by other JavaScript (including rogue scripts), so use this pattern wisely and only for non-sensitive data.
If you need to pass very sensitive information between an external website and Salesforce for use in a Flow, you may want to consider other patterns (e.g., a direct API integration between your external application and Salesforce).
Install
Unmanaged package with:
- A custom Aura component with the Local Action
- A sample Flow that uses the Local Action
Source
Credits
Thanks to Henry Hai for his assist on this one!