I am attempting to autocomplete a field based off a custom query. I would like the user to begin typing text, if the text is found within the query, I would like it to complete the field.
Is this possible with suitecrm? I have seen things similar, but when it comes to an actual description or implementation instruction, i have not been able to find anything useful.
Maybe this will help:
Quick-search dropdowns, auto-populate
http://support.sugarcrm.com/Documentation/Sugar_Developer/Sugar_Developer_Guide_6.5/Module_Framework/Metadata/Examples/Adding_QuickSearch_to_a_custom_field/
EDIT: the link above is no longer working but you can find it in the Wayback machine:
You have made me a very very happy person sir!!! I will test this shortly. Thanks!
I attempted to follow this guide but it seems to be a bit vague when it comes to the file locations on where this information goes. Is this supposed to be implemented in the custom vardefs?
It seems to be all normal PHP and JS, not vardefs (which are PHP but just contain array definitions). But you are right that the article neglects to explain where to put things. I think itâs in a chapter called âMetadataâ, so try reading the chapter introduction and looking at the other examples.
Also, have you tried the advice they give in the end, to try and learn by example from /module/Contacts/BusinessCard.php ?
I was not able to get this to work using the guide but I am able to get this to work by using the jqueryUI plugin. I am having another issue now.
When using the Jquery Autocomplete remote database option ( https://jqueryui.com/autocomplete/#remote )
When I call the search.php I am unable to reference the global $db variable that is typically provided by suitecrm. I can of course make a manual db connection here, but that would be sloppy code and a security issue. What class do i need to include in order to use the global variables?
Adding the following to the custom.php file fixed this issue. I did have to have the custom.php file in the root directory in order for it to correctly require the entryPoint.php
require_once âinclude/entryPoint.phpâ;
Can you post your complete working soliution here? It would be a great resource for others, we could even make it a âTechnical blog postâ on the Docs site.
I had a similar situation. I needed to differentiate between similar records (e.g. identical neighborhood names but from different states), so I was looking for a way to customize the autocomplete so that it could show extra information. Iâm not sure how to do this with YUI which is what these fields use by default, so I went with the jQuery UI autocomplete method.
In my case I do not need to create a custom search.php file. However, if you need to use a custom query you would instead be better off creating a new EntryPoint extension which does the query (using a db query or beans as needed) https://docs.suitecrm.com/developer/entry-points/ and returns a JSON array with labels and corresponding values. I was able to use the same entrypoint used by the quicksearch action.
First we need to override the /metadata/editviewdefs.php from the module by copying the file to custom//metadata/editviewdefs.php
You will need to add the path for a javascript file which will be in charge of enabling the custom autocomplete field. This needs to be included within the [âEditViewâ][âtemplateMetaâ] arrray. Example:
'includes' =>
array (
0 =>
array (
'file' => 'custom/modules/<modulename>/customautocomplete.js',
),
),
The .js filename can be anything.
Another change that needs to be applied on the same file is inside the array for the field definition we want to customize. My field name is isre_listing_location, so use the one that applies to the field you are customizing. For example:
array (
'name' => 'isre_listing_location', //name of the field
'studio' => 'visible',
'label' => 'LBL_ISRE_LISTING_LOCATION',
'displayParams' => array('class' => 'sqsEnabled sqsNoAutoFill'), //this is a relate field so we want to keep the quick search buttons, but we don't want to use the quick search autofill. Be aware these values are case-sensitive!
),
Other resources use the âcustomCodeâ to generate the form fields for the name and hidden id used. In this case that was not needed, but we had to find a way to disable the default autocomplete. This is done with the âclassâ value shown above.
Next you need to create the file referenced âcustom/modules//customautocomplete.jsâ and add the following javascript code (do remember to change the field references to your own):
$(document).ready(fieldAutoComplete);
function fieldAutoComplete(){
$( "#isre_listing_location" ).autocomplete({ //select the field we want to autocomplete with jquery
source: function(request, response) { //we need to customize the source
$.post('index.php?', {action: 'quicksearchQuery', module:'Home', to_pdf:'true', data: '{"form":"EditView","method":"query","modules":["jjwg_Areas"],"group":"or","field_list":["name","city","state","id"],"populate_list":["isre_listing_location","jjwg_areas_id_c"],"required_list":["parent_id"],"conditions":[{"name":"name","op":"like_custom","end":"%","value":""}],"order":"name","limit":"30","no_match_text":"No Match"}', query: request.term}, response, 'json')
.done(function(data) { //this will process the response received since the autocomplete needs an array with the values and the response brings extra info
response($.map( data.fields, function( item ) {
return {
label: item.name,
city: item.city, //this extra field will be used for the autocomplete list, as defined in field_list before
state: item.state, //this extra field will be used for the autocomplete list, as defined in field_list before
value: item.id
}
}));
});
},
minLength: 2,
select: function( event, ui ) { //this will enter the selected values into the correct fields, modify according to your fields but do not forget the hidden ID field.
$('#isre_listing_location').val(ui.item.label);
$('#jjwg_areas_id_c').val(ui.item.value);
return false;
}
}).autocomplete( "instance" )._renderItem = function( ul, item ) { //this formats the results display. In my case I needed extra info to differentiate between similar items
return $( "<li>" )
.append( "<div>" + item.label + " (" + item.city + ", " + item.state + ")</div>" )
.appendTo( ul );
};
}
We send a custom POST or ajax request following the same format used by quick search autocomplete. In my case this will suffice as I only needed to get extra fields from the field_list parameter. Other parameters may or may not apply to your situation, so check them out one by one.
Remember to do Quick Repair and reload the page. Sometimes we have to reload twice or delete cache so it starts loading the correct modifications.
Another possibility would have been to extend the YUI autocomplete: https://yuilibrary.com/yui/docs/autocomplete/#writing-result-formatters , since it has similar functionality to render result items, but I was able to more quickly and easily solve my issue using jQuery UI which I am more familiar with.
Hope this helps others.
When I applied these changes on my own module package instead of using the custom folder I had some issues which required to not include the âsqsEnabledâ class. This works but it also changes the styling for the field. Because I donât have any theme changes and donât want to override the theme for 1 small change I just used my jQuery script to change the fieldâs width.
Thanks a lot for that write-up!
You know, you can add just one style to the theme, without overriding everything. The CSS files you add under custom/themes will be appended to existing files in core, they will not completely replace those files.
Updated url for this?
@waraikobuot I edited my post above with an updated link. You can always search for old content in the Wayback machine (https://web.archive.org/)