Posts

The New Image Flow Screen Component

Note: This is not an official Salesforce posting or an official piece of Salesforce technology.

Watch the video.

I will be the first to admit that it’s not like you couldn’t put an image in a flow screen before now. The techniques are out there, but the pathways have been, shall we say, convoluted. Here’s a message from 2012:

Got that? Or maybe do it this way:

Over this weekend, I decided to take advantage of Lightning Component technology and the new Lightning Navigation to make a new component that’s easy to deploy and provides access to serious css styling.

The result is a new component called imageFSC. Like other Flow Screen Components, it comes in a package that you install into your org, and you add it to regular Flow Screens that are either running in Lightning Experience or are in Visualforce pages in the Flow container component.

Here’s an example of a screen

Let’s take a look at how this is done.

Images are Static Resources

To start with, you have to identify the specific images you want, and upload them to your Salesforce org as Static Resources.

I find the term “Static Resources” somewhat off-putting, but this is really just a storage location where you can stick images and other data files.

The simplest implementation of an image is this:

As you can see, you only have to provide the imageFSC component with a single input value, the name of your Static Resource.

These images are pretty big, but you can use css directives to resize your images:

The configuration for that looks like this:

Note that I have to use px to specify that I’m talking about pixels. The documentation for this component is here, and it provides links to some of the source material for learning about what’s possible with each of these attributes. For image height and width, you can, for example, use any of these:

  • in: inches
  • cm: centimeters
  • mm: millimeters
  • pt: points — the points used by CSS are equal to 1/72nd of 1in.
  • pc: picas — 1pc is equal to 12pt.
  • px: pixel units — 1px is equal to 0.75pt.

Let’s talk about positioning. If I make my screen wide enough, you can see that these two images end up on the same line:

That’s because the imageFSC component uses span elements instead of div elements. This allows you to put images side by side. Suppose you don’t want to? let’s say that instead we want to center these images like this:

The configuration involves two steps. First we instruct the browser to treat an image like a block (something that runs the full length of the screen from right to left), and then we tell it to auto-center it:

The attribute styleDisplayAsBlock defaults to false but should be set true if you want centering behavior. Note that you can enter a full four margin configuration into styleMargin or configure the four margin values separately.

Improving Presentation: Thumbnails

You can create a thumbnail effect by setting border values as follows:

This results in a border that looks like this:

Resizing Images Proportionally

To resize images while maintaining their proportion, use a combination of “auto” width and height and specific max-width and max-height:

In this image, the two photographs use that approach:

Showing Images On The Same Line

You can also specify that images should use a percentage of the total width. Here, each of the bottom images has been given 50% of their block:

Here’s the configuration:

I don’t actually need to set styleDisplayAsBlock to false. The fine tuning of the image Height has allowed me to match up two images with different size.

Using Images as Navigation

You can also choose to allow people to click on your image and have something happen, just like regular web page images. There are basically three things you can do with this component when someone clicks on an image:

  1. Move the Flow (equivalent to clicking Next, Previous, or Finish)
  2. Load a Web URL into another tab (Lightning Experience only)
  3. Replace the flow with another Salesforce page (Lightning Experience only)

Here’s an example, where two imageFSC components are used to provide custom Next and Back buttons:

The configuration of these images is:

There’s more information about flow transitions in the navigationButton component writeup.

I’ll cover the details of flow navigation in a later blog post. For now, the documentation is available here.

Want to install this component? You can do so here.

Strategy Crafter: Introduction

Overview
Strategy Crafter is a lightweight graphical tool for editing and managing Recommendation Strategies for Einstein Next Best Action. It is not an official Salesforce application. It was built by some members of the community. The real Strategy Builder will be delivered as part of later releases of Einstein Next Best Action. In the meantime, though, the Crafter can simplify the work to build and maintain Strategies.


Understanding the Strategy Pipeline

The Strategy is a new Salesforce element that lies at the heart of creating great recommendations. Information about Strategies is available in the official Salesforce pilot documentation, so these tool docs will assume you know about them.

Automatic Saving
Changes to strategies are automatically saved in the background and all strategies are implicitly ‘Active’ just like all changes to Salesforce records immediately take effect. There is no automatic versioning (as there is in Lightning Flow). You may want to use the Duplicate Strategy menu items to create copies. There’s also When you click Save in the Crafter, it deploys an XML metadata version of the current strategy to your org, overwriting any version that’s there.

