Apex Code Development You need to sign in to do that
Don't have an account?
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.
@controller
@VF Page
I hope you can able to come with good solution. Hearty Thanks in advance.
Regards,
Soundar.
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.
@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"/>
<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.
FieldApi = '{{!'+ selectedField + '}}';
with
FieldApi = '{{!'+ selected + '}}';
you are saving the selected option in 'selected' variable.
All Answers
FieldApi = '{{!'+ selectedField + '}}';
with
FieldApi = '{{!'+ selected + '}}';
you are saving the selected option in 'selected' variable.
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
FieldApi = FieldApi +' '+ '{{!'+ selected + '}}';