A couple of tweaks - making SPDisplayRelatedInfo work with SPAutocomplete and dynamic CAML queries

Jun 8, 2012 at 5:44 PM
Edited Jun 8, 2012 at 5:48 PM

Hi, I made a couple of modifications that I wanted to share, for SPServices 0.7.1a:

  1. Making SPDisplayRelatedInfo work with SPAutocomplete (i.e. the text box that is used by this functionality), so when you make a selection in the auto-complete dropdown, the same thing happens as if you had chosen an item from a Combo
  2. Making it possible to set the CAMLQuery option dynamically, for cases where its value should depend on other form fields changing.  For this patch I only put it in for SPAutocomplete and SPDisplayRelatedInfo, but it could easily be added to the options for any method that uses the CAMLQuery.  To do so, you specify a "buildCAMLQueryFn" argument with the options, which is actually a function.  It will be called any time the action occurs (when the static CAMLQuery would have been read).

Example usage:

 

//set up an SPAutocomplete function for "My Field" which is a text field
$().SPServices.SPAutocomplete({
	sourceList: "Whatever",
	sourceColumn: "Some_Column",
	columnName: "My Field",
	filterType: "BeginsWith",
	numChars: 0,
	ignoreCase: false,
	highlightClass: "",
	uniqueVals: true,
	slideDownSpeed: "fast",
	debug: true
});

//use SPDisplayRelatedInfo for the "My Field" auto-completion text field
$().SPServices.SPDisplayRelatedInfo({
	columnName: "My Field",
	relatedList: "Reference_List",
	relatedListColumn: "Reference_Field",
	relatedColumns: ["MyField"],
	displayFormat: "list",
	//specifying the buildCAMLQueryFn, instead of CAMLQuery
	buildCAMLQueryFn: function() {
		return "<Eq><FieldRef Name='Other_Field'/><Value Type='Text'>"+$("*[title='Some Other Field']").val()+"</Value></Eq>";
	},
	debug: true
});

 

Patch file (sorry for the length but it was the only way I could find to share it), created with diff --unified:

 

--- jquery.SPServices-0.7.1a-patched.js  2012-06-08 13:31:54.000000000 -0400
+++ ../SPServices/jquery.SPServices-0.7.1a.js   2012-02-14 14:58:00.000000000 -0500
@@ -1,4 +1,4 @@
-/*
+/*
  * SPServices - Work with SharePoint's Web Services using jQuery
  * Version 0.7.1a
  * @requires jQuery v1.4.2 or greater - jQuery 1.7+ recommended
@@ -1689,10 +1689,6 @@
                 $("input[id='" + columnSelect.Obj.attr("optHid") + "']").bind("propertychange", function() {
                                        showRelated(opt, divId, relatedListXML, relatedColumnsXML);
                                });
-                               // in case this is actually just a text field, invoke the method on 'valueSet' event which is a custom-defined event just for this purpose
-                               columnSelect.Obj.bind('valueSet',function(newVal) {
-                                       showRelated(opt, divId, relatedListXML, relatedColumnsXML);
-                               });
                                break;
                        // Multi-select hybrid
                        case "M":
@@ -1735,9 +1731,6 @@
 
                // Get the list items which match the current selection
                var camlQuery = "";
-
-               buildOptCAMLQueryFromFunction(opt);
-               
                if(opt.CAMLQuery.length > 0) {
                        camlQuery += "";
                }
@@ -2940,9 +2933,6 @@
                        
                        // Build the appropriate CAMLQuery
                        var camlQuery = "";
-                       
-                       buildOptCAMLQueryFromFunction(opt);
-
                        if(opt.CAMLQuery.length > 0) {
                                camlQuery += "";
                        }
@@ -3018,8 +3008,6 @@
                        $("#" + containerId + " li").click(function () {
                                $("#" + containerId).fadeOut(opt.slideUpSpeed);
                                $("#" + columnObjId).val($(this).text());
-                               //trigger the custom valueSet event
-                               $("#" + columnObjId).trigger('valueSet',$(this).text());
                        }).mouseover(function () {
                                var mouseoverCss = {
                                        "cursor": "hand",
@@ -3478,10 +3466,10 @@
                // Multi-select: This will find the multi-select column control in English and most other languages sites where the Title looks like 'Column Name possible values'
                } else if((this.Obj = $("select[ID$='SelectCandidate'][Title^='" + colName + " ']")).html() !== null) {
                        this.Type = "M";
-               // Multi-select: This will find the multi-select column control on a Russian site (and perhaps others) where the Title looks like '????????? ????????: Column Name'
+               // Multi-select: This will find the multi-select column control on a Russian site (and perhaps others) where the Title looks like '�<92>�<8B>б�<80>анн�<8B>�<85> зна�<87>ений: Column Name'
                } else if((this.Obj = $("select[ID$='SelectCandidate'][Title$=': " + colName + "']")).html() !== null) {
                        this.Type = "M";
-               // Multi-select: This will find the multi-select column control on a German site (and perhaps others) where the Title looks like 'M�gliche Werte f�r "Coumn name".'
+               // Multi-select: This will find the multi-select column control on a German site (and perhaps others) where the Title looks like 'Mögliche Werte für "Coumn name".'
                } else if((this.Obj = $("select[ID$='SelectCandidate'][Title$='\"" + colName + "\".']")).html() !== null) {
                        this.Type = "M";
                } else {
@@ -3665,12 +3653,5 @@
        function escapeUrl(u) {
                return u.replace(/&/g,'%26');
        }
-       
-       function buildOptCAMLQueryFromFunction(opt) {
-               // if buildCAMLQueryFn is defined, and CAMLQuery itself is not defined, then fill in the CAMLQuery by calling the function
-               if (typeof opt.buildCAMLQueryFn === 'function') {
-                       opt.CAMLQuery = opt.buildCAMLQueryFn();
-               }
-       }
 
 })(jQuery);
Jun 14, 2012 at 7:32 AM

Hi,

I have a requirement where i need to display information based on the value of two columns , since SPDisplayRelatedInfo was taking only one value in "ColumnName" , I tried with ur logic of filtering dynamically but it not working . I am able to see below error .

 

 

I added reference to below scripts

<script src="/javascripts/jquery-1.6.2.min.js" type="text/javascript">
</script>
 <script src="/javascripts/jquery-1.7.1.js" type="text/javascript">
</script>

<script src="/javascripts/jquery.SPServices-0.7.1a.min.js" type="text/javascript">
</script>
<script src="/javascripts/SPServices-0.7.1a-patched.js" type="text/javascript">
</script>

$().SPServices.SPDisplayRelatedInfo({
  columnName: "Unit",
  relatedList: "{78D94735-3F63-434B-88C7-80C2CADA2C17}",
  relatedListColumn: "Title",
  relatedColumns: ["Super_x0020_User"],
buildCAMLQueryFn: function() {
        return "<Eq><FieldRef Name='system'/><Value Type='Text'>"+$("select[title=System]").children("option:selected").text()+"</Value></Eq>";
    },    displayFormat: "list",
debug:true
  });

 

Please help .. let me know what changes need to be made.

 

Jun 14, 2012 at 7:42 AM

Sorry , the error message screen was deleted in previous post

I am getting JS error in the patched file. :( Is it the reason for not working ... ; Expected in first line

Coordinator
Jun 14, 2012 at 12:41 PM

Thanks for the contribution, Jeff. I'm going to copy it iinto a work item in the Issue Track so that I don't lose it!

M.

Coordinator
Jun 14, 2012 at 12:42 PM
This discussion has been copied to a work item. Click here to go to the work item and continue the discussion.