[SalesForce] Passing SelectOption[] to MultiselectPicklist Custom Component results in Cannot convert the value of ‘{!leftOptions}’ to the expected type

I have a Map in custom controller as follows

Map<String, SelectOption[]> mapSelectOption;

and populate this Map as follows in constructor of custom controller

Schema.DescribeSobjectResult R = Account.sObjectType.getDescribe();

//Initialize map to store each object and its fields
mapSelectOption = new Map<String, SelectOption[]>();

//Fetch all child relations for Account
List<Schema.ChildRelationship> C = R.getChildRelationships(); 

Integer j = 0;
//Iterate through all Child objects
for(Schema.ChildRelationship ch : C){

    //In case child object is a custom setting ignore it
    if(!ch.getChildSObject().getDescribe().isCustomSetting()){
        //Describe Each child object, add object name and corresponding fields to a map
        Map<String, Schema.SobjectField> fields = (ch.getChildSobject()).getDescribe().fields.getMap();

        SelectOption[] tempList = new SelectOption[fields.size()];
        Integer i = 0;
        for(Schema.SObjectField s : fields.values()){
            Schema.DescribeFieldResult fieldDescribe = s.getDescribe();
            tempList[i] = new SelectOption(fieldDescribe.getName(),fieldDescribe.getName(), false);
            i++;
        }
        if(i > 0) {
            mapSelectOption.put('key'+j,tempList);
        }
        j++;
    }
}

I am using a custom component from this repo.

This custom component has two attributes of SelectOption[] as type

<apex:attribute name="leftOption" description="Options list for left listbox." type="SelectOption[]" required="true" assignTo="{!leftOptions}" />

<apex:attribute name="rightOption" description="Options list for right listbox." type="SelectOption[]" required="true" assignTo="{!rightOptions}" />

and here is controller code from where the assignTo will call the setter method of leftOptions.

/*
 * MultiselectController synchronizes the values of the hidden elements to the
 * SelectOption lists.
 */
public with sharing class MultiselectController {

    // SelectOption lists for public consumption
    public SelectOption[] leftOptions { get; set; }
    public SelectOption[] rightOptions { get; set; }

    // Parse &-separated values and labels from value and 
    // put them in option
    private void setOptions(SelectOption[] options, String value) {
        options.clear();
        String[] parts = value.split('&');
        for (Integer i=0; i<parts.size()/2; i++) {
            options.add(new SelectOption(EncodingUtil.urlDecode(parts[i*2], 'UTF-8'), 
              EncodingUtil.urlDecode(parts[(i*2)+1], 'UTF-8')));
        }
    }

    // Backing for hidden text field containing the options from the
    // left list
    public String leftOptionsHidden { get; set {
           leftOptionsHidden = value;
           setOptions(leftOptions, value);
        }
    }

    // Backing for hidden text field containing the options from the
    // right list
    public String rightOptionsHidden { get; set {
           rightOptionsHidden = value;
           setOptions(rightOptions, value);
        }
    }
}

Now, I try to use this component in my Visualforce page as follows

<apex:repeat value="{!mapSelectOption}" var="mapKey">
    <c:MultiselectPicklist leftLabel="Available fields" leftOption="{!mapSelectOption[mapKey]}" rightLabel="Selected fields" rightOption="{!mapSelectOption[mapKey]}" size="14" width="150px"/>
</apex:repeat>

It results in following error

Cannot convert the value of '{!leftOptions}' to the expected type.

Also, I have tried following code to see if the Map is populated correctly and I see the results as per the attached image.

<apex:repeat value="{!mapSelectOption}" var="mapKey">
    <apex:outputLabel>{!mapKey}</apex:outputLabel>
    <apex:selectList size="10">
        <apex:selectOptions value="{!mapSelectOption[mapKey]}"/>
    </apex:selectList>
    <br />
</apex:repeat>

enter image description here

PS: I want to understand what is the difference between passing {!mapSelectOption[mapKey]} to the custom component and passing the same to value attribute of an apex:selectOptions tag where the later accepts it and the former results in error.

Any help is much appreciated.

Best Answer

There certainly seems to be some weird bug going on to do with generic types (e.g. using a list or map). After a bit of experimentation I found a workaround, and that is to use a wrapper class as follows:

public class OptionsList {
    public List<SelectOption> options { get; set; }

    public OptionsList() {
        this.options = new List<SelectOption>();
    }

    public void push(SelectOption opt) {
        this.options.add(opt);
    }
}

At the top of your custom controller you can now create a list of this wrapper class:

public List<OptionsList> optionsLists { get; set; }

And your page can iterate over this as follows:

<apex:repeat value="{!listOptions}" var="ol">
        <c:MultiselectPicklist leftLabel="Available fields" leftOptions="{!ol.options}" rightLabel="Selected fields" rightOptions="{!ol.options}" size="14" width="150px"/>
</apex:repeat>

Here is a link to a gist containing your code with my adjustments: https://gist.github.com/lukemcfarlane/a90a78e3a4b1d05e34c2

Passing an Array to a Component

Yep you're spot on, the following small example files demonstrate the passing of a string array into the component:

Page Controller - just exposes an array of strings to the page.

public class PageController
{
    public String[] getStrings()
    {
        return new String[]{'This', 'is', 'an', 'array', 'of', 'strings'};
    }
}

Visualforce Page - prints out the array line by line, then includes the component, passing it the array of strings as a parameter.

<apex:page controller="PageController">
    <apex:repeat value="{!Strings}" var="s">
        <h3><apex:outputText value="{!s}"/></h3><br/>
    </apex:repeat>
    <br/>
    <h3>Component:</h3>
    <br/>    
    <c:TestComponent inputStrings="{!Strings}"/>
