Skip to content

Commit 99b0460

Browse files
author
Ryan Cox
committed
flow nav buttons
1 parent 7651085 commit 99b0460

6 files changed

+212
-154
lines changed

‎force-app/main/default/aura/RC_FlowNavButtons/RC_FlowNavButtons.cmp

+103
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,103 @@
1+
<aura:component description="RC_FlowNavButtons" implements="lightning:availableForFlowScreens,flexipage:availableForAllPageTypes,forceCommunity:availableForAllPageTypes" access="global">
2+
3+
<!-- input -->
4+
<aura:attribute name="componentClass" type="String" access="global" default="slds-float_right slds-p-top_large slds-p-bottom_large" />
5+
6+
<!-- button 1 -->
7+
<aura:attribute name="showButton1" type="Boolean" access="global" default="true"/>
8+
<aura:attribute name="button1_label" type="String" access="global" default="Cancel"/>
9+
<aura:attribute name="button1_variant" type="String" access="global" default="DESTRUCTIVE"/>
10+
<aura:attribute name="button1_class" type="String" access="global" default="slds-size_12-of-12" />
11+
<aura:attribute name="button1_padding" type="String" access="global" default="10px 10px 10px 10px" />
12+
<aura:attribute name="button1_horizontalAlign" type="String" access="global" default="" />
13+
<aura:attribute name="button1_buttonClass" type="String" access="global" default="" />
14+
<aura:attribute name="button1_buttonFlowAction" type="String" access="global" default="NEXT" />
15+
16+
<!-- button 2 -->
17+
<aura:attribute name="showButton2" type="Boolean" access="global" default="true"/>
18+
<aura:attribute name="button2_label" type="String" access="global" default="Back"/>
19+
<aura:attribute name="button2_variant" type="String" access="global" default="NEUTRAL"/>
20+
<aura:attribute name="button2_class" type="String" access="global" default="slds-size_12-of-12" />
21+
<aura:attribute name="button2_padding" type="String" access="global" default="10px 10px 10px 10px" />
22+
<aura:attribute name="button2_horizontalAlign" type="String" access="global" default="" />
23+
<aura:attribute name="button2_buttonClass" type="String" access="global" default="" />
24+
<aura:attribute name="button2_buttonFlowAction" type="String" access="global" default="NEXT" />
25+
26+
<!-- button 3 -->
27+
<aura:attribute name="showButton3" type="Boolean" access="global" default="true"/>
28+
<aura:attribute name="button3_label" type="String" access="global" default="Next"/>
29+
<aura:attribute name="button3_variant" type="String" access="global" default="BRAND"/>
30+
<aura:attribute name="button3_class" type="String" access="global" default="slds-size_12-of-12" />
31+
<aura:attribute name="button3_padding" type="String" access="global" default="10px 10px 10px 10px" />
32+
<aura:attribute name="button3_horizontalAlign" type="String" access="global" default="" />
33+
<aura:attribute name="button3_buttonClass" type="String" access="global" default="" />
34+
<aura:attribute name="button3_buttonFlowAction" type="String" access="global" default="NEXT" />
35+
36+
<!-- private -->
37+
<aura:attribute name="button1_clicked" type="Boolean" default="false"/>
38+
<aura:attribute name="button2_clicked" type="Boolean" default="false"/>
39+
<aura:attribute name="button3_clicked" type="Boolean" default="false"/>
40+
41+
<!-- output -->
42+
<aura:attribute name="buttonClicked" type="String" access="global"/>
43+
44+
<!-- handlers -->
45+
<aura:handler name="change" value="{!v.button1_clicked}" action="{!c.button1_Clicked}"/>
46+
<aura:handler name="change" value="{!v.button2_clicked}" action="{!c.button2_Clicked}"/>
47+
<aura:handler name="change" value="{!v.button3_clicked}" action="{!c.button3_Clicked}"/>
48+
49+
<!-- body -->
50+
<div class="{!v.componentClass}">
51+
52+
<lightning:layout>
53+
54+
<aura:if isTrue="{!v.showButton1}">
55+
<lightning:layoutItem>
56+
<c:RC_FlowButton navigateFlow="{!v.navigateFlow}"
57+
buttonLabel="{!v.button1_label}"
58+
variant="{!v.button1_variant}"
59+
class="{!v.button1_class}"
60+
padding="{!v.button1_padding}"
61+
horizontalAlign="{!v.button1_horizontalAlign}"
62+
buttonClass="{!v.button1_buttonClass}"
63+
buttonFlowAction="{!v.button1_buttonFlowAction}"
64+
buttonClicked="{!v.button1_clicked}"
65+
/>
66+
</lightning:layoutItem>
67+
</aura:if>
68+
69+
<aura:if isTrue="{!v.showButton2}">
70+
<lightning:layoutItem>
71+
<c:RC_FlowButton navigateFlow="{!v.navigateFlow}"
72+
buttonLabel="{!v.button2_label}"
73+
variant="{!v.button2_variant}"
74+
class="{!v.button2_class}"
75+
padding="{!v.button2_padding}"
76+
horizontalAlign="{!v.button2_horizontalAlign}"
77+
buttonClass="{!v.button2_buttonClass}"
78+
buttonFlowAction="{!v.button2_buttonFlowAction}"
79+
buttonClicked="{!v.button2_clicked}"
80+
/>
81+
</lightning:layoutItem>
82+
</aura:if>
83+
84+
<aura:if isTrue="{!v.showButton3}">
85+
<lightning:layoutItem>
86+
<c:RC_FlowButton navigateFlow="{!v.navigateFlow}"
87+
buttonLabel="{!v.button3_label}"
88+
variant="{!v.button3_variant}"
89+
class="{!v.button3_class}"
90+
padding="{!v.button3_padding}"
91+
horizontalAlign="{!v.button3_horizontalAlign}"
92+
buttonClass="{!v.button3_buttonClass}"
93+
buttonFlowAction="{!v.button3_buttonFlowAction}"
94+
buttonClicked="{!v.button3_clicked}"
95+
/>
96+
</lightning:layoutItem>
97+
</aura:if>
98+
99+
</lightning:layout>
100+
101+
</div>
102+
103+
</aura:component>

