SharePoint 2013 – kaskadierende Dropdownfelder mit SharePoint Designer erstellen

Der Wunsch kommt immer wieder in SharePoint auf: Wie kann man die Auswahl in einem Dropdown Feld in Abhängigkeit von dem ausgewähltem Land oder einem anderen beliebigen Wert, die passenden Städte in einem weiteren Dropdown anzuzeigen?

Die Lösungen können unterschiedlich sein. In diesem Blog beschreibe ich einen möglichen Weg. Hierzu benötigen Sie zunächst drei verschiedene SharePoint Listen.

1. Eine Liste Länder, heißt „Country

clip_image001

2. Eine Liste Städte „States“ (die Spalte Country ist vom Typ Nachschlagen)

clip_image002

3. Eine Liste Abfrage (hier soll die NewForm.aspx und die EditForm.aspx angepasst werden)

clip_image003

clip_image004

Die Spalten „Country“ und „State“ sind auch hier wieder Nachschlage-Spalten.

Am besten erzeugen Sie im SharePoint Designer ein neues Formular, welches Sie zum Standardformular machen. Analog dazu verfahren Sie, wenn Sie das Formular EditForm.aspx mit dem gleichen Code ausstatten.

clip_image006

Die Kaskadierung der Felder wird per Javascript durchgeführt, welches jeweils in die EditForm.aspx und die NewForm.aspx eingefügt werden muss. Weiterhin wird dann noch Jquery benötigt. Die Files können über das Internet leicht bezogen werden.

Nach Eingabe des Textes „jquery cdn“ in eine Suchmaschine, gelangen Sie zu folgender Seite

clip_image008

Nach einer weiteren Eingabe von: „spservices cdn“ finden Sie folgende Seite

clip_image010

Auf beiden Seiten kopieren Sie sich die auf den Screenshots gekennzeichneten Adressen. Diese beiden Adressen fügen Sie wie nachfolgend abgebildet in Ihr geöffnetes Formular unter den Tag „PlaceHolderAdditionalPageHead“ hinein.

clip_image012

Sie können alternativ diese beiden Zeilen auch direkt eingeben, ohne über das Internet danach zu suchen.

Direkt unter den eingefügten Code fügen Sie folgendes Script ein:

<script type=""text/javascript">

$(document).ready(function(){

$().SPServices.SPCascadeDropdowns({

relationshipList: "States",

relationshipListParentColumn: "Country",

relationshipListChildColumn: "Title",

parentColumn: "Country",

childColumn: "State",

debug: true

})

})

</script>"

Abschließend speichern Sie die Seite und bestätigen, dass Sie  die Websitedefinition überschreiben möchten.

Wenn Sie nun ein neues Element in der Liste Abfrage  erstellen, wird Ihnen die passende Auswahl der Städte angezeigt. Sofern Sie die Funktionalität ebenso für das Formular EditForm.aspx benötigen oder wünschen, muss dies in gleicher Weise auch für diese angepasst werden.

Das Resultat sieht so aus:

clip_image014

Nach Aufruf des Formulars und Auswahl der Country USA, werden nur noch die Beispielstädte USA 1 und USA 2 angezeigt, dafür sorgt die Kaskadierung.

Viel Spaß damit

Kommentare sind geschlossen