</apex:page>

Visualforce Component - simply takes one parameter (array of strings), and displays another bound variable on the page:

<apex:component controller="ComponentController">
    <apex:attribute name="inputStrings" type="String[]" required="true" description="" assignTo="{!Strings}"/>
    <apex:outputText value="{!Joined}"/>
</apex:component>

Component Controller - returns the array of strings as a single string of semicolon delimited values:

public class ComponentController 
{
    public String [] strings {get; set;}

    public String getJoined()
    {
        String ret = '';

        for(String s : strings)
        {
            ret += s + ';';
        }

        return ret;
    }
}

Of course, if you want to choose the first option you presented (comma delimited list) just assign it to a string variable in the controller, and then use the split() method to break it back down into it's components.

Using a Component Without a Controller

Taking this a step further, if you don't want to use a controller in the component for some reason, you can still access the parameters passed in, though I not know of a 'nice' way of dealing with an array right now. You can use it as a string and cut it up as below, but there may well be a better way to access the individual elements.

<apex:component>
    <apex:attribute name="inputStrings" type="String[]" required="true" description=""/>

    <ul id="theList"></ul>

    <script type="text/javascript">
        var theStrings = '<apex:outputText value="{!inputStrings}"/>';
        var theListEntries = '';

        theStrings = theStrings.substring(1, theStrings.length - 1).split(', ');

        for(i = 0; i < theStrings.length; i++)
        {
            theListEntries += '<li>' + theStrings[i] + '</li>';
        }
        document.getElementById('theList').innerHTML = theListEntries;

    </script>
</apex:component>

When used in the page shown previously, the output looks like this:

Screenshot of the rendered page & component

[SalesForce] Passing a map to a custom component

Updated 17/04/2018:

How this answer has remained for so long whilst being incorrect I have no idea, but the correct answer should be:

Use type="map" not type="Map".

Old Answer:

As far as I'm aware there is no way to create a map directly in Visualforce, you will have to get a Controller/Extension involved at some point.

In terms of using a Controller or an Extension, passing Maps to Components is a tricky subject... in that I've never gotten it to work personally (even though according to the documentation it should be simple), nor have I ever seen a working example.

The documentation states:

The type attribute defines the Apex data type of the attribute. Only the following data types are allowed as values for the type attribute:

Maps, specified using type="map". You don’t need to specify the map’s specific data type.

Based on that, the simplest example of this is demonstrated below.

BasicMapComponent

<apex:component >
    <apex:attribute name="map" description="aMap" type="Map" />
</apex:component>

BasicMapPage

<apex:page controller="BasicMapPageController">
    <c:basicmapcomponent map="{!aMap}"></c:basicmapcomponent>
</apex:page>

BasicMapPageController

public class BasicMapPageController
{
    public Map<String, String> aMap {get;set;}
}

However, this doesn't work. If you try and use this sample you'll get the following error:

Error: Wrong type for attribute <c:basicmapcomponent map="{!aMap}">. Expected Map, found MAP<String,String>

Apparently this is a long-standing bug with the platform (all of the references to it are from 2011) and based on it's age is unlikely to be fixed any time soon.

So far, there are only two viable methods I've come across to get the behaviour you're after. In terms of picking between them it comes down to if you want your clients to use clicks vs. code to configure your component.

Solution 1 (Clicks)

If you want to keep the configuration of your component completely click based and not require your clients to write any Apex then you'll have to create a custom object/setting to emulated a map, which you can then query in your components controller.

Something like the following could potentially work, although it limits you to only one set of parameters for all instances of your component in an org (you could make the key a compound between the page name and the actual key value, alternatively don't enforce unique values and trust your clients - probably not the best plan):

MapCustomObject__c

Key__c (String, Unique values only)
Value__c (String)

MapComponentController

public class MapComponentController
{
    private Map<String, String> aMap;

    public MapComponentController()
    {
        List<MapCustomObject__c> mapObjects = 
        [
            SELECT 
                Key__c, Value__c 
            FROM 
                MapCustomObject__c
        ];

        // Populate the aMap variable here
    }
}

Solution 2 (Code)

If you don't mind clients of your component needing to write a little Apex then the easiest method is to add a wrapper class which your clients need to initialize and pass into your component.

MapWrapper

public class MapWrapper
{
    private Map<Object, Object> theMap;

    public MapWrapper()
    {
        theMap = new Map<Object, Object>();
    }

    // Expose Map methods from your wrapper here, I'll do get() and values() as an example
    public Object get(Object key)
    {
        return theMap.get(key);
    }

    public List<Object> values()
    {
        return theMap.values();
    }

    // Etc, etc...
}

You can then update your component to accept an attribute of type MapWrapper instead of Map and you should be good to go.

MapComponent (note the type attribute has changed)

<apex:component >
    <apex:attribute name="mapWrapper" description="aMapWrapper" type="MapWrapper" />
</apex:component>

MapPage

<apex:page controller="MapPageController">
    <c:mapcomponent mapWrapper="{!aMapWrapper}"></c:basicmapcomponent>
</apex:page>

MapPageController

public class MapPageController
{
    public MapWrapper aMapWrapper {get;set;}

    // Your clients will have to handle building the MapWrapper
}

Obviously you can give your MapWrapper a nicer name, probably something along the lines of MyComponentNameOptions or something similar to make it less obvious to your clients what is going on (i.e. that you are using a work-around).

Best Answer

Related Solutions

[SalesForce] passing multiple values of same type in apex component

Passing an Array to a Component

Using a Component Without a Controller

[SalesForce] Passing a map to a custom component

Related Topic