Lightning Aura Components Developer Guide

Clouds with binary code floating aboveCloud with binary code floating above

No Results

Search Tips:

  • Please consider misspellings
  • Try different search keywords
Introducing Aura Components
Quick Start
Creating Components
Using Components
Aura Component Bundle Design Resources
Use Aura Components in Lightning Experience and the Salesforce Mobile App
Navigate Across Your Apps with Page References
Get Your Aura Components Ready to Use on Lightning Pages
Use Aura Components in Experience Builder
Use Aura Components with Flows
Considerations for Configuring Components for Flows
Customize Flow Screens Using Aura Components
Configure Components for Flow Screens
Control Flow Navigation from an Aura Component
Flow Navigation Actions
Customize the Flow Footer with an Aura Component
Build a Custom Navigation Model for Your Flow Screens
Customize the Flow Header with an Aura Component
Dynamically Update a Flow Screen with an Aura Component
Create Flow Local Actions Using Aura Components
Embed a Flow in a Custom Aura Component
Display Flow Stages with an Aura Component
Add Components to Apps
Integrate Your Custom Apps into the Chatter Publisher
Using Background Utility Items
Use Lightning Components in Visualforce Pages
Use Aura and Lightning Web Components Outside of Salesforce with Lightning Out (Beta)
Lightning Container
Communicating with Events
Communicating Across the DOM with Lightning Message Service
Creating Apps
Styling Apps
Developing Secure Code
Using JavaScript
Working with Salesforce Data
Testing Components
Debugging
Performance
Reference
PDF

Build a Custom Navigation Model for Your Flow Screens

Since Aura components have access to a flow screen’s navigation actions, you can fully customize how the user moves between screens. For example, hide the default navigation buttons and have the flow move to the next screen when the user selects a choice.

Example

This component (c:choiceNavigation) displays a script and a choice in the form of buttons.

A flow screen that has no navigation buttons. Instead, the body of the screen has Yes and No buttons.

c:choiceNavigation Component

<aura:component implements="lightning:availableForFlowScreens" access="global" >
   <!-- Get the script text from the flow -->    
   <aura:attribute name="scriptText" type="String" required="true" />
   <!-- Pass the value of the selected option back to the flow -->
   <aura:attribute name="value" type="String" />

   <!-- Display the script to guide the agent's call -->
   <div class="script-container">
      <div class="slds-card__header slds-grid slds-p-bottom_small slds-m-bottom_none">
         <div class="slds-media slds-media_center slds-has-flexi-truncate" >
            <div class="slds-media__figure slds-align-top">
               <h2><lightning:icon iconName="utility:quotation_marks"
                  title="Suggested script" /></h2>
            </div>
            <div class="slds-media__body">
               <ui:outputRichText class="script" value="{!v.scriptText}"/>
            </div>
         </div>
      </div>
   </div>
   <!-- Buttons for the agent to click, according to the customer’s response -->
   <div class="slds-p-top_large slds-p-bottom_large">
      <p><lightning:formattedText value="Customer Response" 
         class="slds-text-body_small" /></p>
      <lightning:buttongroup >
         <lightning:button label="Yes" aura:id="Participate_Yes" 
            variant="neutral" onclick="{!c.handleChange}"/>
         <lightning:button label="No" aura:id="Participate_No" 
            variant="neutral" onclick="{!c.handleChange}"/>
     </lightning:buttongroup>
   </div>
</aura:component>

c:choiceNavigation Design

The design resource includes the scriptText attribute, so you can set the script from the flow.

<design:component>
   <design:attribute name="scriptText" label="Script Text" 
      description="What the agent should say to the customer" />
</design:component>

c:choiceNavigation Style

.THIS.script-container {
   border: t(borderWidthThick) solid t(colorBorderBrand);
   border-radius: t(borderRadiusMedium);
}

.THIS .script {
   font-size: 1.125rem; /*t(fontSizeTextLarge)*/
   font-weight: t(fontWeightRegular);
   line-height: t(lineHeightHeading);
}

c:choiceNavigation Controller

When the user clicks either of the buttons, the JavaScript controller calls navigateFlow(“NEXT”), which is the equivalent of the user clicking Next. 

({
   handleChange : function(component, event, helper) {
      // When an option is selected, navigate to the next screen
      var response = event.getSource().getLocalId();
      component.set("v.value", response);
      var navigate = component.get("v.navigateFlow");
      navigate("NEXT");
   }
})

defaultTokens.tokens

The script in c:choiceNavigation uses tokens to stay in sync with the Salesforce Lightning Design System styles. 

<aura:tokens extends="force:base" >
</aura:tokens>