function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
SaintMichaelSaintMichael 

Adding Parameters to a component

I have a component that provides an autocomplete/type suggest list.

It's currently a component, but the object to search and the fields are hard-coded.

 

How can I get this to become a component where I can pass in the object name and the fields I want searched.

 

I have seen examples using Javascript Remoting, But that is causing me too many issues so far.

 

Can I achieve my goal without using Javascript Remoting?

 

Here is the Class:

global class AutoComplete {


public static String JSONString {get;set;}
public static sObject obj{get;set;}

public AutoComplete(){
	getDesignations();
}


global static String getDesignations(){
	List<Designation_Abbreviation__c> abbs = [Select Id,Name, Designation__r.Name from Designation_Abbreviation__c];
	List<String> designations = new List<String>();
	
	
	for(Designation_Abbreviation__c d: abbs){
		designations.add(d.Name +' - '+d.Designation__r.Name);
	}
	
	JSONString = JSON.serialize(designations);
	
	return JSONString;
}


}

 

Here is the component:

<apex:component controller="AutoComplete">
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-1.8.1.min.js')}" />
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-ui-1.8.23.custom.min.js')}" />
	<link rel="stylesheet" type="text/css"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />


	<!-- Attributes Required for Component -->
	<apex:attribute name="objectname" description="The object to search and build autocomplete for." type="String" required="false" />
	<apex:attribute name="additionalfields" description="fields to search" type="String" required="false" />
	
	
	<script>

	$(function() {

		var availableTags = new Array();
		availableTags = {!JSONString};
		//alert(availableTags);
		
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});

</script>




<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" size="50"/>
</div>

</div> 
	
	
</apex:component>

 

Here is a page testing the component:

<apex:page >
    <apex:form >
       <c:AutoCompleteComponent />
    </apex:form>
</apex:page>

 

Best Answer chosen by Admin (Salesforce Developers) 
SaintMichaelSaintMichael

I solved the problem in a much simpler way.

 

I just passed the JSON String to the component. Let the developer worry about details of constructing the JSON string:

 

Component:

 

<apex:component >
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-1.8.1.min.js')}" />
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-ui-1.8.23.custom.min.js')}" />
	<link rel="stylesheet" type="text/css"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />


	<!-- Attributes Required for Component -->
	<apex:attribute name="datalist" description="JSON String" type="String" required="true" />
	
	
	
	<script>

	$(function() {

		var availableTags = new Array();
		availableTags = {!datalist};
		//alert(availableTags);
		
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});

</script>


<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" size="50"/>
</div>

</div> 
	
	
</apex:component>

 

VisualForce:

<apex:page controller="AutoCompleteData">
    <apex:form >
       <c:AutoCompleteComponent datalist="{!JSONString}"/>
    </apex:form>
</apex:page>

 

Controller:

public class AutoCompleteData {

public List<String> designations{get;set;}
public String JSONString{get;set;}

public AutoCompleteData(){
	List<Designation_Abbreviation__c> abbs = [Select Id,Name, Designation__r.Name from Designation_Abbreviation__c];
	designations = new List<String>();
	
	
	for(Designation_Abbreviation__c d: abbs){
		designations.add(d.Name +' - '+d.Designation__r.Name);
	}	
	
	JSONString = JSON.serialize(designations);
}


}

 

Instead of doing all the work in the Component's Controller, just use a Component with no controller.

The calling class, or class in the bigger scope of the project, can construct the JSON String and feed it to the component.

 

All Answers

Damien_Damien_

In your component, use Salesforce components so that you can bind the data directly to your controller:

<label for="tags">Tags: </label>
	<input id="tags" size="50"/>
SaintMichaelSaintMichael

I don't totally understand.

 

I get that you want me to use:

<apex:inputText/>

 Instead, but can you fill in the blanks a bit more?

 

I want so that when other developers use it, they can insert the object they want queried.
Damien_Damien_

Maybe I misinterpreted what you really wanted.  You want to just be able to pass values into your component from your page?  If that's the case the below link will show you how.

 

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#CSHID=pages_compref_component.htm|StartTopic=Content%2Fpages_compref_component.htm|SkinName=webhelp
SaintMichaelSaintMichael

I solved the problem in a much simpler way.

 

I just passed the JSON String to the component. Let the developer worry about details of constructing the JSON string:

 

Component:

 

<apex:component >
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-1.8.1.min.js')}" />
	<apex:includeScript value="{!URLFOR($Resource.AutoCompleteJQuery, 'AutoCompleteJQuery/jquery-ui-1.8.23.custom.min.js')}" />
	<link rel="stylesheet" type="text/css"
		href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/smoothness/jquery-ui.css" />


	<!-- Attributes Required for Component -->
	<apex:attribute name="datalist" description="JSON String" type="String" required="true" />
	
	
	
	<script>

	$(function() {

		var availableTags = new Array();
		availableTags = {!datalist};
		//alert(availableTags);
		
		$( "#tags" ).autocomplete({
			source: availableTags
		});
	});

</script>


<div class="demo">

<div class="ui-widget">
	<label for="tags">Tags: </label>
	<input id="tags" size="50"/>
</div>

</div> 
	
	
</apex:component>

 

VisualForce:

<apex:page controller="AutoCompleteData">
    <apex:form >
       <c:AutoCompleteComponent datalist="{!JSONString}"/>
    </apex:form>
</apex:page>

 

Controller:

public class AutoCompleteData {

public List<String> designations{get;set;}
public String JSONString{get;set;}

public AutoCompleteData(){
	List<Designation_Abbreviation__c> abbs = [Select Id,Name, Designation__r.Name from Designation_Abbreviation__c];
	designations = new List<String>();
	
	
	for(Designation_Abbreviation__c d: abbs){
		designations.add(d.Name +' - '+d.Designation__r.Name);
	}	
	
	JSONString = JSON.serialize(designations);
}


}

 

Instead of doing all the work in the Component's Controller, just use a Component with no controller.

The calling class, or class in the bigger scope of the project, can construct the JSON String and feed it to the component.

 

This was selected as the best answer