[SalesForce] Dynamic Multiselect picklist value on Aura Component

I want to populate Multiselect field with list of values dynamically. Instead of assigning the values to Array of string in aura attribute, I'm referring to the object from controller directly,
But my multiselect field is not populating values. Since this is dynamic field, I can't assign values to list in aura:attribute and refer it. Please guide.

Component:

<aura:iteration items="{!v.myMetadata}" var="md" indexVar="index">
<aura:if isTrue="{!(md.datatype == 'multi')}">
    <lightning:dualListbox aura:id="selectGenre"                                                                    
              name="Genre"
              label="{!md.label}"
              sourceLabel="Available Genre"
              selectedLabel="Selected Genre"
              options="{!md.values}"
              />
     </aura:if>
</aura:iteration>

Helper:

var records =response.getReturnValue();
                  records.forEach(function(record) {
                  var mdValues = [];  
                 //Values__c is a comma seperated text field from object, example A,B,C               
                  if(record.Values__c){
                    nameArr  = record.Values__c.split(',');
                    for (var i = 0; i < nameArr.length; i++) {
                        mdValues.push(nameArr[i]);
                    }
                }
               //mdValues is list of string that has A,B,C Values
                mData.push({
                    label : record.Field_Label__c,
                    datatype : record.Datatype__c,
                    section : record.Section__c,
                    values : mdValues
                });
                console.log('mData:');
                console.dir(mData);
            });
            var defValues = response.getReturnValue();
            component.set("v.myMetadata",mData);

Best Answer

Looking at your code, I'm assuming that the dual list box shows up as shown in screenshot below. Note the empty highlighted option under the Available section.

The dual list box sees the entries to be used, but can't parse it into a label & value. Refer here,

Name: options
Type: object[]

Description: A list of options that are available for selection. Each option has the following attributes: label and value.

You possibly need to change this line mdValues.push(nameArr[i]); to the following snippet:

 mdValues.push({ label: nameArr[i], value: nameArr[i] });

Disclaimer: I've responded simply by looking at your code. Have not tried to replicate the problem at my end.

Related Solutions

[SalesForce] Displaying Multiselect Picklist as checkboxes

I recently needed to implement something similar to this and found this jQuery plugin from Scott Horlbeck to fit the need wonderfully. It was also incredibly easy to make it work with VF markup and required no complicated workarounds.

http://www.scotthorlbeck.com/code/tochecklist/

If you choose to use this plugin, you will need to modify the script so that it selects elements from the DOM using the id attribute $('[id="theId"]') rather than the shorthand id selector $('#theId'). Salesforce id values include the colon character (:) and you cannot use the shorthand jQuery element Id selector syntax $('#theId') as the colon is interpreted as a pseudo selector by jQuery. A simple change to the plugin script replacing all of the shorthand id selector notations with the id element attribute reference is all it takes to make use of this great plugin within a VF page.

As an example of the replacement that I am talking about, at line 198 in the 1.5.0 source code you will find this line using the shorthand notation: $('#'+jSelectElem.attr('id')+'_findInList').val(o.searchBoxText)

It must be modified like this to be compatible with salesforce element id values which include the colon character: $('[id="'+jSelectElem.attr('id')+'_findInList"]').val(o.searchBoxText)

Screenshot to demonstrate how the normal SFDC multiselect picklist looked when it was rendered in the VF page and converted by the plugin in my page:

toChecklist Example

The VF page markup looks like this example shown below. Make note that it uses no special markup for the checkbox list - it's just a normal <apex:selectList /> and then the plugin script is executed immediately after the select list is rendered into the DOM.

Two key points to making this plugin behave properly with the controller are the two parameters passed to the .toChecklist() function to not submit the data as an array or submit using the id attribute as the key for the data. These two parameters override the plugin's default values and without them, this plugin does not create its markup for the checkbox list in a way that the page controller properly interprets.

<apex:page>
    <!-- scripts required for the toChecklist script for converting a multiselect list into checkboxes -->
    <apex:includeScript value="{!URLFOR($Resource.jQuery, 'jquery.min.js')}" />
    <apex:stylesheet value="{!URLFOR($Resource.jQueryToChecklist, 'jquery.toChecklist.css')}" />
    <apex:includeScript value="{!URLFOR($Resource.jQueryToChecklist, 'jquery.toChecklist.js')}" />

    <!-- snipped a bunch of stuff including jQuery.noConflict() -->

    <apex:selectList id="checkboxPicklist" value="{!selectedValues}" multiselect="true">
        <apex:selectOptions value="{!theSelectOptions}" />
    </apex:selectList>
    <script>jQuery('[id="{!$Component.checkboxPicklist}"]').toChecklist({ submitDataAsArray: false, preferIdOverName: false });</script>
</apex:page>

[SalesForce] Use multiselect picklist values in lightning component

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>

Best Answer

Related Solutions

[SalesForce] Displaying Multiselect Picklist as checkboxes

[SalesForce] Use multiselect picklist values in lightning component

Related Topic