[SalesForce] Add Selected Picklist value to List – Lightning Component

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){
}

Best Answer

Managed to pass the ids into the array like so

handleProduct: function(cmp, evt){
        var selectCmp = cmp.find("productType").get("v.value");
        cmp.set("v.options", selectCmp);
    }

Related Solutions

[SalesForce] Selected value in picklist

I had also problems like this, eventually I have created the component dynamically like that (with 2 methods of setting the selected value because sometimes one does not work and sometimes the other):

on my markup, the drop-down is:

<lightning:select label="mypicklist" name="type" aura:id="mypicklist" />

On my javascript code I am filling the data like this:

var selectedValue = 'Option2';

var cmp = component.find('mypicklist');

// clear all options
cmp.set('v.body', []); 
var body = cmp.get('v.body');

// create the option list
var options = [
    { id: Option1, label: Option1 },
    { id: Option2, label: Option2 },
    { id: Option3, label: Option3 }
];


// add each option
options.forEach(function (opt) {
    var selected = 'false';
    if (opt.id == selectedValue)
        selected = 'true';
    $A.createComponent(
        'aura:html',
        {
            tag: 'option',
            HTMLAttributes: {
                value: opt.id,
                text: opt.label,
                selected: selected
            }
        },

        function (newOption) {
            //Add options to the body
            if (component.isValid()) {
                body.push(newOption);
                cmp.set('v.body', body);
            }
        })
});
/*TODO: this sometimes does not work*/
cmp.set('v.value', selectedValue);

I Hope you can use this to solve your problem

[SalesForce] get values in lightning:input with $A.createComponents

In order to bind to something dynamically, you need a reference. Here is a very basic, no-frills, slightly buggy implementation that demonstrates that this basically works.

Notice how I use component.getReference to dynamically link to a field. Also notice how I can bind to the same field twice, which literally lets me modify the same field more than once in real-time, just to prove that they are real references.

With a little more error checking and fact-gathering, this could indeed be a dynamic form with some basic describe data, etc. Notice how I do not use aura:id at all. I simply bound all the fields to a common object, and I could get and retrieve the values at will (in this case, demonstrated through Object.keys). I could also bind this object to, say, a force:recordData to dynamically save the data back to the server, or send it through a server action in Apex.

<aura:application extends="force:slds">
    <aura:attribute name="accountRecord" type="Account" default="{ 'sobjectType': 'Account' }" />
    <aura:attribute name="edits" type="Aura.Component[]" />
    <aura:attribute name="fieldName" type="String" />
    <aura:attribute name="output" type="String" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    {!v.output}

    <hr />

    {!v.edits}

    <ui:inputText value="{!v.fieldName}" />
    <ui:button press="{!c.addField}" label="Add" />
    <br/>
    <ui:button press="{!c.display}" label="Show Data" />
</aura:application>

({
    init: function(component, event, helper) {
        component.set("v.edits", []);
    },
    addField: function(component, event, helper) {
        var field = component.get("v.fieldName"), 
            obj = component.get("v.accountRecord");
        obj[field] = "";
        component.set("v.accountRecord", obj);
        $A.createComponent(
            "lightning:input", {
                value: component.getReference("v.accountRecord."+component.get("v.fieldName")),
                label: component.get("v.fieldName"),
                type: "Text"
            },
            $A.getCallback(function(newCmp, status, error) {
                var edits = component.get("v.edits");
                edits.push(newCmp);
                component.set("v.edits", edits);
            })
        );
    },
    display: function(component, event, helper) {
        var obj = component.get("v.accountRecord");
        var results = [];
        Object.keys(obj).forEach(function(key) { results.push(key+":"+obj[key])});
        component.set("v.output", results.join('\n'));
    }
})

Here's a demo of me dynamically binding stuff:

Best Answer

Related Solutions

[SalesForce] Selected value in picklist

[SalesForce] get values in lightning:input with $A.createComponents

Related Topic