I am trying to integrate the visual picker lwc into a screen flow, but I cannot find how to store the selected value of the visual picker in a flow variable.
There's two options in my lwc : "Téléphone" and "Agence". When the screen flow is launched and the user clicks on the "Téléphone" image I want to store "phone" in a variable and when she or he clicks on "Agence" I want to store agence.
The variable I'd like the value to be stored in is called "canalChoisi".
I am new to coding so for all I know this isn't possible, but if anyone has any idea on how to make this work or who can point me in the right direction it would be very much appreciated :).
Component
<aura:component implements="lightning:availableForFlowScreens" access="global">
<aura:attribute name="text" type="string" />
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Canal de la demande</legend>
<div class="slds-form-element__control">
<!-- Option Téléphone -->
<div class="slds-visual-picker slds-visual-picker_medium">
<input aura:id="phone" type="radio" id="visual-picker-85" name="options" value="phone" onclick="{!c.handleonclick}" />
<label for="visual-picker-85">
<span class="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
<span>
<span class="slds-icon_container">
<lightning:icon iconName="action:call" size="large" alternativeText="Indicates approval"/></span>
</span>
</span>
<span class="slds-visual-picker__body">
<span class="slds-text-heading_small">Téléphone</span>
</span>
</label>
</div>
<!-- Option Agence -->
<div class="slds-visual-picker slds-visual-picker_medium">
<input aura:id="agence" type="radio" id="visual-picker-86" value="agence" name="options" onclick="{!c.handleonclick}" />
<label for="visual-picker-86">
<span class="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
<span>
<span class="slds-icon_container">
<lightning:icon iconName="action:new_person_account" size="large" alternativeText="Indicates approval"/></span>
</span>
</span>
<span class="slds-visual-picker__body">
<span class="slds-text-heading_small">Agence</span>
</span>
</label>
</div>
<!--{}-->
</div>
</fieldset>
</aura:component>
Controller
({
handleonclick : function(cmp, event) {
var phone = document.getElementById("visual-picker-85").value;
console.log("current text: " + phone);
}
, handleonclick : function(cmp, event) {
var agence = document.getElementById("visual-picker-86").value;
console.log("current text: " + agence);
}
})
Design
<design:component>
<design:attribute name="text" Label="canalChoisi"/>
</design:component>
Follow this video - http://somup.com/cq63qzfc96 Markup:
<aura:component implements="lightning:availableForFlowScreens" access="global">
<aura:attribute name="canalChoisi" type="string" access="public" />
<fieldset class="slds-form-element">
<legend class="slds-form-element__legend slds-form-element__label">Canal de la demande</legend>
<div class="slds-form-element__control">
<!-- Option Téléphone -->
<div class="slds-visual-picker slds-visual-picker_medium">
<input aura:id="phone" type="radio" id="visual-picker-85" name="options" value="phone" onclick="{! c.handleOnClick }" />
<label for="visual-picker-85">
<span class="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
<span>
<span class="slds-icon_container">
<lightning:icon iconName="action:call" size="large" alternativeText="Indicates approval"/>
</span>
</span>
</span>
<span class="slds-visual-picker__body">
<span class="slds-text-heading_small">Téléphone</span>
</span>
</label>
</div>
<!-- Option Agence -->
<div class="slds-visual-picker slds-visual-picker_medium">
<input aura:id="agence" type="radio" id="visual-picker-86" value="agence" name="options" onclick="{! c.handleOnClick }" />
<label for="visual-picker-86">
<span class="slds-visual-picker__figure slds-visual-picker__text slds-align_absolute-center">
<span>
<span class="slds-icon_container">
<lightning:icon iconName="action:new_person_account" size="large" alternativeText="Indicates approval"/>
</span>
</span>
</span>
<span class="slds-visual-picker__body">
<span class="slds-text-heading_small">Agence</span>
</span>
</label>
</div>
</div>
</fieldset>
</aura:component>
Design:
<design:component>
<design:attribute name="canalChoisi" Label="Canal Choisi"/>
</design:component>
JS:
({
handleOnClick : function(component, event, helper) {
component.set( "v.canalChoisi", event.srcElement.value );
}
})
