Thursday, August 23, 2012

Use of Spservices in SharePoint 2010 (SPFilterDropdown, SPCascadeDropdowns, SPDisplayRelatedInfo)


Here i have example with code. In the code first portion i have written code for Spservice method for filter the drop value Base on login User.

Second portion is for the Cascading drop-down. Following 2 are the images for this.



Third portion is for Get Related Information from other list and fill related Information .
Following 2 are the images for this.


*********************                  Code Sample                ***********************
* Write a code in SharePoint Designer

<script type="text/javascript" src="../../Style%20Library/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="../../Style%20Library/jquery.SPServices-0.7.1a.js"></script>
<script type="text/javascript" src="../../Style%20Library/jquery.SPServices-0.7.1a.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

// ************   Spservice method for filter the drop value Base on log in user    **********
$().SPServices.SPFilterDropdown({
  relationshipList: "Department",
  relationshipListColumn: "Title",
  columnName: "Department",
  CAMLQuery: "<Eq><FieldRef Name='UserName'/><Value Type='Integer'><UserID Type='Integer' /></Value></Eq>",
  completefunc: null,
  debug: false
});
//**************************** This method is used for the Cascading dropdown ****************************************//

$().SPServices.SPCascadeDropdowns({
relationshipList: "BudgetDetail",
relationshipListParentColumn: "Department",
relationshipListChildColumn: "Title",
parentColumn: "Department",
childColumn: "BudgetSubCode",
debug: true
});
//*************************** END  ******************************************//

//*************************** Get Related Information from other list ******************************************//
//This method is used for when u select dropdown value based on this value filled the value on textbox value
$().SPServices.SPDisplayRelatedInfo({      
                columnName: "BudgetSubCode",
relatedList: "BudgetDetail",
relatedListColumn: "Title",
relatedColumns: ["BudgetSubName","BudgetSubAmount","BudgetCode"],
displayFormat: "list",
headerCSSClass: "ms-hidden",
                rowCSSClass:"ms-hidden",
                completefunc: SetFields
});

function SetFields(){

            var srcDivId = "SPDisplayRelatedInfo_BudgetSubCode";
            var tds = document.getElementById(srcDivId).getElementsByTagName("td");
           
            if(tds.length>0)
            {
            var Column1Data1 = tds[0].innerHTML;
            var Column1Data2 = tds[1].innerHTML;
           
            $('#ctl00_m_g_8b1ecbc0_8438_4069_92d0_34cc9235ab90_ctl00_ctl05_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_TextField')[0].value = Column1Data1;
$('#ctl00_m_g_8b1ecbc0_8438_4069_92d0_34cc9235ab90_ctl00_ctl05_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_TextField')[0].value = Column1Data2;
     
}
else
{
            $('#ctl00_m_g_8b1ecbc0_8438_4069_92d0_34cc9235ab90_ctl00_ctl05_ctl05_ctl00_ctl00_ctl04_ctl00_ctl00_TextField')[0].value = '';
$('#ctl00_m_g_8b1ecbc0_8438_4069_92d0_34cc9235ab90_ctl00_ctl05_ctl07_ctl00_ctl00_ctl04_ctl00_ctl00_TextField')[0].value = '';


}
    };  

});
//*************************** END  ******************************************//
</script>



1 comment: