Create a Card that Displays a Screen Flow

Admins can create a Community Hub card that presents constituents with a fully functional screen flow, created with Salesforce's Flow Builder. Adding a flow to Community Hub is a great way to add a simple, yet powerful, interactive wizard to empower constituents to self serve their needs.

The Community Flow card type extends the existing Embedded Lightning card type, for specific use with the lightning:flow Lightning Component.

Flows in Community Hub is currently in beta. Learn more.

Create a Card

In the Force.com App Menu, select Community Hub Setup.
In the tab bar, click Pages.
In Page to configure:, select the page you want to customize.
In Add A Card..., select New Card.
In Type, select Community Flow.
In Name, enter an easily recognizable term to identify the card.
In Description, enter a description of what the card does.
In Object, select the standard or custom object that pertains to the data source you want to use.
In Data Source, select the data source that queries the record(s) you are passing into the flow.
In Configuration, enter the Unique Name of the flow. If the name of the flow includes a space, enter an underscore where the space would normally be. For example, if the flow is named Volunteer Now, enter Volunteer_Now.
Click Save.

For assistance in enabling this functionality, please contact Nimble AMS Customer Success Team.

Using Input/Output Variables in the Flow

The Community Flow card provides some helpful input and output variables that you can reference and use in your flow. On top of that, two additional input variables are specified (InputSObject and InputSObjects) whenever the card references a data source.

The input variables are generally required, meaning you must create variables in your flow with the same name, even if you aren't planning to use the variable, so be sure to use the exact variable names specified in the table below.

Variable Name	Resource/Data Type	Input/Output Type	Description	Required
`CurrentAccountId`	Variable (Text)	Input Only¹	This is the Account Id of the logged in user in Community Hub.	Yes
`CommunityBaseUrl`	Variable (Text)	Input Only¹	This is the base URL for the Community Hub site. This can be used to append to when building the Finish URL.	Yes
`InputSObjects`	SObject Collection Variable	Input Only¹	This is the list of SObject records from the Data Source. The `Object Type` must match the object that the Data Source selects from.	Only when the card references a `Data Source.`
`InputSObject`	SObject Variable	Input Only¹	This is the first SObject record in the list of records from the Data Source. This is useful when your data source only returns one record, or when you ordered the results of your data source and only want to use the first record. The `Object Type` must match the object that the Data Source selects from.	Only when the card references a `Data Source.`
`FinishMessage`	Variable (Text)	Output Only	A message to display after the flow is finished.	No
`FinishLocation` or `FinishURL` in case of an autolaunched flow button	Variable (Text)	Output Only	A URL to redirect the constituent to after the flow is finished. This can be an absolute or relative URL.	No

[1] The Input/Output Type could also be Input & Output if you need to output the variable for some reason.

Using URL parameters in the Flow

Using parameters from a URL in the flow needs customizations. For leveraging this functionality, please contact Customer Success Team through a support case.

Example

In this example, we will have a card that presents a simple flow with a few screens allowing the constituent to purchase a subscription product. It also collects a custom field to stamp onto the created subscription history record.

Card Setup

Here is the card configuration. Note how it uses the Community Flow Card Type. Here, the Data Source is named ISENNow, which queries for one subscription product named "ISEN Now". The flow's Unique Name is Subscription_Purchase.

Flow Setup

The flow is configured to have all of the input variables listed above. The first thing it does is call an invocable action to price the product for the constituent. Then it displays the first screen.

When the user clicks Next, they are brought to a new screen that asks the user how they heard about the association (which will write back to a custom field on the subscription history record), and it also lists their available stored payment methods in a radio button list.

When the user clicks Next again, an invocable action is called. That invocable action creates an order via the Order API for the subscription product, and applies a payment using the selected stored payment method. Then the flow sets the FinishLocation output variable to redirect the user to the order summary page for the newly created order when they click the Finish button.

The Result

Success! This was a simple example, and proof of concept, of how the Community Flow Card Type can be used within Community Hub to empower your constituents. We encourage you to try out your own solutions in your sandbox, test it out and deploy to production.