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