Beispiele

Verwenden Sie dieses Widget, um zum Beispiel die folgenden Anforderungen an das App-Design zu unterstützen:

• Sie möchten eine App erstellen, die es Endbenutzern ermöglicht, einen Datensatz in der Liste auszuwählen und auf der Karte anzuzeigen.
• Sie möchten Datensätze aus einer Datenquelle in einer benutzerdefinierten Listenansicht anzeigen. Die anzuzeigenden Datensätze müssen bestimmte Kriterien erfüllen.
• Sie möchten Endbenutzern eine Liste für bestimmte Interaktionen bereitstellen, zum Beispiel für das Filtern der Liste, das Sortieren der Liste mit vordefinierten Optionen und das Auswählen von Datensätzen in der Liste.

Verwendungshinweise

Wenn Sie ein Listen-Widget hinzufügen, wählen Sie zuerst ein Vorlagendesign für die Elementkacheln in der Liste und klicken auf Start. Auf der Zeichenfläche wird das erste Element im Widget "Liste" aktiviert. Danach können Sie das Layout der Widgets in ihm ändern oder weitere Elemente hinzufügen, indem Sie Widgets aus dem Fenster Einfügen in die erste Kachel ziehen. Derzeit unterstützt das Widget "Liste" nur Text-, Schaltflächen- und Bild-Widgets.

Das Widget "Liste" benötigt eine Datenquelle. Das Widget "Liste" können Sie auf einer Seite mit einer Karte oder ohne eine Karte verwenden. Wenn Sie ein Widget vom Typ "Karte" einfügen, das denselben Layer verwendet, und dann auf ein Feature in der Liste klicken, wird das entsprechende Feature in der Karte hervorgehoben. Beim Gestalten der Inhalte von Elementkacheln in der Liste geben Sie an, was angezeigt werden soll, indem Sie die Widgets im ersten Element konfigurieren und den entsprechenden dynamischen Inhalt zum Füllen der Datensätze aus der verbundenen Datenquelle auswählen. (Widgets, die Sie der Liste hinzufügen, übernehmen standardmäßig die Daten der Liste.) Damit ein Listen-Widget mit anderen Widgets in Ihrer App interagieren kann, können Sie auch bestimmte Aktionen festlegen, wie zum Beispiel für das Zoomen auf das ausgewählte Feature auf einer Karte in einem Karten-Widget oder das Anzeigen der Attribute des ausgewählten Features in einem Feature-Info-Widget.

Wenn Sie das Widget "Liste" mit mehreren Zuständen (Normal, Daraufzeigen und Ausgewählt) konfigurieren, wird die Schaltfläche Verknüpft mit angezeigt, wenn Sie die geschachtelten Widgets auswählen. Diese Schaltfläche gibt an, ob die Einstellungen des Widgets isoliert oder hinsichtlich der Zustände synchronisiert sind.

• Bei synchronisierten Widgets sind Widget-Inhalt und Style-Einstellungen (Hintergrund, Rahmen und Schatten) identisch, und die Größe und Positionen können in den einzelnen Zuständen unterschiedlich sein.
• Bei isolierten Widgets können Sie Eigenschaften ohne Auswirkung auf andere Widgets in einem anderen Zustand konfigurieren.
• Um dasselbe Widget in einem anderen Zustand zu verwenden oder die Größe und Position des Widgets ebenfalls zu synchronisieren, wählen Sie das Widget aus und übernehmen es in den gewünschten Zustand.
• Wenn Sie ein synchronisiertes Widget löschen, wird dasselbe Widget in anderen Zuständen ebenfalls gelöscht, sofern Sie das Widget zuvor nicht isoliert haben.

Einstellungen

Das Widget "Liste" verfügt über folgende Einstellungen:

• Vorlage auswählen: Wählen Sie unter den vordefinierten Listendesigns aus, oder beginnen Sie mit einer leeren Listenvorlage. (Wenn Sie eine Vorlage auswählen, können Sie ihr Aussehen später anpassen.)
• Daten: Geben Sie die Daten an, die in der Liste enthalten sein sollen.
  • Daten auswählen: Wählen Sie die Datenquelle für einen Feature-Layer mit Features aus, die im Widget angezeigt werden sollen. Sie können nur eine Datenansicht für einen Feature-Layer auswählen. In den Einstellungen der Datenansicht können Sie die Daten filtern, um einzuschränken, was im Widget angezeigt wird, die Daten so sortieren, dass die Listenelemente in einer bestimmten Reihenfolge angezeigt werden, oder Datensatzeinschränkungen festlegen.
