Verknüpfte Listen erstellen

Als Spot-Entwickler können Sie einen Spot mit verknüpften Listen konfigurieren, die basierend auf den Werten anderer Listen dynamisch gefüllt werden. Dies bedeutet abhängige Dropdown-Listen, bei denen sich die Auswahl von Elementen aus einer Liste auf die verfügbaren Optionen in einer anderen Liste auswirkt. Die Listen werden dynamisch mit Informationen von einem Webservice gefüllt. Alles, was Sie brauchen, ist die URL des Webservices.

Hinweis

Erfahren Sie mehr über das Erstellen von Dropdown-Listen in HTML Wizard-Spots.

Best Practice

Beachten Sie vor dem Konfigurieren der verknüpften Listen die folgenden Empfehlungen:

• Geben Sie die Abhängigkeiten jeder verknüpften Liste korrekt an, damit sie die richtigen Daten abrufen kann.

• Stellen Sie sicher, dass die API-Endpunkte (URLs) das erwartete Datenformat zurückgeben.

• Initialisieren Sie die Werte der verknüpften Liste auf Null und behandeln Sie Fälle, in denen abhängige Daten möglicherweise nicht verfügbar sind.

Verknüpfte Listen konfigurieren

Führen Sie die folgenden Schritte aus, um verknüpfte Listen zu erstellen:

1. Geben Sie ein Spotelement mit den folgenden Parametern an:

   Parameter	Beschreibung
   Id	Geben Sie die ID des Elements an. Die ID muss eindeutig sein. Beispiel: marketLinkedList
   DataType	Geben Sie den Datentyp an, den das Element enthält. Beispiel: linkedList
   DisplayName	Geben Sie den Anzeigenamen des Elements an. Dieser Name wird im HTML Wizard angezeigt. Beispiel: Markt

2. Konfigurieren Sie jede Liste im Element mit den folgenden Parametern:

   Parameter	Beschreibung
   Id	Geben Sie die ID der Liste an. Die ID muss eindeutig sein. Beispiel: Markt
   DisplayName	Geben Sie den Anzeigenamen der Liste an. Dieser Name wird im HTML Wizard angezeigt. Beispiel: Markt
   Url	Geben Sie die URL des Webservice (API-Endpunkt) an, der Daten für die Listenelemente bereitstellt. Beispiel: https://example.com/markets
   Dependencies	Geben Sie die IDs anderer Listen an, von denen diese Liste abhängt, getrennt durch Kommas. Beispiel: ["market", "modelGroup"]
   Response	Verwenden Sie Response Mapping, um die richtigen Daten aus der API Response zu extrahieren. Example
   Entry	Geben Sie den Einstiegspunkt in der API Response an, an dem sich die Listenelemente befinden. Example
   Mapping	Geben Sie die folgenden Einstellungen an, um die Antwortdaten den Eigenschaften des Listenelements zuzuordnen: Id: Feldname für die ID des Elements. Wert: Feldname für den Namen des Elements. Name: Feldname für den Anzeigenamen des Elements. Example
   Value	Initialisieren Sie das Feld, um die ausgewählten Werte für jede verknüpfte Liste zu speichern. Verwenden Sie optional null.
   Options	Legen Sie zusätzliche Optionen wie Required fest.

Beispielkonfiguration

Jede Spot-Konfiguration wird in einer JSON-Struktur angegeben. Das folgende Beispiel ist ein Konfigurationsausschnitt mit verknüpften Listen:

{
  "Document": {
    "Elements": [
      {
        "Id": "marketLinkedList",
        "DataType": "linkedList",
        "DisplayName": "Market",
        "Lists": [
          {
            "Id": "market",
            "DisplayName": "Market",
            "Url": "https://example.com/markets",
            "Dependencies": [],
            "Response": {
              "Entry": "",
              "Mapping": {
                "Id": "market",
                "Value": "market",
                "Name": "market"
              }
            }
          }
        ],
        "Value": {
          "market": null
        },
        "Options": {
          "Required": true
        }
      },
      {
        "Id": "modelRange",
        "DataType": "linkedList",
        "DisplayName": "Model Range",
        "Lists": [
          {
            "Id": "modelGroup",
            "DisplayName": "Model Group",
            "Url": "https://example.com/markets/{market}",
            "Dependencies": ["market"],
            "Response": {
              "Entry": "ranges",
              "Mapping": {
                "Id": "id",
                "Value": "name",
                "Name": "name"
              }
            }
          },
          {
            "Id": "subModelGroup",
            "DisplayName": "Sub Model Group",
            "Url": "https://example.com/markets/{market}/ranges/{modelGroup}",
            "Dependencies": ["market", "modelGroup"],
            "Response": {
              "Entry": "series",
              "Mapping": {
                "Id": "id",
                "Value": "name",
                "Name": "name"
              }
            }
          }
        ],
        "Value": {
          "modelGroup": null,
          "subModelGroup": null
        },
        "Options": {
          "Required": true
        }
      }
    ]
  }
}

Was passiert im Beispiel?

Im Beispiel werden die folgenden Elemente und verknüpften Listen konfiguriert:

• Das Element marketLinkedList enthält eine verknüpfte Liste:

  • Die verknüpfte Liste heißt market.

  • Sie holt ihre Elemente von https://example.com/markets.

  • Da es keine Abhängigkeiten gibt, kann sie Daten unabhängig von anderen Listen abrufen.

• Das Element modelRange enthält zwei verknüpfte Listen:

  • Die erste verknüpfte Liste heißt modelGroup. Sie hängt von der Liste market ab, um ihre Einträge abzurufen.

  • Die zweite verknüpfte Liste heißt subModelGroup. Sie hängt von den Listen market und modelGroup ab, um ihre Einträge abzurufen.

Beispielanzeige

Im HTML Wizard werden Listenelemente wie folgt angezeigt: