SPCascadeDropdowns not working in custom newForm

Question

My sharepoint site is intended to record customer orders. I have created three lists Regions, Customers and Orders. Customers are assigned to regions and orders are assigned to customers.

My Order list amongst others includes two lookup fields Order Region and Customer Name. Those are lookup fields pointing to the respective fields in the two lists Region and Customers.

My intention is to setup an SPCascadeDropdowns javascript in the Orders list that will filter the customer names based on the selected region.

I need a clean and segmented structure of my NewForm so I can better guide those who will fill out the fields. Therefore I created a custom NewForm via Sharepoint Designer 2013.

My javascript is included via link in the ContentEditor webpart.

Now my issue is that the Cascading script does not work - in combination with the custom NewForm. Once I use the standard NewForm automatically generated by sharepoint the script actually DOES work. So I assume that the issue probably resides in the coding of my custom NewForm.

I just can't identify the precise error source.

PS: It might be worth noting that my custom NewForm actually DOES recognise scripts which I provide via the Content Editor webpart. My html file that I use to include my javascript code at the same time provides a second javascript (which converts field descriptions into tool-tips). And this latter script is executed perfectly.

So the error source probably is a combination of the cascading function and the way how my custom new form encodes my lookup fields? Or it has to do with the fact that custom forms are coded as DataFormWebparts as opposed to ListFormWebparts? A guess on my side ...

Any idea what the problem might be?

Here is my code for the SPCascadeDropdowns script cascading.js.

var myJQ = jQuery.noConflict(true);

myJQ(document).ready(function() {
    myJQ().SPServices.SPCascadeDropdowns({

    relationshipList: "Customers",
    relationshipListParentColumn: "Region",
    relationshipListChildColumn: "Customer_x0020_Name",
    parentColumn: "Order Region",
    childColumn: "Customer Name",
    debug: true
  });
});

The script is included via html document orderNewForm.html

<script language="javascript" type="text/javascript" src="/sites/mySite/SiteAssets/scripts/cascading.js"></script>

This document is called from within my custom NewForm in the Content Editor webpart

<WebPartPages:ContentEditorWebPart runat="server" __MarkupType="xmlmarkup" WebPart="true" __WebPartId="{xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx}" >
<WebPart xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://schemas.microsoft.com/WebPart/v2">
  <Title>Content Editor</Title>
  <FrameType>Default</FrameType>
  <Description>Allows authors to enter rich text content.</Description>
  <IsIncluded>true</IsIncluded>
  <ZoneID>Main</ZoneID>
  <PartOrder>1</PartOrder>
  <FrameState>Normal</FrameState>
  <Height />
  <Width />
  <AllowRemove>true</AllowRemove>
  <AllowZoneChange>true</AllowZoneChange>
  <AllowMinimize>true</AllowMinimize>
  <AllowConnect>true</AllowConnect>
  <AllowEdit>true</AllowEdit>
  <AllowHide>true</AllowHide>
  <IsVisible>true</IsVisible>
  <DetailLink />
  <HelpLink />
  <HelpMode>Modeless</HelpMode>
  <Dir>Default</Dir>
  <PartImageSmall />
  <MissingAssembly>Cannot import this Web Part.</MissingAssembly>
  <PartImageLarge>/_layouts/15/images/mscontl.gif</PartImageLarge>
  <IsIncludedFilter />
  <ExportControlledProperties>true</ExportControlledProperties>
  <ConnectionID>00000000-0000-0000-0000-000000000000</ConnectionID>
  <ID>x_xxxxxxxx_xxxx_xxxx_xxxx_xxxxxxxxxxxx</ID>
  <ContentLink xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor">/sites/mySite/SiteAssets/scripts/orderNewForm.html</ContentLink>
  <Content xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
  <PartStorage xmlns="http://schemas.microsoft.com/WebPart/v2/ContentEditor" />
</WebPart>
</WebPartPages:ContentEditorWebPart>

My form fields are displayed in a DataFormWebpart.

<!-- LIST FIELD: Order Region ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    <tr>
                        <td width="190px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>Order Region<span class="ms-formvalidation"> *</span>
                                </nobr>
                            </H3>
                        </td>
                        <td width="400px" valign="top" class="ms-formbody">
<!--                            <SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="Order_x0020_Region" __designer:bind="{ddwrt:DataBind('i',concat('ff6',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Order_x0020_Region')}"/>-->
                            <SharePoint:FormField runat="server" id="ff6{$Pos}" ControlMode="New" FieldName="Order_x0020_Region" />
                            <SharePoint:FieldDescription runat="server" id="ff6description{$Pos}" FieldName="Order_x0020_Region" ControlMode="New"/>
                        </td>
                    </tr>
                    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

                    
                    <!-- LIST FIELD: Customer Name ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->
                    <tr>
                        <td width="190px" valign="top" class="ms-formlabel">
                            <H3 class="ms-standardheader">
                                <nobr>Customer Name<span class="ms-formvalidation"> *</span>
                                </nobr>
                            </H3>
                        </td>
                        <td width="400px" valign="top" class="ms-formbody">
                            <!--<SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="New" FieldName="Customer_x0020_Name" __designer:bind="{ddwrt:DataBind('i',concat('ff7',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@Customer_x0020_Name')}"/>-->
                            <SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="New" FieldName="Customer_x0020_Name"/>
                            <SharePoint:FieldDescription runat="server" id="ff7description{$Pos}" FieldName="Customer_x0020_Name" ControlMode="New"/>
                        </td>
                    </tr>
                    <!-- ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ -->

I use jquery 3.6.0 and SPServices 2014.02

Answer 1

I found the answer in another post. Credit goes to [Jay doshi], thank you Jay!

What I needed to do was to add some tags in my custom form. I just paste Jay's solution here:

1. Add class in table tag Find your first field <tr> in your custom list form. Find it's parent table tag. You get something like below tag: <table border="0" cellspacing="0" width="100%"> modify it as: <table width="100%" class="ms-formtable" style="margin-top:8px;" border="0" cellpadding="0" cellspacing="0">

2. Now go to your field and add below tag before <SharePoint:FormField> tag. <xsl:comment>FieldName="Title" FieldInternalName="Title" FieldType="SPFieldText"</xsl:comment>

Replace value in above tag FieldName with Field Display Name, FieldInternalName with Internal Name of the Field, FieldType with Type of the field.

Specifically in my case the second point would be:

<!-- Include a field definition that ensures that SPCascasedropdowns works on custom form -->
<xsl:comment> FieldName="Customer Name" FieldInternalName="Customer_x0020_Name"  FieldType="SPFieldLookup"</xsl:comment>
<!-- end of definition -->
<SharePoint:FormField runat="server" id="ff7{$Pos}" ControlMode="New" FieldName="Customer_x0020_Name"/>

Same applies to the region field. Note that you need to adjust the FieldType, in my case to SPFieldLookup.

One last comment. As you might notice by the code display here the code (i.e. "Fieldname") will not be highlighted as usual. Same applies when you use Sharepoint Designer. It will be highlighted in the usual way if instead you use

<xsl:comment FieldName="Customer Name" FieldInternalName="Customer_x0020_Name" FieldType="SPFieldLookup" />

At least in Sharepoint. Therefore it seems tempting to use that simplified way of coding. However, I made the experience that this second version won't work, at least not with my custom form. You really need to stick to the code as proposed by Jay.