Flow Extensions March Update

1. Dynamic Question can have default settings

Version 1.1 of DynamicQuestion allows defaults to be set for each question, including the parent question. These default values can be a string or a Flow variable. Based on a request by JodieM. Get the new version here.

2. New MultiShim Flow Screen Component

This simple little component makes it easy to add extra padding/spacing to your Flow screens and make them line up better. Get MultiShim here.

3. Lightning Input, The super uber lightning input, by Ryan McConnell

I can’t even begin to tell you all this things this control does. It can do time. It can do sliders. It can do radio buttons. It’s basically a universal input control built by the Lightning Platform team, and now made available for Flow. Here’s a set of four lightningInput controls, set to the following types: color, slider, telephone, and week.

Get it here. Ryan McConnell, an engineer at Salesforce, built this sweet Flow component.

4. Send Email via SendGrid

This is the first Flow Extension that taps into the power of a non-Salesforce web service. Of course, Flow has a built-in Send Email element. But some users may want to use the powerful SendGrid messaging and templating services. Get it here.

5. Learn about Navigation Overrides.

Here’s an attractive new Flow you can install that demonstrates a couple of useful new tricks. It shows off the MultiShim component described above. And this flow also demonstrates how easy it is to override the Next and Previous buttons with two lines of Javascript and use attractive images as Flow Screens.

Check out the video here.

Adding Custom Images to Flow Screens and Overriding the “Next” and “Previous” buttons

So a VP asks me to build a Flow demo for him, and I do. But he wants it to have more visual sizzle. He even gives me a nice piece of stock photography, along with a version where the wheels are highlighted.

So I built a little custom component and made a video. In the first half I’m talking about MultiShim, an installable Flow Screen Component that adds line padding. But in the second half, I demonstrate how to override the next and previous buttons, and how to wire some custom images into a simple lightning component and use it as a highly visual flow screen.

Try It In Your Own Org

This demo has been packaged up and is installable via this link*.

*If you run into an External Sharing Settings error, make sure you’ve enabled External Sharing Model in Sharing Settings.

The package includes four lightning components: MultiShim, a Datatable variant that displays Repair_Procedure__c custom objects, CustomCarPicker, which contains the images and mouse logic, and DateTimePicker. It also includes several images as Static Resources, and the core Flow, called AutomativeServiceFlow.

MultiShim, a new Flow Screen Component to let you pad your screen sizes

Was building a demo at Salesforce and the VP says, he says to me “can you do something about the black space that can be seen when you go from one flow screen to the next and the first screen is large and the next screen is really small?” And it occurred to me that I’m used to that bounce effect but it’s hardly attractive.

So I built a simple little Flow Screen Component that simply adds a specified number of blank lines. It just adds </br>’s to itself and then renders a bunch of blank space.

See it in action in this video, and install it into your org from here.

A Useful SFDX Login Script

Once you have headless SFDX auth working in your development environment, you can start to leverage it by building build automation. Here’s a simple script I’m using to bootstrap my SFDX environment. I run it every time I start up a new session:

#!/bin/bash -x
echo “Starting Dev Environment”

