July Flow Update

Disclaimer: Content and opinions are my own and not the views of my employer. The software discussed here is not official Salesforce software.

Some nice Flow-related posts from the community

Terrence Chiu with a great example that incorporates both the lightning:datatable component and record:editForm.

Part 1

Part 2

Rich Engelhard has a two-part post that also incorporates datatable and goes into fabulous detail.

Part 1

Part 2

More enhancements to the Lookup Component

Eric Smith has added “default” functionality: You can enter a default value for the input field (I2_Display Which Field). When provided, it will override any WhereClause and display the default value as Placeholder text in the input field. You will still need to select the drop-down then select the single value that is displayed. If you start to overtype the input field, the default value will be cleared and the WhereClause (if provided) will be reset and the field will act like a normal filtered lookup with search. Install the updated version here.

Salesforce Lightning Flow Extensions — June Update

Disclaimer: Content and opinions are my own and not the views of my employer. The software discussed here is not official Salesforce software.

  1. New Image component brings Images, Borders, CSS Styling, Padding, Margins and much more to Flow Screens

Watch the video

Read the Blog Post.

2. Lookup has been updated to fix some nasty bugs

Install the latest Lookup component here. You may need to first uninstall the existing one.

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.

Transitioning Spring ’18 Local Actions to Summer ’18

This Pilot Update is for Salesforce customers participating in the Spring ’18 pilot for Flow Local Actions.

Local Actions that run on Spring ’18 orgs are not compatible with Summer ’18. Summer ’18 versions of the sample actions made available as part of the pilot are available on this site and will need to be installed when your org running Local Actions is upgraded to Summer ’18.

You may need to remove the old Local Action from any flows in which you’ve installed it. (If you are getting an error message Error parsing file: 'localAction' is not a valid value for the enum 'InvocableActionType' then you have a flow that still has a saved reference to the old version. See “InvocableActionType Change”, below.

For Developers of Local Actions

If you have created Local Actions using the Spring ’18 pilot, you will want to be aware of the following:

Existing Local Actions require the following changes to work with Summer ’18:

  1. The marker interface has changed from flowruntime:availableForLocalInvocableActions to lightning:availableForFlowActions. This change is made in the “cmp” file of your lightning component file set.
  2. The “callback” mechanism has been removed. Both of these lines, which will exist in Spring ’18 local actions, must be removed to work on Summer ’18. If you wish to pass success vs. failure information at the end of your local action, you can do it one of two ways:
    1. create a variable and set its value, and then have the flow subsequently decision on that value
    2. use the recommended async approach, involving Promises (see the release notes and developer guide documentation, available soon).

Other transition notes:

We encourage builders of Local Actions to use promises. An example of that is available in the release notes for Summer ’18. An example of the recommended form is shown below.

InvocableActionType Change. If you have created flows that use local actions, InvocableAction enum in the Metadata API, the enum value for a local action has changed from “localAction” to “component”. One place this manifests if if you have extracted metadata for a flow that had a local action. The file will have a section that looks like this:

<actionCalls>
 <name>Success</name>
 <label>Success</label>
 <locationX>595</locationX>
 <locationY>431</locationY>
 <actionName>c:showToast</actionName>
 <actionType>localAction</actionType> 

In cases like this change “localAction” to “component” to avoid the error message:

Error parsing file: 'localAction' is not a valid value for the enum 'InvocableActionType'

Recommended Form for Invoke Methods as of Summer ’18

 invoke : function(component, event, helper) {
           var args = event.getParam("arguments");


           return new Promise(function(resolve, reject) {
               var xhttp = new XMLHttpRequest();
               xhttp.onreadystatechange = $A.getCallback(function() {
                   if (this.readyState === 4) { // DONE
                        if (this.status >= 200 && this.status < 300) {
                            var response = JSON.parse(xhttp.responseText);
                                component.set("v.churnVal", response);
                                resolve();
                        } else {
                            var errorText = "";
                            if (this.status === 0) {
                                errorText = 'Request has been terminated\nPossible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.';
                            } else {
                                errorText = this.statusText;
                            }
                                reject(new Error(errorText));
                        }
                    }
               });
               var customerId = component.get("v.customerId");
               xhttp.open("GET", "https://upp57qbj5b.execute-api.us-west-1.amazonaws.com/production/customer/"+customerId+"/churn", true);
               xhttp.send(null);
           });    
        } 

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.

moved

Flow Extensions — May Update

We’re keeping busy getting ready for the Summer ’18 release and doing the planning for the work that will go into Winter’ 19. Here’s what’s new in the component world:

  1. New Navigation Buttons give your screens enhanced finish behavior.

Watch the video

2. Local Actions are about to go Generally Available, with Summer ’18.

Read the Local Action update.

3. Navigation to Related List is the latest Flow Action

Check it out 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.