‎force-app/main/default/aura/RC_FlowNavButtons/RC_FlowNavButtons.cmp-meta.xml

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<?xml version="1.0" encoding="UTF-8"?>
2+
<AuraDefinitionBundle xmlns="http://soap.sforce.com/2006/04/metadata">
3+
<apiVersion>51.0</apiVersion>
4+
<description>A Lightning Component Bundle</description>
5+
</AuraDefinitionBundle>

‎force-app/main/default/aura/RC_FlowNavButtons/RC_FlowNavButtons.design

+40
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<design:component>
2+
3+
<!-- input -->
4+
<design:attribute name="componentClass" label="[a] Component Class" description="CSS class applied to the component (the group of buttons). Use this to position the buttons. Default position is aligned right with: slds-float_right" />
5+
6+
<!-- input: button 1 -->
7+
<design:attribute name="showButton1" label="[Button 1] a. Show Button" />
8+
<design:attribute name="button1_label" label="[Button 1] b. Label" />
9+
<design:attribute name="button1_variant" label="[Button 1] c. Variant" description="BASE, NEUTRAL, BRAND, BRAND-OUTLINE, DESTRUCTIVE, DESTRUCTIVE-TEXT, INVERSE, and SUCCESS" />
10+
<design:attribute name="button1_class" label="[Button 1] d. Component CSS class" description="Component CSS class (default: slds-size_12-of-12). If this component launches an inline flow, this class will control the area that contains the flow. " />
11+
<design:attribute name="button1_padding" label="[Button 1] e. Style Padding" description="padding format: top right bottom left; default: 10px 10px 10px 10px" />
12+
<design:attribute name="button1_horizontalAlign" label="[Button 1] f. Horizontal Align" description="center, space, spread, end"/>
13+
<design:attribute name="button1_buttonClass" label="[Button 1] g. Button CSS class" description="CSS class applied to the button (example: slds-align_absolute-center)"/>
14+
<design:attribute name="button1_buttonFlowAction" label="[Button 1] h. Button Flow Action" description="NEXT, BACK, PAUSE, RESUME, and FINISH" />
15+
16+
<!-- input: button 2 -->
17+
<design:attribute name="showButton2" label="[Button 2] a. Show Button" />
18+
<design:attribute name="button2_label" label="[Button 2] b. Label" />
19+
<design:attribute name="button2_variant" label="[Button 2] c. Variant" description="BASE, NEUTRAL, BRAND, BRAND-OUTLINE, DESTRUCTIVE, DESTRUCTIVE-TEXT, INVERSE, and SUCCESS" />
20+
<design:attribute name="button2_class" label="[Button 2] d. Component CSS class" description="Component CSS class (default: slds-size_12-of-12). If this component launches an inline flow, this class will control the area that contains the flow. " />
21+
<design:attribute name="button2_padding" label="[Button 2] e. Style Padding" description="padding format: top right bottom left; default: 10px 10px 10px 10px" />
22+
<design:attribute name="button2_horizontalAlign" label="[Button 2] f. Horizontal Align" description="center, space, spread, end"/>
23+
<design:attribute name="button2_buttonClass" label="[Button 2] g. Button CSS class" description="CSS class applied to the button (example: slds-align_absolute-center)"/>
24+
<design:attribute name="button2_buttonFlowAction" label="[Button 2] h. Button Flow Action" description="NEXT, BACK, PAUSE, RESUME, and FINISH" />
25+
26+
<!-- input: button 3 -->
27+
<design:attribute name="showButton3" label="[Button 3] a. Show Button" />
28+
<design:attribute name="button3_label" label="[Button 3] b. Label" />
29+
<design:attribute name="button3_variant" label="[Button 3] c. Variant" description="BASE, NEUTRAL, BRAND, BRAND-OUTLINE, DESTRUCTIVE, DESTRUCTIVE-TEXT, INVERSE, and SUCCESS" />
30+
<design:attribute name="button3_class" label="[Button 3] d. Component CSS class" description="Component CSS class (default: slds-size_12-of-12). If this component launches an inline flow, this class will control the area that contains the flow. " />
31+
<design:attribute name="button3_padding" label="[Button 3] e. Style Padding" description="padding format: top right bottom left; default: 10px 10px 10px 10px" />
32+
<design:attribute name="button3_horizontalAlign" label="[Button 3] f. Horizontal Align" description="center, space, spread, end"/>
33+
<design:attribute name="button3_buttonClass" label="[Button 3] g. Button CSS class" description="CSS class applied to the button (example: slds-align_absolute-center)"/>
34+
<design:attribute name="button3_buttonFlowAction" label="[Button 3] h. Button Flow Action" description="NEXT, BACK, PAUSE, RESUME, and FINISH" />
35+
36+
<!-- output -->
37+
<design:attribute name="buttonClicked" label="[Output] Button Clicked" description="Label of the button that was clicked" />
38+
39+
40+
</design:component>

‎force-app/main/default/aura/RC_FlowNavButtons/RC_FlowNavButtonsController.js

+13
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
({
2+
button1_Clicked: function(component, event, helper) {
3+
helper.setButtonClicked(component, "button1");
4+
},
5+
6+
button2_Clicked: function(component, event, helper) {
7+
helper.setButtonClicked(component, "button2");
8+
},
9+
10+
button3_Clicked: function(component, event, helper) {
11+
helper.setButtonClicked(component, "button3");
12+
},
13+
});

‎force-app/main/default/aura/RC_FlowNavButtons/RC_FlowNavButtonsHelper.js

+8
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
({
2+
setButtonClicked: function(component, buttonClicked) {
3+
var buttonLabelVar = "v." + buttonClicked + "_label";
4+
var buttonLabel = component.get(buttonLabelVar);
5+
console.log('RC_FlowNavButtonsHelper > buttonClicked: ' + buttonClicked + ', label: ' + buttonLabel);
6+
component.set("v.buttonClicked", buttonLabel);
7+
},
8+
});

0 commit comments

Comments
 (0)