if [[ $# -eq 0 ]] ; then
 echo ‘you need to pass in a string name for your scratch org’
 exit 1

echo “authenticating to devhubtrial2”
sfdx force:auth:jwt:grant -i 3MVG9mclR62wycM2eQwLGugMMMWe5zQvP33hzD_0yCIWytEEI73gZsu8wtNti51PfxuTT_p0F6BrRyAeCVQjN -u [mydevhubusername] -f ~/dev/certificates/server.key — setdefaultdevhubusername
echo “creating a new scratch org”
sfdx force:org:create -a $1 -s -f config/project-scratch-def.json -d 2
echo “install testing environment”
sfdx force:lightning:test:install -u $1
echo “pushing project to scratch org”
sfdx force:source:push -u $1
echo “upload test fixture data”
sfdx force:data:tree:import -u $1 -f data/[my fixture objects].json
echo “get web url for manual open”
sfdx force:org:open -r -u

This takes a couple of minutes to run but doesn’t need any attention while it’s going, and at the end, I have a new scratch org fully loaded with my project and fixture data, ready to go.

The scratch orgs that this script creates are set to expire in just 2 days. That’s because, with a script like this, it’s so easy to create them that you end up bumping up against the limit on total orgs!

Dependent Picklists, a Flow Screen Component

NOTE: This component is basically obsolete. Flow now includes a dependent picklist as an official component. You should have a good reason to bother dealing with the community component, which paved the way and served nobly, but is now deservedly retired.

Watch the Video . Get the Source Code . Go get this component (not recommended)

Flow users have been asking for a one-screen dependent picklist solution for a long time. For those not familiar with this UI combination, it works like this:

Starting with a single set of choices that comes from a standard Salesforce field of type “picklist”…

Depending on the value you pick….

…you get a different set of choices in the second, dependent selection control:

DependentPicklists is an installable Flow Screen Component that works on Spring ’18 and later orgs. Each pair of picklists can be configured using the standard Cloud Flow Designer tools. This is what the control shown in the above images looks like, configured:

Let’s walk through the process of setting up a dependent picklist:

  1. Enable your org to run Lightning Components in Flow Screens. You need to have the “Enable Lightning runtime for flows” checkbox checked in Process Automation Settings, and you need to have My Domain configured.
  2. Install the DependentPicklist component. We’re working on making this component installable from AppExchange and possibly part of the included set of base screen components in the future, but for now you need to install it yourself.
  3. Add it to a Flow Screen. This is described here.
  4. Configure it. (See Configuring a DependentPicklists Component, below)

Configuring a DependentPicklists Component

The control consists of a “Parent” selection control and a “Dependent” selection control. The main job you have, when you configure this control, is to tell the control, for every possible value that can be selected in the Parent control, which dependent picklist to use to populate the Dependent control. Let’s look at the picklists we’re using in the example visible above:

For the Parent select, we’re going to use the IssueType Picklist custom field, which looks like this:

Step 1: Configure the Parent Control

For this control you need to tell the component which object and field to use to populate the Parent select control. Simply type the object and field names into the attributes Parent Object Name and Parent Field Name:

Step 2: Link each Parent Value to a Dependent Picklist

There are three possible values for this Parent control, so we need to provide the component with guidance for all three possibilities.

To do this, in Flow, you enter a pair of values:

  1. a specific possible “choice”, such as “PrivateBank”
  2. if that choice is selected, what dependent picklist should be used for the Dependent controls.

This image shows two of the three pairs of information:

The interpretation should be pretty clear, if the user selects the value International in the Parent control, the component will go and find the picklist values from that field.

Note that while the component assumes by default that all of the dependent picklists are on the same object as the Parent, you can specify a picklist on a different object, by entering it like this:


3) Map your Output Values

As always you need to map your output values to Flow variables so you can do something productive with the values entered by the user.

The two output values are shown here:

Hope this is useful! If you want to customize this control, the source code is available here.

Finally, I want to give a special shoutout to Piyush Soni. I used a lot of code from his solution for using APEX to get field describes. Nice work, Piyush!

Note that this is not an official Salesforce product or release.

Watch the Video . Get the Source Code

Adding Flow Screen Components to a Screen

A growing set of powerful yet easy-to-use screen components are available to Flow users.

I wanted to provide a little documentation for how screen components are added to screens. Once your org is updated to Spring ’18 or later, you’ll find a new Lightning Components choice at the bottom of your list of screen controls in Cloud Flow Designer:

Simply drag the control over to the right and drop it where you want it to go in your screen.

When you click on a Lightning Component screen element on the right, you can give it a title and then you need to select the component you want to use:

Read the documentation for your component to determine which inputs and outputs you should hook up.

Dynamic Questions in Lightning Flow

It’s now possible to create dynamic questions, where child questions appear and disappear based on the selection made in the parent question.

Here’s a video that demonstrates just a few of the useful things you can do with dynamic questions.

The implementation of dynamic questions takes advantage of Lightning Flow’s new ability, as of Spring ’18, to insert lightning components into flow screens. Using this, we’ve built a lightning component that produces dynamic questions upon request, and packaged it so that you can use it without touching code.

For more information, see https://github.com/alexed1/LightningFlowComponents/tree/master/flow_screen_components/dynamicQuestionFSC

The “Update Screen” Flow Action Component

Flow Action Components, also known as Local Actions, are a new Flow enhancement in pilot as part of the Spring ’18 release. They’re discussed more here.

This Component works in Lightning Experience.

We created the Update Screen component to address a small but annoying problem some of our customers were having as they integrate flows into their work. They would run a flow from a Quick Action button, and the flow would change the value of a field that was already on the screen. The screen wouldn’t know that the field had changed because the change is done in the cloud and the data on screen has already been downloaded.

Tack this Update Screen action on the end of that flow, though, and the screen will instantly update, and do so without a full page refresh.

We place the UpdateScreen action after we update the value

The component, like other Flow Action Components and Flow Screen Components is available for installation from our component repository. The installation process may be intimidating to non-developers but you do not actually need to know anything about development to install this component. If you can copy and paste and follow directions, you can install UpdateScreen into your org. And once it’s installed, it will always thereafter be available in the Cloud Flow Designer palette to be added to flows.

How Does It Work?

For those who want to look beneath the hood, UpdateScreen is actually an extremely simple component. It makes use of the Force:RecordData component produced by the Salesforce Platform team:

Here’s where the magic happens:

When the flow engine reaches a Flow Action Component it calls that component’s invoke method. In this case, UpdateScreen then calls upon the force:recordData component to reload the record, which causes the smart Lightning caching logic to refresh the correct record.

Working with Related Lists

Each Update Screen action can currently only trigger refresh for a single object. So a single Update Screen is not able, for example ,to refresh a parent object and several related actions at the same time. But there’s nothing preventing you would putting an Update Screen in a loop that iterates over Related List records, or stringing multiple Update Screens together.

Here’s an example:

This Contact has several related Credit Accounts:

The flow in the upper right closes Accounts, changing their status. You want the ones that are closed to be refreshed in the Related List in the lower left.

To accomplish this, the Flow loops over the changed Credit Accounts:

Each time, the UpdateScreen is passed the current element from the collection of changed items:

If necessary, a separate Update Screen can be used to update the parent object.

Using Update Screen as a Screen Component

You don’t have to be in the Local Actions pilot to try this out, though. You can also create a Flow Screen Component that does this, and insert it into one of your flow screens. That could make sense if your flow had a screen that you wanted the user to go to after the data was changed on the server. To learn more about creating Flow Screen Components, see the release notes.

Installation and Source Information

Using Salesforce SFDX With Docker — Authenticating and Opening your Scratch Org

SFDX revolutionizes the development process for Salesforce, but a few steps are necessary if you want to use it with Docker. I keep my dev environment in a Docker container, and I haven’t figured out how to get that container to open URL’s on my machine, so I need to use headless authentication. Fortunately, that’s working pretty well, but the docs aren’t quite fully fleshed out. Here are a few guidelines.

  1. Follow the instructions on https://developer.salesforce.com/docs/atlas.en-us.210.0.sfdx_dev.meta/sfdx_dev/sfdx_dev_auth_jwt_flow.htm to get authentication working between your docker command line and your dev hub-enabled Salesforce org. At the end of this, you should be able to run the sfdx force:auth:jwt:grant command and get a successful authentication. Here’s an example of one of my auth commands:

sfdx force:auth:jwt:grant -i 3MVG9SemV5D80oBfzS3G0K4.t5Sifyb7VXmlLeO1OmKYa632CSnEvgOwIXpzbIBqCKGMAFKejKqUm1Cq0dUP2 -u alex@df.flow.dev -f ~/dev/certificates/flowbolt/server.key — setdefaultdevhubusername

Successfully authorized alex@df.flow.dev with org ID 00DB0000000LRppMAG

2. Next you want to be able to create and open up the scratch org so you can use the results of any source pushes you do, and also make changes using Salesforce UI that you can then source pull down into your local project. This is a little opaque currently. Creation is straightforward, now that you’re authenticated. But when you try to open, following the instructions at the bottom of https://developer.salesforce.com/docs/atlas.en-us.210.0.sfdx_dev.meta/sfdx_dev/sfdx_dev_scratch_orgs_create.htm, you may just get a hang. There is probably a solution for this involving virtual X terminals but I haven’t figured it out yet, and it’s useful in any case to know the workaround, which is to use the “-r” flag to get the URL:

sfdx force:org:open -r

Access org 00D9A000000D1UhUAK as user test-j7ldiskpjtlh@example.com with the following URL: https://saas-computing-55-dev-ed.cs46.my.salesforce.com/secur/frontdoor.jsp?sid=00D9A000000D1Uh!AQ8AQHH98dOHdq2ylIaNFZEh6WSp9ogFKGDxAKwcnwPmAGZT8.xoH7qu7DuB1c.hSBNAHnG_nqBqxFWapn8xf7maoQUbx5KI

This returns a link that you can pop into your browser to immediately load up your scratch org. You’ll see any objects that you’ve source pushed.