Get to Know Automation Components

Follow Along with Trail Together

Want to follow along with an expert as you work through this step? Take a look at this video, part of the Trail Together series.

(This clip starts at the 2:33 minute mark, in case you want to rewind and watch the beginning of the step again.)

Introduction

Automation components help you extend the functionality of Flow Builder by using Apex classes and Lightning components. There are three types of components that can be used with flow: invocable actions, flow screen components, and flow local actions. Let’s learn more about these components by looking at their code.

Invocable Actions

Sometimes the automation logic that you need stretches beyond the declarative capability of Flow Builder. Invocable actions give developers an opportunity to write any complex logic in Apex and expose it in Flow Builder in the form of useful declarative building blocks. 

Let’s check out one of the invocable actions that has been installed into your org—the Clone Record List action. This invocable action is used to clone a list of records from inside a flow.

View the Clone Record List Action

We haven’t installed all of the Automation Components packages for this project, so let’s navigate back to GitHub to explore the code for flow screen components.

1. Navigate to the Trailhead Sample Gallery.
2. In the Browse Demos section, search automation. Click Explore on GitHub in the Automation Components app tile.
3. Click src-collections | main/default/classes | CloneRecordList.cls to view the contents of the Apex class. (Click View Code if you can't see the contents of the Apex class.)
4. Note the InputParameters and OutputParameters inner classes. Properties in each class are annotated with @InvocableVariableenabling you to use them to pass data into and out of the flow. 

   // Wrapper class for input parameters
     global class InputParameters {
          @InvocableVariable(required=true)
          global List<SObject> collection;
     }
     //Wrapper class for output parameters
     global class OutputParameters {
          @InvocableVariable
          global List<SObject> collection;
     }
     

5. Note also the bulkInvoke Apex method. By annotating it with @InvocableMethod we can now invoke it as a flow action.
6. Finally, notice the use of the InputParameters and OutputParameters classes in the execution of the bulkInvokemethod.

   @InvocableMethod(label='Clones a list of records' category='Collections')
     global static List<OutputParameters> bulkInvoke(List<InputParameters> inputs) {
          List<OutputParameters> outputs = new List<OutputParameters>();
          for (InputParameters input : inputs) {
               OutputParameters output = new OutputParameters();
               output.collection = input.collection.clone();
               outputs.add(output);
          }
          return outputs;
     }

7. Click on automation-components to return to the project root directory.

When accessing the invocable action from the Flow Builder, you will see that it has pulled through the label and description of the action as well as the input and output parameters that are defined in the Apex class.

Flow Screen Components

Flow Builder comes with a number of screen components that you can use to create rich screens and to capture user interactions. As a developer, you can create custom screen components to enhance the user experience inside a screen flow.

Screen components can be created with Lightning Web Components (LWC) or Aura components. In this project, we focus on Lightning Web Components.

1. Click src-flows | main/default | lwc | flowPicker | flowPicker.js-meta.xml to open the contents of the Lightning web component.
2. Here you can see the standard metadata structure of a Lightning web component's js-meta.xmlfile.
   • Take a look at the <target> within the metadata. By adding lightning__FlowScreen as a target, the component is made visible to the Flow Builder.
   • Next are a number of properties that are being exposed to the flow inside the <property>tags. You can see that each property specifies a name, type, role, label, default text, and a description. This makes them easier to identify when accessed in the Flow Builder.

     <targets>
       <target>lightning__FlowScreen</target>
     </targets>
     <targetConfigs>
       <targetConfig targets="lightning__FlowScreen">
            <property
                 name="label"
                 type="String"
                 role="inputOnly"
                 label="Label"
                 default="Select a Flow"
                 description="Set the text to appear above the Flow selection box"/>
       </targetConfig>
     </targetConfigs>

3. When you’re done, return to the project root directory.

Flow Local Actions

A flow local action is an Aura component that executes an action in the user’s browser while using a screen flow. Unlike screen flows, a local action Aura component exposes no UI and is only a service component that interacts with the UI. This can be used to complete actions that modify the user interface or to retrieve data from a third-party system without going through the Salesforce server.

1. Click src-ui/main/default |aura | minimizeUtilityItem | minimizeUtilityItem.cmp to view the contents of the Aura component.

   <aura:component implements="lightning:availableForFlowActions" access="global">
     <lightning:utilityBarAPI aura:id="utilityBar" />
   </aura:component>

2. Notice the standard Aura component that implements lightning:availableForFlowActions. This allows the component to be accessed inside the Flow Builder.
3. Next, utilityBarApi is used to trigger a user interface modification with the Aura component.
4. Note that there is no markup within the component, because flow local actions do not have a user interface.

When you’re done, click the Back button to return to the components directory.

Now let's look at the JavaScript behind the action.

1. Click minimizeUtilityItemController.js.

   ({
     invoke: function (component) {
          var utilityAPI = component.find('utilityBar');
          // Minimize utility bar if it's open
          utilityAPI.getUtilityInfo()
          .then(function (response) {
               if (response.utilityVisible) {
               utilityAPI.minimizeUtility();
               }
          })
          .catch(function (error) {
               console.error(error);
          });
     }
   });

2. Notice that the controller starts with the invoke function. The invoke is called when the local action is run in the flow.
3. Next, the action runs through the code in the body of the function. In this example, we call utilityAPI.minimizeUtility(); to minimize the utility bar.

Now you’ve had a tour of the different types of automation components, you’re ready to dive into creating a flow that uses components from the sample app!

We won’t check any of your work in this step. Click Verify to go to the next step.