Fügen Sie den Apps, die Sie mit Experience Builder erstellen, Funktions- und Layout-Widgets hinzu. Sie können die Standard-Styles übernehmen oder das Aussehen anpassen und Widgets mit Daten, Links und weiteren Widgets verbinden, um eine eigene Web Experience zu erstellen.
Einfügen von Widgets
Widgets sind die Grundlage Ihrer Apps. Falls Sie nicht die Widgets verwenden, die in den verschiedenen Vorlagen für Seiten, Fenster, Bildschirmgruppen und Blöcke verfügbar sind, können Sie Widgets über das Fenster Widget einfügen per Drag & Drop hinzufügen. Die Widgets "Widget-Controller" und "Platzhalter" sowie Fenster mit Bildlauf in einer Bildschirmgruppe weisen ebenfalls die Schaltfläche Widget hinzufügen auf. Widgets können als App-Werkzeuge oder als Container zum Organisieren der Seite fungieren. Sie sind in sechs Kategorien gruppiert:
- Kartenbasierte Widgets sind App-Werkzeuge, die eine Verbindung mit einem Karten-Widget herstellen.
- Datenbasierte Widgets sind App-Werkzeuge, die mit Datenquellen interagieren.
- Seitenelement-Widgets dienen zum Hinzufügen von Bildern, Text und anderen Medien.
- Menü- und Werkzeugleisten-Widgets stellen Optionen bereit, mit deren Hilfe Benutzer Ihre App nutzen und freigeben können.
- Layout-Widgets sind Container, in denen Sie Widgets auf der Seite organisieren können.
- Abschnitts-Widgets präsentieren dynamische Inhalte in mehreren Ansichten, zwischen denen die Benutzer wechseln können.
Während Sie Widgets hinzufügen und schachteln, können Sie die interaktive Gliederung jeder Seite nutzen, die die Widget-Hierarchie für die Seite zeigt und Ihnen hilft, geschachtelte Widgets zu organisieren, auszuwählen und zu konfigurieren. Wenn Sie mit der Maus auf ein Widget in der Gliederung zeigen, wird das entsprechende Widget auf der Zeichenfläche hervorgehoben. Klicken Sie in der Gliederung auf ein Widget, und klicken Sie auf die Schaltfläche Mehr, um ein Menü mit Widget-Operationen wie Umbenennen, Duplizieren, Löschen, Position und Größe sperren, Anordnen und Ausrichten anzuzeigen. Bei Widgets, die andere Widgets enthalten, klicken Sie auf Alle einblenden oder Alle ausblenden, um die darunter liegende Hierarchie ein- oder auszublenden.
Verwenden Sie die standardmäßigen Tastenkombinationen zum Kopieren/Einfügen (Strg+C und Strg+V für Windows, Cmd-C und Cmd-V für Mac), um Widgets seitenübergreifend zu kopieren. Beim Duplizieren oder Kopieren eines Widgets bleiben alle seine Einstellungen mit Ausnahme der Position auf der Seite und der Beschriftung erhalten. Neue Widget-Beschriftungen werden nach einer Regel fortlaufend nummeriert. Wenn Sie beispielsweise Bild 1 duplizieren, erhalten Sie Bild 2 oder, falls Bild 2 bereits vorhanden ist, Bild 3. Beim Ziehen von Widgets auf der Zeichenfläche zum Verschieben und Anpassen ihrer Größe werden Fanglinien oder Entfernungswerte angezeigt, mit deren Hilfe Sie Widgets in einem festen Layout ausrichten und genau positionieren können. Wenn Fanglinien angezeigt werden, werden die entsprechenden Widgets bei allen Bildschirmauflösungen aneinander gefangen.
Die Registerkarte Ausstehend im Fenster Widget einfügen ist nützlich, wenn Sie Ihre App für mehrere Bildschirmgrößen optimieren müssen. Zum Beispiel könnte die Designanforderung bestehen, dass das Karten-Widget für große und mittelgroße, nicht aber für kleine Bildschirme implementiert werden soll. In diesem Fall können Sie das Karten-Widget aus dem Design für kleine Bildschirme entfernen und der ausstehenden Liste hinzufügen.
Verbinden von Widgets
Im Konfigurationsfenster für das Widget befinden sich Einstellungen für Inhalt, Style und Aktion. Über die Einstellung "Inhalt" definieren Sie das Verhalten, die Datenverbindungen und weitere Einstellungen für das Widget. Ausrichtung und Styling der Widgets erfolgen auf der Registerkarte Style, die Einstellungen für Größe, Position, Animation, Hintergrund, Rahmen und Feldschatten enthält. Die Position der Widget-Fenster wird in der Live-App gespeichert. Sie können auch die Widget-Werkzeugleisten verwenden, um Widgets auszurichten, zu entfernen oder zu duplizieren.
Bestimmte Widgets unterstützen das Hinzufügen von Aktionen, die die Kommunikation zwischen Widgets ermöglichen. So löst zum Beispiel eine Aktion in einem Widget eine Aktion in einem anderen Widget aus, beispielsweise beim Klicken auf ein Karten-Feature, um die in einem Feature-Info-Widget angezeigten Feature-Details zu aktualisieren. Sie können Meldungsaktionen für automatische Interaktionen oder Datenaktionen, auf die Endbenutzer zur Laufzeit über das Menü Aktionen zugreifen können, hinzufügen. Kombinieren Sie Werkzeuge und Widgets, und verbinden Sie sie, um zusätzliche Interaktivität zu erreichen. Durch Festlegen von Links zu anderen Inhalten wie Seiten, Fenstern und Abschnittsansichten können Sie den Benutzern bei der Navigation in Ihrer App helfen.
Festlegen von Links
Sie können mit der Option Link festlegen einen Hyperlink zu Ihrem Inhalt hinzufügen. Darüber können Benutzer zu einer anderen Seite, einem anderen Fenster oder einer anderen Abschnittsansicht in Ihrer App, zu einer Druckvorschau oder zu einer anderen Webadresse geleitet werden. Auf Bildlaufseiten können Sie Links für Widgets festlegen, sodass ein Bildlauf zu einem bestimmten Block auf der Seite durchgeführt oder wieder der obere Bereich der Seite angezeigt wird. Die folgenden Widgets unterstützen das Festlegen eines Links:
Einstellungen
Beim Festlegen eines Links können Sie unter den folgenden Optionen wählen:
- Seite: Link verweist auf eine andere Seite in Ihrer Anwendung.
- Ansicht: Link verweist auf eine bestimmte Ansicht in einem Abschnitts-Widget.
- Fenster: Link öffnet ein bestimmtes Fenster in Ihrer Anwendung.
- URL*: Link zu einer Webadresse (geben Sie eine mit https:// beginnende URL ein).
- Druckvorschau: Der Link führt zu einer Druckvorschau.
- Block: Link führt einen Bildlauf zu einem bestimmten Block auf derselben Bildlaufseite in der App durch. (Für das Widget "Text" nicht verfügbar.)
- Seitenanfang: Link führt einen Bildlauf zum Seitenanfang durch. (Für das Widget "Text" nicht verfügbar.)
*Sie können die URL-Option auch verwenden, um einen Link zu einer E-Mail-Adresse, Telefonnummer usw. zu erstellen. (Geben Sie beispielsweise mailto:someone@example.com ein.) Derzeit unterstützt Link festlegen die folgenden URI-Schemata:
| Schema | Zweck | Verwendungshinweise | Format | Beispiele |
|---|---|---|---|---|
| https | Webadressen | https://xxx | https://www.esri.com | |
| mailto | E-Mail-Adressen | Header sind optional, enthalten aber oft subject=. Füllen Sie den Text einer Nachricht vorab mithilfe von body= aus. | mailto:<Adresse> mailto:<Adresse>[?<Header1>=<Wert1>[&<Header2>=<Wert2>]] | mailto:jsmith@example.com mailto:jsmith@example.com?subject=A%20Test&body=My%20idea%20is%3A%20%0A |
| tel | Telefonnummern | tel:<Telefonnummer> | tel:+18883774575 | |
| sms | SMS-Nachrichten | Bei der Verwendung des Schemas sms für Android- und iOS-Geräte gibt es kleine Formatierungsunterschiede. | Android: sms:<Telefonnummer>[?Aktionen] iOS: sms://<Telefonnummer>[&Aktionen] | sms:+11234567890?body=hello%20there sms:+11234567890,+11234567891?body=hello%20there sms://+11234567890&body=111222Hello%20There%20Hi! |
| ftp | FTP-Ressourcen | Verwenden Sie eine generische Syntax für FTP-Ressourcen. | ftp://xxx | ftp://user/example.com |
Sie können auch festlegen, wo der verknüpfte Inhalt geöffnet werden soll:
- App-Fenster: Der verknüpfte Inhalt wird im aktuellen Browserfenster, das Ihre App verwendet, geöffnet.
- Oberes Fenster: Der verknüpfte Inhalt reicht aus allen Rahmen, in denen er geschachtelt ist, heraus und wird in einem Fenster, das andere geöffnete Fenster überlagert, geöffnet.
- Neues Fenster: Der verknüpfte Inhalt wird in einem neuen Browserfenster geöffnet, während die App im ursprünglichen Fenster geöffnet bleibt.