• Anordnung: Definieren Sie, wie die Elemente in der Liste angezeigt werden sollen.
  • Richtung: Zeigt die Elemente in einer horizontalen oder vertikalen Liste an.
  • Elementbreite oder Elementhöhe: Geben Sie die Größe der Listenelemente in Pixel an.
    • Für eine horizontale Liste definieren Sie die Breite des Listenelements, indem Sie eine präzise Pixelzahl in dieser Einstellung angeben oder die Größenanpassungsleiste auf die Zeichenfläche ziehen. Die Höhe des Elements wird durch die Höhe des Widgets definiert.
    • Für eine vertikale Liste definieren Sie die Höhe des Listenelements, indem Sie eine präzise Pixelzahl in dieser Einstellung angeben oder die Größenanpassungsleiste auf die Zeichenfläche ziehen. Die Breite des Elements wird durch die Breite des Widgets definiert.

    Hinweis:

    Wenn für die Liste ein benutzerdefiniertes Layout für Geräte mit mittelgroßem oder kleinem Bildschirm verwendet wird, können Sie die Größe der Listenelemente anpassen. Symbole in dieser Einstellung geben an, für welche Bildschirmgröße (groß, mittelgroß und klein) die Konfiguration gilt.

  • Verhältnis von Höhe zu Breite sperren: Sperrt das Verhältnis von Höhe zu Breite von Listenelementen, wenn die Größe des Widgets angepasst wird.
  • Horizontaler Abstand oder Vertikaler Abstand: Definieren Sie den Abstand zwischen Listenelementen in Pixel.
  • Seiten-Style: Definieren Sie, wie Listenelemente, die nicht auf die erste Seite passen, geladen werden sollen:
    • Bildlauf: Weitere Elemente laden, wenn der Benutzer einen Bildlauf in der Liste durchführt.
      • Bildlaufleiste: Bildlaufleiste anzeigen.
      • Navigator: Steuerelemente für die Navigation nach oben und nach unten für den Bildlauf durch die Liste einfügen. Definieren Sie für Schritt die Anzahl der Elemente, um die bei jedem Klick im Steuerelement "Navigator" weitergeblättert werden soll.
    • Mehrseitig: Teilt mithilfe der Paginierung eine lange Liste in mehrere Seiten. Definieren Sie für Elemente pro Seite die Anzahl der Elemente, die auf einer Seite angezeigt werden sollen.
