+ Start a Discussion
Soundar Raj PonpandiSoundar Raj Ponpandi 

How Can I Display Multiple FieldApi By MultiSelect in Select Option

HI Experts,

I am new to the developmen. I have one urgent requirement, (Selected) Multiple FieldApi need to be  display When Select Multiple Fields. My Coding is followed that.
User-added image

@controller
public class AutoTableGenerate {

     public string FieldApi {get;set;}
     public boolean displayPopup {get; set;}
     public string AccId{get; set;}
	 public String selectedField {get; set;}    

    public Set<String> unSelectedNames = new Set<String>();
    public Set<String> selectedNames = new Set<String>();
    public Set<String> inaccessibleNames = new Set<String>();
    public List<String> selected   { get; set; }
    public List<String> unselected { get; set; }
   

    public AutoTableGenerate(ApexPages.StandardSetController controller) {
        //AccId = ApexPages.currentPage().getParameters().get('ID');
    }

        Public List<SelectOption> getAccountFields(){
        String selectedObject = Account.sObjectType.getDescribe().getName();
        Map<String, Schema.SObjectType> schemaMap = Schema.getGlobalDescribe();
        Schema.SObjectType ObjectSchema = schemaMap.get(selectedObject);
        Map<String, Schema.SObjectField> fieldMap = ObjectSchema.getDescribe().fields.getMap();
        List<SelectOption> options = new List<SelectOption>();
        for (String fieldName: fieldMap.keySet()){  
            //system.debug('field name: | ' +  fieldName + ' &  label: | ' + fieldMap.get(fieldName).getDescribe().getLabel() );
            options.add(new SelectOption(fieldName,fieldMap.get(fieldName).getDescribe().getLabel())) ;
        }
        return options;
    }
    
    
       //getting API Of Selected Fields
    public void getFieldAPI()
    {
        System.debug('Selected Field | ' + selectedField);
        FieldApi = '{{!'+ selectedField + '}}';
    }
    
     public void closePopup() {
        displayPopup = false;
    }
 
    public void showPopup() {
        displayPopup = true;
    }
    


    // Create the select options for the two select lists on the page
    public List<SelectOption> getSelectedOptions() { 
        return selectOptionsFromSet(selectedNames);
    }
    public List<SelectOption> getUnSelectedOptions() { 
        return selectOptionsFromSet(unSelectedNames);
    }
    
    private List<SelectOption> selectOptionsFromSet(Set<String> opts) {
        List<String> optionsList = new List<String>(opts);
        List<SelectOption> options = new List<SelectOption>();
        for (String s : optionsList) {
            options.add(new 
                SelectOption(s, decorateName(s), inaccessibleNames.contains(s)));
        }
        return options;
    }

    private String decorateName(String s) {
        return inaccessibleNames.contains(s) ? '*' + s : s;
    } 



    public void doAdd() {
        moveFields(selected, selectedNames, unSelectedNames);
    }
    public void doRemove() {
        moveFields(unselected, unSelectedNames, selectedNames);
    }
    
    Public void moveFields(List<String> items, 
            Set<String> moveTo, Set<String> removeFrom) {
        for (String s: items) {
            if( ! inaccessibleNames.contains(s)) {
                moveTo.add(s);
                removeFrom.remove(s);
            }
        }
    }
}

