As it stands I have created a Lightning Component which acts to streamline adding of products.
I have created a switch case to list out my possible products and when I click on the iconbutton I was to add the selected product to an array but seem to be having trouble parsing the value across.
I have created a handleproduct function which I want to take the selected value from my picklist and add it to the options array but I seem to be misunderstanding how to make this functionality happen. Could anyone point me in the right direction of what should be housed inside this function. Thanks
As it stands my code looks like this.
AddProductsComponent.cmp
<aura:component controller="AddProductsController" implements="flexipage:availableForAllPageTypes,force:hasRecordId" access="global">
<aura:attribute name="opportunity" type="Opportunity"/>
<aura:attribute name="CNP" type="PricebookEntry[]"/>
<aura:attribute name="oppId" type="String" default="{!v.recordId}"/>
<aura:attribute name="cardType" type="String" default="No Type"/>
<aura:attribute name="productList" type="String[]" />
<aura:attribute name="options" type="String[]" />
<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<aura:handler name="change" value="{!v.cardType}" action="{!c.handleValueChange}"/>
<!--<aura:handler name="change" value="{!v.options}" action="{!c.handleSelect}"/> -->
<aura:handler name="add" value="{!v.productList}" action="{!c.handleProduct}"/>
<div class="form-element__group">
<h3 class="slds-section-title--divider">SELECT A CARD TYPE</h3>
<br></br>
<ui:button label="Card Not Present" press="{!c.AddCNP}"/>
<ui:button label="Card Present" press="{!c.AddCP}"/>
<ui:button label="Ecommerce" press="{!c.AddECOM}"/>
<h1>{!v.cardType} Selected</h1>
</div>
<br></br>
<fieldset class="slds-form--compound">
<div class="form-element__group">
<h3 class="slds-section-title--divider">Product Information</h3>
<div class="slds-form-element__row"/>
<div class="slds-form-element__row">
<div class="slds-form-element slds-size--1-of-2">
<ui:inputSelect class="slds-select" aura:id="lob" change="{!c.handleSelect}">
<ui:inputSelectOption text="--Select Product--" value="0"/>
<ui:inputSelectOption text="Terminal" value="1"/>
<ui:inputSelectOption text="Gateway" value="2"/>
</ui:inputSelect>
</div>
<div class="slds-form-element slds-size--1-of-2">
<ui:inputSelect class="slds-select" aura:id="productType">
<ui:inputSelectOption text="--Select Product--" value="0"/>
</ui:inputSelect>
</div>
</div>
<div class="align-right">
<lightning:buttonicon iconName="utility:add" size="medium" alternativeText="Add" onclick="{!c.handleProduct}"/>
</div>
<h1>Options: {!v.options}</h1>
<div class="slds-form-element__row"/>
</div>
</fieldset>
<h1>{!v.CNP}</h1>
</aura:component>
AddProductsComponent.js
({
doInit : function(component, event, helper) {
var action = component.get("c.getOpp");
action.setParams({
"oppId": component.get("v.recordId")
});
action.setCallback(this, function(a) {
console.log("Test :" + a.getReturnValue());
var state = a.getState();
if (state === "SUCCESS") {
component.set("v.opportunity", a.getReturnValue());
}
else{
console.log('Error init function' + state);
}
});
$A.enqueueAction(action);
},
handleValueChange : function (component, event, helper) {
// handle value change
console.log("old value: " + event.getParam("oldValue"));
console.log("current value: " + event.getParam("value"));
},
AddCNP : function(component, event, helper) {
component.set("v.cardType", "Card Not Present");
},
AddCP : function(component, event, helper) {
component.set("v.cardType", "Card Present");
},
AddECOM : function(component, event, helper) {
component.set("v.cardType", "Ecommerce");
},
handleSelect : function(cmp, event) {
var selectCmp = cmp.find("lob").get("v.value");
console.log(selectCmp);
var opts;
console.log(selectCmp);
switch(selectCmp)
{
case "Terminal":
opts = [
{ class: "optionClass", label: "--Select Product--", value: "0", selected: "true" },
{ class: "optionClass", label: "Verifone VX680 (wifi with base)", value: "01t9E0000003i9zQAA"},
{ class: "optionClass", label: "Verifone VX670 Bluetooth PSTN", value: "01t9E0000003i8cQAA"},
{ class: "optionClass", label: "Ingenico ICT220 + IPP350", value: "01t9E0000003i9aQAA"},
{ class: "optionClass", label: "Ingenico IWL252", value: "01t9E0000003i9GQAQ"},
{ class: "optionClass", label: "Sagepay DCC VX680 GPRS", value: "01t9E0000003iAiQAI"},
{ class: "optionClass", label: "Verifone VX680 (wifi without base)", value: "01t9E0000003i9uQAA"},
{ class: "optionClass", label: "Spire M4240 - Bluetooth", value: "01t9E0000003i96QAA"},
{ class: "optionClass", label: "Sagepay DCC VX680 WIFI", value: "01t9E0000003iAYQAY"},
{ class: "optionClass", label: "Spire M4230 - GPRS", value: "01t9E0000003i9BQAQ"},
{ class: "optionClass", label: "Ingenico ICT250", value: "01t9E0000003i9QQAQ"},
{ class: "optionClass", label: "Spire T4220", value: "01t9E0000003i91QAA"},
{ class: "optionClass", label: "Verifone VX520 (countertop)", value: "01t9E0000003i9fQAA"},
{ class: "optionClass", label: "Verifone VX810", value: "01t9E0000003i8SQAQ"},
{ class: "optionClass", label: "Ingenico ICT220", value: "01t9E0000003i9VQAQ"},
{ class: "optionClass", label: "Verifone VX510", value: "01t9E0000003i8mQAA"},
{ class: "optionClass", label: "Verifone VX675 (GPRS without base)", value: "01t9E0000003iAEQAY"},
{ class: "optionClass", label: "Sagepay DCC VX820", value: "01t9E0000003iATQAY"},
{ class: "optionClass", label: "Verifone VX670 GPRS", value: "01t9E0000003i8XQAQ"},
{ class: "optionClass", label: "Verifone VX680 (GPRS with base)", value: "01t9E0000003iAJQAY"},
{ class: "optionClass", label: "Optomany S900 (Wifi)", value: "01t9E0000003iBMQAY"},
{ class: "optionClass", label: "Ingenico IWL251", value: "01t9E0000003i9LQAQ"},
{ class: "optionClass", label: "Sagepay DCC VX520", value: "01t9E0000003iAOQAY"},
{ class: "optionClass", label: "Optomany S900 (Wifi/GPRS)", value: "01t9E0000003iEaQAI"},
{ class: "optionClass", label: "Optomany S800 (Countertop)", value: "01t9E0000003iAsQAI"},
{ class: "optionClass", label: "Verifone VX670 Bluetooth IP", value: "01t9E0000003i8hQAA"},
{ class: "optionClass", label: "Spire T4220 + PP", value: "01t9E0000003i8rQAA"},
];
break;
case "Gateway":
opts = [
{ class: "optionClass", label: "--Select Product--", value: "0", selected: "true" },
{ class: "optionClass", label: "Sagepay-Fidelity", value: "01t9E0000003iLbQAI"},
{ class: "optionClass", label: "Sagepay", value: "01t9E0000003iLvQAI"},
{ class: "optionClass", label: "Other", value: "01t9E0000003iM0QAI"},
{ class: "optionClass", label: "Authorize.net", value: "01t9E0000003iLWQAY"},
{ class: "optionClass", label: "Realex", value: "01t9E0000003iLRQAY"},
{ class: "optionClass", label: "Iridium", value: "01t9E0000003iL2QAI"},
];
break;
default:
opts = [
{ "class": "optionClass", label: "--Select Product--", value: "0", selected: "true" }
];
break;
}
cmp.find("productType").set("v.options", opts);
},
handleProduct: function(cmp, evt){
}
