SPServices.SPCascadeDropdowns does not cascade correctly

Question

I have three SharePoint 2016 lists:

• The organization
• Departments
• Groups

Groups are sorted by Department, and departments are sorted by organization.

The title field in each list is used for the group name, org or dept, and each list has a drop-down list to select the parent element of the corresponding element.

In one of my forms, the user must select the organization, department and group to which the specific software name belongs. I am trying to use SPServices.SPCascadeDropdowns to show only departments for the selected organization, but does nothing.

Relative fields in the form:

<td valign="top" class="ms-formlabel">
  <H3 class="ms-standardheader">
    <nobr>Organization<span class="ms-formvalidation"> *</span></nobr>
  </H3>
</td>
<td valign="top" class="ms-formbody">
  <SharePoint:FormField runat="server" id="ff9{$Pos}" ControlMode="New"
   FieldName="Organization" 
   __designer:bind="{ddwrt:DataBind('i',concat('ff9',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Organization')}"/>
  <SharePoint:FieldDescription runat="server" id="ff9description{$Pos}" FieldName="Organization" ControlMode="New"/>
</td>
<td valign="top" class="ms-formlabel">
  <H3 class="ms-standardheader">
    <nobr>Department<span class="ms-formvalidation"> *</span></nobr>
  </H3>
</td>
<td valign="top" class="ms-formbody">
  <SharePoint:FormField runat="server" id="ff10{$Pos}" ControlMode="New"
  FieldName="Department"
  __designer:bind="{ddwrt:DataBind('i',concat('ff10',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Department')}"/>
  <SharePoint:FieldDescription runat="server" id="ff10description{$Pos}" FieldName="Department" ControlMode="New"/>
</td>

The javascript I'm using is:

$(document).ready(function(){
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}",
        relationshipListParentColumn: "Organization",
        relationshipListChildColumn: "Title",
        parentColumn: "Organization",
        childColumn: "Department",
        debug: true
    });
});

jQuery 3.2.1 jQuery.SPServices-2014.02.min.js. Chrome, . $(). SPServices, , , . , ?

Answer 1

, , ;)

PowerShell script :

$web = get-spweb <YOUR URL>
$template = $web.ListTemplates | where name -eq 'Custom List'
$organizationsListId = $web.Lists.Add("Organizations", "", $template)
$departmentsListId = $web.Lists.Add("Departments", "", $template)
$groupsListId = $web.Lists.Add("Groups", "", $template)

$organizationsLookup = $web.Fields.AddLookup("OrganizationsLookup", $organizationsListId, $false)
$departmentsLookup = $web.Fields.AddLookup("DepartmentsLookup", $departmentsListId, $false)

$organizations = $web.Lists[$organizationsListId]
$departments = $web.Lists[$departmentsListId]
$groups = $web.Lists[$groupsListId]

$departments.Fields.Add($web.Fields.GetFieldByInternalName("OrganizationsLookup"))
$groups.Fields.Add($web.Fields.GetFieldByInternalName("DepartmentsLookup"))
$groups.Fields.Add($web.Fields.GetFieldByInternalName("OrganizationsLookup"))

$organizationsLookupInList = $departments.Fields.GetFieldByInternalName("OrganizationsLookup");
$organizationsLookupInList.LookupField = "Title"
$organizationsLookupInList.Update()

$departmentsLookupInList = $groups.Fields.GetFieldByInternalName("DepartmentsLookup");
$departmentsLookupInList.LookupField = "Title"
$departmentsLookupInList.Update()

$organizationsLookupInList1 = $groups.Fields.GetFieldByInternalName("OrganizationsLookup");
$organizationsLookupInList1.LookupField = "Title"
$organizationsLookupInList1.Update()

function AddListItem($list, $title)
{
    $itm = $list.AddItem()
    $itm["Title"] = $title 
    $itm.Update()
    return $itm
}

function AddListItemDepartments($list, $title, $lookupIdOrg)
{
    $itm = AddListItem $list $title
    $itm["OrganizationsLookup"] = $lookupIdOrg
    $itm.Update();
    return $itm
}

function AddListItemGroups($list, $title, $lookupIdOrg, $lookupIdDep)
{
    $itm = AddListItemDepartments $list $title $lookupIdOrg
    $itm["DepartmentsLookup"] = $lookupIdDep
    $itm.Update();
    return $itm
}

$org1Id = (AddListItem $organizations "AAA NET").ID
$org2Id = (AddListItem $organizations "BBB NET").ID
$org3Id = (AddListItem $organizations "CCC NET").ID
$org4Id = (AddListItem $organizations "DDD NET").ID


$dep1Id = (AddListItemDepartments $departments "Finance" $org1Id).ID
$dep2Id = (AddListItemDepartments $departments "IT" $org1Id).ID
$dep3Id = (AddListItemDepartments $departments "Finance" $org2Id).ID
$dep4Id = (AddListItemDepartments $departments "Social" $org2Id).ID
$dep5Id = (AddListItemDepartments $departments "Fun" $org2Id).ID
$dep6Id = (AddListItemDepartments $departments "Sport" $org2Id).ID
$dep7Id = (AddListItemDepartments $departments "Knowledge" $org3Id).ID
$dep8Id = (AddListItemDepartments $departments "Sport" $org3Id).ID

:

• newform.
• .

• xsltlistviewformwebpart, jquery spservices JSLink :

  ~site/siteassets/jquery-3.2.1.min.js | ~site/siteassets/jquery.SPServices-2014.02.min.js

• CEWP , webpart js:

(. )

$(document).ready(function(){
    $().SPServices.SPCascadeDropdowns({
        relationshipList: "{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx}", // Your departments list id
        relationshipListParentColumn: "OrganizationsLookup",
        relationshipListChildColumn: "Title",
        parentColumn: "OrganizationsLookup",
        childColumn: "DepartmentsLookup",
        debug: true
    });
});

( jQuery 3.2.1)

Answer 2

, , jQuery 3.2.1.

, jQuery 1.10 or greater.

3.2.1 1.12, .

-

SPServices

jquery.SPServices-2014.02.js

jQuery - jQuery.min.js