@VF Page
<apex:page standardController="Account" recordSetVar="ignored" extensions="AutoTableGenerate" showHeader="false" sidebar="false" id="thepageid">
    <apex:form id="theformid">
        <apex:includescript value="{!URLFOR($Resource.CkEditor, 'ckeditor/ckeditor.js')}" />
        <apex:pageBlock >
            <center>
                <apex:commandLink value="Save" action="{!save}" target="_parent" styleClass="btn" style="text-decoration:none;padding:4px;" />
                <apex:commandButton value="Cancel"/>
                <apex:commandButton value="Insert Field" action="{!showPopup}" rerender="tstpopup"/>
            </center>
            
            <apex:pageblockSection columns="1">
                <apex:tabPanel switchType="client" selectedTab="name1" id="theTabPanel">
                    <apex:tab label="Template Body" name="name1"  >
                        <apex:inputtextarea id="editor1"  styleClass="ckeditor" richtext="false"/>
                    </apex:tab>
                    
                    <apex:tab label="Header" name="name2" id="tabTwo">
                        <apex:inputtextarea id="editor2"  styleClass="ckeditor" richtext="false"/>
                    </apex:tab>
                    
                    <apex:tab label="Footer" name="name3" id="tabThree">
                        <apex:inputtextarea id="editor3"  styleClass="ckeditor" richtext="false"/>
                    </apex:tab>
                    <apex:tab label="Page Settings" name="name4" id="tabFour">Page Settings</apex:tab>
                </apex:tabPanel>
            </apex:pageblockSection>
        </apex:pageBlock> 
        
        <apex:outputPanel id="tstpopup">
            <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                
                <div style="background-color:#E5E6E6;">
                    <span align="right" > <h3><b>Fields For : Account</b></h3></span>
                </div>
                <div>
                    <p style="font-size:13px;">Select a field, then click Insert. Labels followed by a ">" indicate that there are more fields available. If you need to extend further, you can manually edit the value or consider creating a formula field on your base object: Account.</p>  
                </div>
                <apex:pageBlock id="selectionBlock">
                    <apex:pageMessages />
                    <apex:pageBlockSection columns="6">
                        <apex:panelGrid id="pn1" columns="4">
                            <apex:panelGroup >
                                <apex:selectList id="unselected_list" required="false" 
                                                 value="{!selected}"  multiselect="true" size="15" style="width:250px">
                                    <apex:selectOptions value="{!AccountFields}"/>
                                    <apex:actionSupport event="onchange" action="{!getFieldAPI}" reRender="selectionBlock"/> 
                                </apex:selectList>
                            </apex:panelGroup>
                            <apex:panelGroup id="pn2">
                                <br /><br /><br /><br />
                                <apex:outputtext value="Add"/><br/>
                                <apex:commandButton image="{!URLFOR($Resource.RightArr)}"
                                                    action="{!doAdd}" rerender="selectionBlock" style="border:none; padding:0px 0px 0px 0px;"  status="statLoad2"/>
                                <br/><br/>
                                <apex:commandButton image="{!URLFOR($Resource.LeftArr)}"
                                                    action="{!doRemove}" rerender="selectionBlock" style="border:none; padding:0px 0px 0px 0px;"  status="statLoad2"/><br/>
                                <apex:outputtext value="Remove"/><br />
                            </apex:panelGroup>
                            
                            <apex:panelGroup id="pn3" >
                                <apex:selectList id="selected_list" required="false" rendered="True"
                                                 value="{!unselected}" multiselect="true" size="15" style="width:250px">
                                    <apex:selectOptions value="{!selectedOptions}"/>
                                </apex:selectList>
                            </apex:panelGroup> 
                            
                            <apex:panelGroup id="pn4">
                                <br /><br /><br /><br />
                                <apex:outputtext value="Up" /><br />
                                <apex:commandButton image="{!URLFOR($Resource.UpArr)}"  
                                                    style="border:none; padding:0px 0px 0px 0px;"  status="statLoad2"/><br /><br />
                                <apex:commandButton image="{!URLFOR($Resource.DownArr)}" 
                                                    style="border:none; padding:0px 0px 0px 0px;"  status="statLoad2"/><br />
                                <apex:outputtext value="Down"/><br />
                            </apex:panelGroup>  
                        </apex:panelGrid>
                        
                    </apex:pageBlockSection>
                    <p>The following will be inserted into your template: </p><br />
                    <apex:inputText value="{!FieldApi}" size="100"/>  <br /><br /><center> 
                    <apex:commandButton value="Insert Field" action="{!closePopup}" oncomplete="insert('{!FieldApi}');" rerender="tstpopup"/>
                    &nbsp;&nbsp;&nbsp;
                    <apex:commandButton value="Cancel" action="{!closePopup}"  rerender="tstpopup"/></center>
                    
                </apex:pageBlock>
            </apex:outputPanel>
        </apex:outputPanel>
        
        
        
    </apex:form>
    
    <!-- Internal Script -->
    <script type="text/javascript">
    window.onload = function()
    {
        var editor = CKEDITOR.instances['thepageid:theformid:theTabPanel:editor1'];
        if(editor){
            editor.destroy();}
        var ckEditor = CKEDITOR.replace('thepageid:theformid:theTabPanel:editor1', {
            fullPage: true,
            extraPlugins: 'docprops',
            allowedContent: true
        });
        
        ckEditor.on("instanceReady",function() {
            
            // overwrite the default save function
            ckEditor.addCommand( "save", {
                modes : { wysiwyg:1, source:1 },
                exec : function () {
                    
                    // get the editor content
                    var theData = ckEditor.getData();
                    alert("insert your code here");
                }
            }); }); 
    }
    
    function abc()
    {
        var element = CKEDITOR.instances['editor1'].getData();
        alert(element);
    }
    
    insert=function(FieldApi){
        var CKEDITOR   = window.CKEDITOR;
        for ( var i in CKEDITOR.instances ){
            var currentInstance = i;
            break;
        }
        var oEditor   = CKEDITOR.instances[currentInstance];
        oEditor.focus();
        oEditor.insertHtml(FieldApi);
    };
    </script>
    
    
    <style type="text/css">
        .custPopup{
        background-color: white;
        border-width: 2px;
        border-style: solid;
        z-index: 9999;
        left: 38%;
        padding:10px;
        position: absolute;
        /* These are the 3 css properties you will need to change so the popup 
        displays in the center of the screen. First set the width. Then set 
        margin-left to negative half of what the width is. You can add 
        the height property for a fixed size pop up if you want.*/
        width: 800px;
        margin-left: -250px;
        top:65px;
        }
        .popupBackground{
        background-color:black;
        opacity: 0.10;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;
        }
    </style>
    
</apex:page>

I hope you can able to come with good solution. Hearty Thanks in advance.

Regards,
Soundar.​
Best Answer chosen by Soundar Raj Ponpandi
Salesforce DeveloperSalesforce Developer
Replace your line 37 : 
FieldApi = '{{!'+ selectedField + '}}';
with 
FieldApi = '{{!'+ selected + '}}';

you are saving the selected option in 'selected' variable.

All Answers

Salesforce DeveloperSalesforce Developer
Replace your line 37 : 
FieldApi = '{{!'+ selectedField + '}}';
with 
FieldApi = '{{!'+ selected + '}}';

you are saving the selected option in 'selected' variable.
This was selected as the best answer
Soundar Raj PonpandiSoundar Raj Ponpandi
HI Salesforce Developer,

Yeah it's Correct ... Can you please explain how can i display all of them selected Field's API. 
{{!Filed1 }}  + ' '+  {{!Filed2 }} + '  '+  {{!Filed3 }} + '  '+ {{!Filed4 }} + '  '+ {{!Filed5 }}

Regards,

Soundar
Salesforce DeveloperSalesforce Developer
Try this on line : 37 
FieldApi = FieldApi +' '+ '{{!'+ selected + '}}';