1

I have a lightning component that is pulling data from Products (product2) and it has a custom field (Benefits__c) that is multi-select picklist. I need to display those multiselect values in component separately. Right now they are appear with ; (semicolon) between each value.

I have read How to use Split() function inside an Expression in lightning component but I could not follow it completely.

Component

@AuraEnabled
    public static List<Product2> returnProducts(string stateCode) {
        return [SELECT Id, Name, Plans_by_State_Description__c,  Grid_Sequence__c, Plans_by_State_Benefits__c
                 FROM Product2 
                 WHERE State__c =: stateCode];

    }

Below is my JS-Controller (I have tried some things but to no avail)

 var action = cmp.get("c.returnProducts");
        action.setParams({ stateCode : "WI" });
        action.setCallback(this, $A.getCallback(function (response) {
            var state = response.getState();
            if (state === "SUCCESS") {
                var result = response.getReturnValue();
                //console.log(JSON.stringify(result) );

                var someMap = {};
                if(result){
                    for( var key in result ){
                        JSON.stringify(key + '>' + value);

                        if (key=="Benefits__c"){
                            someMap['Benefits1'] = value.split(';')[0];
                            someMap['Benefits2'] = value.split(';')[1];
                            someMap.push({key:key, key0: value.split(';')[0], key1:value.split(';')[1], value:output[key]});
                        }

                    }
                    //console.log(JSON.stringify(someMap) );
                    cmp.set("v.products", someMap);
                }   

      } else if (state === "ERROR") {
                var errors = response.getError();
                console.error(errors);
            }
        }));

        $A.enqueueAction(action); 

    }

I want to split the values of the multi-select and then map them in the markup. Not sure where to go from here now.

2
  • can you also how you want the benefits array to be constructed in javascript?
    – RedDevil
    Feb 17, 2018 at 8:31
  • I want the benefits to appear separately , like splitted, so I may map them to markup component. Right now they appear together
    – Mahmood
    Feb 17, 2018 at 8:38

2 Answers 2

0

you would want to create a product list as your main attribute and it would an be an array of objects with each containing the product name as key and an array which would be your list of benefits

var ListProducts = [];

var listofbenefits = [];

For each product construct the benefits list like below

var benefitsString = result['Benefits__c'];

var listbenefits = benefitsString.split(';');


var eachproductinfo = {key:productname,benefits:listbenefits};//constructing each product info with benefit list

ListProducts.push(eachproduct);//creating the main list

Once you have this you can assign this to a list attribute in your markup. in your markup you can have 2 aura:iteration one for products and then inner one for benefits to display the benefits associated to each product.

For illustration lets say you product list is like below:

 var productlist = [{key:"ProdA",benefits:["benefit1","benefit2","benefit3"]},
                       {key:"ProdB",benefits:["benefit4","benefit5","benefit6"]},
                       {key:"ProdC",benefits:["benefit7","benefit8","benefit9"]}];
 component.set('v.listOfproducts', productlist);

the way you would iterate the same in markup would be:

<aura:attribute name="listOfproducts" type="List" />

  <aura:iteration items="{!v.listOfproducts}" var="item">
           <div>
            {!item.key} //for products
                <aura:iteration items="{!item.benefits}" var="benefits">
                    <div>
                    {!benefits}//for benefits
                    </div>
               </aura:iteration>    
          </div>      
        </aura:iteration>
5
  • Nice but I have number of products being retrieved. And against each products multiple benefits are associated.
    – Mahmood
    Feb 17, 2018 at 8:52
  • 1
    ok got it so you have product list and against each product multiple benefits are retrieved.can you also add the apex output from the server call to the question
    – RedDevil
    Feb 17, 2018 at 8:57
  • It’s a simple apex method. That is returning products. I would have added the controller but on mobile now.
    – Mahmood
    Feb 17, 2018 at 9:19
  • how do I iterate through each product?
    – Mahmood
    Feb 17, 2018 at 15:42
  • updated answer with the same
    – RedDevil
    Feb 18, 2018 at 17:41
1

I recently stumbled upon lightning:dualListbox which allows you to replicate the functionality of multi-select picklist in lightning.

And its working is simple, you just create an Array with lable-value pair for picklist values and pass it to the component and voila, its done.

Similarly, you can bind it to any fields multi-select value using value attribute of dualListBox.

<aura:application extends="force:slds">

<aura:attribute name="ListOfOption" type="Object[]" default="[{'label':'A','value':'A'},{'label':'B','value':'B'},{'label':'C','value':'C'}]"></aura:attribute>
<aura:attribute name="defaultOptions" type="List" />



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


<lightning:dualListbox aura:id="selectOptions" name="Select Options"  label="Select Options" 
                       sourceLabel="Available Options" 
                       selectedLabel="Selected Options" 
                       options="{!v.ListOfOption}" 
                       value="{!v.defaultOptions}"

                       />

({
doInit : function(component, event, helper) {
    console.log('Init fired');

    //After fetching from lightning AuraEnabled Controller
    var mulSelect = resp.Field__c.split(';');
    component.set("v.defaultOptions",mulSelect);
}
})

SLDS Lightning Multiselect picklist

Src: https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/aura_compref_lightning_dualListbox.htm

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.