Export and Import
Under the covers, the main purpose of this tool is to help you generate the complex XML documents that drive Salesforce. You can export and import these easily from the menu.
 
 Strategy Crafter ONLY WORKS WITH SUMMER ’18 ORGS.

Installation

Using Strategy Crafter

After installing, you should find a Strategy Crafter tab in the App Launcher. Select it to load the Strategy Crafter.


Loading a Strategy
 When you first install, you will probably not have any saved Strategies, so you should either create a New one from scratch or use the Import from XML menu item to paste an existing one in as XML. Here are some sample xml files in 214 XML format
 
 
 Activating/Publishing a Strategy
 Saving a Strategy deploys and activates it. Once you save a Strategy you should be able to configure the Next Best Action lightning component by providing the name of the Strategy, and it should start to produce Propositions.

Learn More: Tutorial 1

Reporting Issues

  1. Email them here for now.

Strategy Crafter Home

moved here.

Lightning Flow Local Actions — Summer Update

The Local Actions feature in Lightning Flow becomes generally available in the Summer ’18 release of Salesforce. This feature extends the range of things you can do with flow by allowing lightning component-based flow extensions.

Flow has long had the ability to incorporate extensions that leverage Apex classes and recently gained the ability to leverage arbitrary REST endpoints via the Open API specification (aka Swagger) via Salesforce’s External Services feature. However, both of those technologies execute in the Salesforce cloud, while Local Actions execute, like all lightning components, on your device in the browser.

The first thing this allows you to do is Browser Integration. The browser provides many useful features that websites use extensively, such as popping up alerts and playing sound. Available Local Actions that can be installed into your Salesforce org include Load Web Page, Play Sound, and Show Toast.

Another powerful capability is Direct Data Queries. Local Actions can make RESTful calls, and these calls travel directly from your browser to the target web service without going through the Salesforce cloud (which is how RESTful calls made via Apex and External Services work). If you have on-premises data services or a private cloud, you might like this ability to avoid round-tripping through Salesforce and an external port in your firewall.

A third powerful feature enabled by Local Actions is Improved Flow Finish Behaviors. As Salesforce has improved the range of places where you can insert a flow, the need has grown for greater control over “what happens when the flow is done?” You can now insert flow elements at the end of your flow that result in the loading of a new web page, navigation to a specific salesforce record, and navigation to a related list. And definitely check out the new Navigation Buttons.

Running Local Actions in Summer ‘18

Local Actions are generally available in Summer ’18. You only have to make sure that your org is properly configured to use lightning components. To do this:

  1. you must have My Domain enabled and deployed
  2. you must have the “Enable Lightning Runtime for Flows” checkbox enabled in Setup — Process Automation Settings

You do not need to be using the lightning experience to use these flow extensions, but if you’re running in the classic experience you need to use the lightning flow component on a visualforce page. (Furthermore, some of the local actions use force events that do not run properly when you run flows from Flow Setup, which doesn’t use a standard implementation of the lightning container. Those local actions are the “navigate” actions.)

Transitioning Spring ’18 Local Actions to Summer ‘18

If you have local actions that you’ve built yourself on a Spring ’18 org, you’ll need to modify them to run on Summer ’18, because the interfaces changed.

If you installed packages from lightningflow.net, look for new Summer ’18 versions here now.

If you built your own, more information is provided here.

Flow Extensions April Update

  1. Lookup component now offers filtering

Due to huge code contributions from Eric Smith and datapharmer, the Lookup screen component has been substantially enhanced.
a) You can now filter the Lookup component based on a particular field:

b) but you can also choose to filter based on a where clause.

For example, if you wish to return only accounts of type “Vendor” or “Partner” you could enter the Object Name: “Account” and the where clause: “Type=’Vendor’ or Type=’Partner’

c) Finally, you can even create Dependent Lookup components, where the user looks something up in component 1, and then component 2 is filtered baed on the component 1 selection:

2. New NavigateToSObject Local Action

This great new action component from Salesforce Flow VP Arnab Bose provides a powerful new tool for controlling finish behavior. For example, you might have a flow that generates a work record. At the end of the flow, you can use this component to load the work record into your browser automatically.

Note that like all Local Action, this one requires that Spring ’18 orgs be enrolled in the open pilot, which you can request from support. Summer ’18 orgs will have this functionally generally available.

3. Summer ’18 versions of Local Actions Available

Summer ’18 orgs are starting to become available over the next 8 weeks. If you have one, your Spring ’18 Local Actions will stop working because of some changes made to interface names. However, Summer ’18 versions of all of the local actions at www.lightningflow.net are now available.

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.