• Zustände: Geben Sie eine visuelle Darstellung für die Angabe der drei Zustände von Listenelementen an: Normal (Standardzustand für das Element ohne Benutzerinteraktion), Daraufzeigen (Zustand, der durch den Benutzer initiiert wird, wenn er auf ein Listenelement zeigt), und Ausgewählt (Benutzer hat dieses Listenelement ausgewählt).

  Tipp:

  Wenn Sie die entsprechenden Zustände für geschachtelte Widgets ändern, können Sie die Änderungen isolieren, damit sie nicht auf alle Zustände angewendet werden. Wählen Sie das Widget "Liste" aus, klicken Sie auf die Schaltfläche für den Zustand, den Sie ändern möchten, klicken Sie auf ein geschachteltes Widget, klicken Sie auf die Schaltfläche Verknüpft mit , wählen Sie Isolieren aus, und konfigurieren Sie dann die Einstellungen des geschachtelten Widgets. (Wenn Sie erst nach dem Konfigurieren der Einstellungen auf Isolieren klicken, wurden die Änderungen bereits auf die anderen Zustände angewendet.)

  • Hintergrund: Legen Sie den Hintergrund für Listenelemente in ihrem normalen Zustand fest (keine aktuelle Benutzerinteraktion). Wählen Sie eine Füllfarbe oder ein Bild aus. Wenn Sie ein Bild auswählen, dann können Sie es mit  Anpassen, Ausfüllen, Zentrieren, Kachel oder Strecken innerhalb der Umrandung des Listenelements positionieren. Wenn Sie Anpassen auswählen, wird die Hintergrundfüllfarbe um das Bild herum angezeigt.
  • Rahmen: Legen Sie den Rahmen für Listenelemente in ihrem normalen Zustand fest, indem Sie die Rahmenfarbe, die Rahmenart (zum Beispiel gestrichelt oder gepunktet) und die Rahmenbreite in Pixel auswählen.
  • Rahmenradius: Ändern Sie den Radius (in Pixel oder Prozent), um die Form der Ecken von Listenelementen in ihrem normalen Zustand festzulegen. Sperren Sie die Einstellungen, um den Radius aller vier Ecken zu synchronisieren.
  • Daraufzeigen: Geben Sie an, ob sich das Aussehen eines Listenelements ändert, wenn der Endbenutzer darauf zeigt. Wenn der Zustand beim Daraufzeigen aktiviert wurde, werden im Konfigurationsfenster seine Einstellungen mit Optionen zum Ändern von Hintergrund, Rahmen und Rahmenradius des Listenelements, auf das gezeigt wird, angezeigt.
    • Neben dem ersten Listenelement auf der Zeichenfläche wird die Registerkarte Daraufzeigen angezeigt. Es wird aktualisiert, um zu zeigen, wie das Element aussieht, wenn der Benutzer darauf zeigt. Für den Zustand beim Daraufzeigen können Sie auch Widgets hinzufügen oder vorhandene Widgets löschen, in ihrer Größe ändern und neu anordnen.
  • Ausgewählt: Geben Sie an, ob die Elementkachel in der Liste ausgewählt werden kann und wie sich ihr Aussehen ändert, wenn der Endbenutzer es anklickt, um es auszuwählen. Wenn der ausgewählte Zustand aktiviert wurde, werden im Konfigurationsfenster seine Einstellungen mit Optionen zum Zulassen der Mehrfachauswahl und zum Ändern von Hintergrund, Rahmen und Rahmenradius des ausgewählten Listenelements angezeigt. Mit dem Auswahlmodus können Sie die Auswahl auf nur ein Element begrenzen (beim Klicken auf ein weiteres Element wird die aktuelle Auswahl wieder aufgehoben) oder zulassen, dass der Endbenutzer mehrere Elemente gleichzeitig auswählen kann (beim Klicken auf ein weiteres Element wird es zur aktuellen Auswahl hinzugefügt).
    • Neben dem ersten Listenelement auf der Zeichenfläche wird die Registerkarte Ausgewählt angezeigt. Es wird aktualisiert, um zu zeigen, wie das Element aussieht, wenn der Benutzer es auswählt. Für den Zustand "Ausgewählt" können Sie auch Widgets hinzufügen oder vorhandene Widgets löschen, in ihrer Größe ändern und neu anordnen.
• Werkzeuge: Stellen Sie Werkzeuge für die Interaktion der Endbenutzer mit der Liste bereit.
  • Suchen: Stellen Sie ein Suchfeld in der Liste bereit.
    • Suchfelder auswählen: Wählen Sie mindestens ein Feld aus, das durchsucht werden soll.
    • Exakte Übereinstimmung: Beschränkt die Suchergebnisse auf die Datensätze, die genau mit dem Suchausdruck übereinstimmen.
    • Hinweis: Geben Sie einen Hinweis an, der als Platzhaltertext im Suchfeld angezeigt wird, um Endbenutzern die Suche nach relevanten Werten zu erleichtern.
  • Sortieren: Stellen Sie ein Menü bereit, mit dessen Hilfe der Endbenutzer die Liste nach bestimmten Feldern und in einer bestimmten Reihenfolge sortieren kann. Geben Sie einen benutzerdefinierten Namen für jede Menüoption ein.
  • Filter: Fügen Sie Filter für die Interaktion der Endbenutzer mit der Liste hinzu.
  • Auswahl anzeigen: Stellen Sie die Option bereit, mit deren Hilfe der Endbenutzer die Liste aktualisieren kann, damit nur die ausgewählten Elemente angezeigt werden.
  • Auswahl aufheben: Endbenutzer können hiermit die Auswahl aller ausgewählten Elemente aufheben.

  Hinweis:

  Die Werkzeuge Auswahl anzeigen und Auswahl aufheben sind nur verfügbar, wenn der Zustand Ausgewählt aktiviert ist.