--- sourceDocument: Yokohama Erstellen oder ändern Sie Anwendungen sourceDocumentLink: https://servicenow-prod.fluidtopics.net/r/de-DE/yokohama/application-development Release : - yokohama ft:locale : - de-DE ft:publication_title : - Yokohama Erstellen oder ändern Sie Anwendungen ft:clusterId : - cadev bundleId : - cadev workflow : - Creator --- Responsive Authoring ==================== Responsive Authoring {#ariaid-title1} ===================================== * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 Minuten Lesedauer Verwenden Sie reaktionsfähiges Authoring, um UI Builder -Seiten zu erstellen, die sich reibungslos an verschiedene Formfaktoren (Größen) wie Desktop, Tablet und Mobilgerät anpassen lassen. Responsive Authoring in UI Builder {#responsive-authoring__section_mfl_5jp_qbc} ------------------------------------------------------------------------------- Responsive Authoring ermöglicht Ihnen das Erstellen von Seiten, die bei jedem Formfaktor gut aussehen und ordnungsgemäß funktionieren, sodass Anwender leichter mit dem Inhalt interagieren können. Beispielsweise kann eine Seite, die bei der Anzeige auf einem Laptop drei Spalten enthält, für kleinere Bildschirme zu einer einzelnen Spalte angepasst werden. UI Builder bietet derzeit drei Standardformfaktoren an: * Desktop (1281 Pixel bis unendlich) * Tablet (1280 Pixel und kleiner) * Mobil (500 Pixel bis null) {#responsive-authoring__ul_qsx_xwp_qbc} Zusätzlich zu diesen Formfaktoren können Sie bis zu drei zusätzliche anwenderdefinierte Haltepunkte (Breiten) erstellen. Weitere Informationen finden Sie unter [Erstellen Sie einen Haltepunkt für die reaktionsfähige Dokumenterstellung](https://servicenow-prod.fluidtopics.net/s5Mg~vHeHbTVjWXX5B0~1w "Erfahren Sie, wie Sie anwenderdefinierte Haltepunkte für Responsive Authoring erstellen, um das Erscheinungsbild einer Seite bei verschiedenen Formfaktoren zu steuern."). Es gibt verschiedene Techniken zum Bearbeiten von Seiten, sodass sie bei verschiedenen Formfaktoren verwendet werden können. Verwenden Sie eine der folgenden Optionen: * [Komponenten ein- oder ausblenden](https://servicenow-prod.fluidtopics.net/pQ9zI7tOkpFps7IQPe1oWA "Erfahren Sie beim Erstellen von Seiten mit Responsive Authoring für verschiedene Formfaktoren, wie Sie Komponenten ein- oder ausblenden, indem Sie die Schritte zum Ausblenden eines Bildes in der Mobile-Größe ausführen.") * [Ändern Sie die Komponentenkonfiguration](https://servicenow-prod.fluidtopics.net/e_3dxGN4biBm~4jW9gpSlw "Wenn Sie Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren erstellen, erfahren Sie, wie Sie durch die Anpassung einiger Komponentenkonfigurationsoptionen das Aussehen und die Funktion von Seiten bei kleineren Größen verbessern können.") * [Bearbeiten Sie Stile](https://servicenow-prod.fluidtopics.net/5CIzs_ORMAN7Pk1Ci3uGiA "Erfahren Sie beim Erstellen von Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren, wie Sie Stiloptionen ändern, um die Nutzbarkeit der Seite bei kleineren Größen zu verbessern.") * [Ordnen Sie das Layout neu an](https://servicenow-prod.fluidtopics.net/n25nq5uI~9n2sqp2FrILZw "Erfahren Sie, wie Sie beim Erstellen von Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren das Layout anpassen können, um das Erscheinungsbild der Seite bei kleineren Größen zu verbessern.") {#responsive-authoring__ul_yn3_5qb_1cc} Responsive Authoring und Reflow {#responsive-authoring__section_yw3_xrs_rbc} ---------------------------------------------------------------------------- Ab Xanadu Store-Release 1 ist Responsive Authoring nur verfügbar, wenn UI Builder -Seiten von Grund auf neu erstellt werden. Responsive Authoring ist für vorhandene Seiten oder Seiten, die mit einer Vorlage erstellt wurden, nicht verfügbar. Diese Seitentypen verwenden weiterhin das vorhandene, standardmäßige Reflow-Modell, um die Seiten für verschiedene Bildschirmbreiten anzupassen. Reflow wandelt Seitenlayouts automatisch ohne Verlust von Inhalt oder Funktionalität in eine vertikale, gestapelte Ansicht um, wenn Anwender den Browserzoom auf 400 % erhöhen. Diese Anpassung hilft Anwendern mit eingeschränktem Sehen oder Anwendern, die aufgrund von Monitorgröße, Gerätetyp, schlechter Beleuchtung oder anderen Situationen Probleme beim Anzeigen von Webinhalten in einem Browser haben. Alle vorhandenen Seiten, die mit Vorlagen oder von Grund auf neu erstellt wurden, verwenden den automatischen Umbruch. Wenn Sie jetzt in UI BuilderSeiten von Grund auf neu erstellen, zeigt Ihnen ein zusätzlicher Schritt, dass Responsive Authoring standardmäßig ausgewählt ist. Sie können stattdessen Reflow verwenden, indem Sie Ohne Reaktion erstellenauswählen. Mit der Option für die reaktionsfähige Erstellung haben Sie jedoch mehr Kontrolle über die Funktionsweise von Seiten und das Aussehen verschiedener Formfaktoren. Weitere Informationen zum Erstellen von Seiten in UI Builderfinden Sie unter [Seite in UI Builder erstellen](https://servicenow-prod.fluidtopics.net/tyY0expe_RF~OkSQQVAzZA "Erstellen Sie in UI Builder eine Seite für ein Portal, einen Arbeitsbereich oder eine anwenderdefinierte Anwendung, um eine Web-Experience für Ihre Benutzer zu erstellen."). Weitere Informationen zum Umbruch finden Sie unter [Reflow for Configurable Workspace](https://www.servicenow.com/docs/access?context=auto-reflow&version=yokohama&pubname=yokohama-platform-user-interface&ft:locale=en-US). Eine Liste der UI Builder -Komponenten, die den Umbruch unterstützen, finden Sie im Abschnitt Unterstützung für Umbruch in den [Versionshinweisen zu Next Experience-Komponenten](https://servicenow.com/docs/bundle/washingtondc-release-notes/page/release-notes/now-platform-app-engine/component-rn.html). Anwendung und Kaskadierung von Changes {#responsive-authoring__section_j1j_wrs_rbc} ----------------------------------------------------------------------------------- Alle an einem Formfaktor vorgenommenen Änderungen werden automatisch auf alle kleineren Formfaktoren angewendet. Beispiel: Alle am Tablet vorgenommenen Änderungen gelten sowohl für das Tablet als auch für das Mobilgerät. Wenn Sie dann jedoch Änderungen am mobilen Formfaktor vornehmen, überschreibt dies die kaskadierenden Einstellungen des Tablet-Formfaktors. Mit dieser kaskadierenden Funktionalität können Sie für jeden kleineren Formfaktor bestimmte Änderungen vornehmen, damit die Seite gut aussieht und funktioniert. Hinweis: Änderungen kaskadieren nicht bis zu größeren Größen. Beispielsweise werden an einem Tablet vorgenommene Änderungen nicht auf den Desktop angewendet. Responsive Authoring und Controller {#responsive-authoring__section_uj2_hmp_lcc} -------------------------------------------------------------------------------- Wenn Sie einer Seite einen Controller hinzufügen, sind die Controller-Eigenschaften global und können nicht pro Formfaktor festgelegt werden. Weitere Informationen zu Controllern finden Sie unter [Daten mithilfe von Controllern an Seiten UI Builder binden (erweiterte Funktion)](https://servicenow-prod.fluidtopics.net/ZUrgQhS6trKSm32SOXgDaA#controllers "Controller vereinfachen die Verknüpfung von Daten und Ereignislogik, um Komponentenvoreinstellungen in UI Builderzu aktivieren."). Responsive Authoring beim Erstellen von Seiten verwenden {#responsive-authoring__section_bls_vjp_qbc} ----------------------------------------------------------------------------------------------------- Erstellen Sie beim Erstellen von Seiten maßgeschneiderte Designs, um das Erscheinungsbild für verschiedene Formfaktoren zu steuern. Standardmäßig erstellen Sie in der Phase Seiten für den Desktop (1281 Pixel bis unendlich). Sie können jederzeit ein anderes Symbol auswählen, um die Seite in der Phase mit einem anderen Formfaktor anzuzeigen, z. B. als Tablet oder Mobilgerät. Bearbeiten Sie die Seite bei Bedarf so, dass sie dem neuen Formfaktor entsprechend angezeigt wird. So sieht eine Beispielseite im Desktop-Formfaktor aus. Hier ist dieselbe Seite, die für den Tablet-Formfaktor angepasst wurde. Beim Tablet wurden die Überschriften- und Bildkomponenten verkleinert. Die Konfiguration der einfachen Listenkomponente wurde so bearbeitet, dass vier Spalten anstelle von sechs angezeigt werden, und die maximale Anzahl von Zeilen wurde auf 5 festgelegt. Beim Bearbeiten einer Komponente für einen Formfaktor werden die Felder, die sich geändert haben, mit einem kaskadierenden Symbol für diesen Formfaktor markiert ( in diesem Fall Tablet). Über das Symbol können Sie die Unterschiede zwischen den Formfaktoren für eine bestimmte Seite einfach bestimmen. Hier ist dieselbe Seite, die für den mobilen Formfaktor angepasst wurde. Die Anzahl der Wörter in der Überschrift wurde reduziert, und die Bildkomponente wurde ausgeblendet. Die Konfiguration der einfachen Listenkomponente wurde so bearbeitet, dass zwei statt vier Spalten angezeigt werden, und die Option zum Ausblenden der Fußzeilenoption „Alle anzeigen" wurde ausgewählt. Neben den beiden speziell für Mobilgeräte angepassten Feldern ist ein kaskadierendes Symbol für Mobilgeräte zu sehen. Das Feld Maximale Zeilen behält weiterhin das kaskadierende Tablet-Symbol bei, da dieses Feld die Tablet-Einstellung erbt und nicht für Mobilgeräte angepasst wurde. Zusätzlich zu den Standardformfaktoren in der Editoransicht können Sie jederzeit manuell eine Zahl in das Pixelfeld eingeben. Die Phase wird je nach Bereich an den nächstgelegenen Formfaktor angepasst. Wenn Sie beispielsweise 850 Pixel eingeben, wird die Phase an den Formfaktor des Tablets angepasst, da der Bereich zwischen 1280 und 501 Pixel definiert ist. ![Schwarze Pfeile, die auf das Symbol für den Tablet-Formfaktor und das Pixelfeld zeigen.]() Hinweis: Formfaktoren und die Möglichkeit zur Eingabe einer Pixelbreite sind auch bei der Vorschau einer Seite verfügbar. Weitere Informationen finden Sie unter [Erfahren Sie, wie Sie Ihre UI Builder -Experience anzeigen und testen können](https://servicenow-prod.fluidtopics.net/aypMGPLCpYBWMHGQ563u0w "Zeigen Sie eine Vorschau Ihrer Experience in UI Builder an, um zu sehen, wie sie aussieht und funktioniert, während Sie eine Experience erstellen. Mithilfe einer Vorschau können Sie sicherstellen, dass Ihre Experience wie erwartet funktioniert, dass die Datenressourcen verfügbar sind und dass die Layouts ordnungsgemäß eingerichtet sind."). * **[Anpassung der Transparenz von Komponenten beim reaktionsfähigen Authoring](https://servicenow-prod.fluidtopics.net/pQ9zI7tOkpFps7IQPe1oWA)** Erfahren Sie beim Erstellen von Seiten mit Responsive Authoring für verschiedene Formfaktoren, wie Sie Komponenten ein- oder ausblenden, indem Sie die Schritte zum Ausblenden eines Bildes in der Mobile-Größe ausführen. * **[Konfigurieren von Komponenten für Responsive Authoring](https://servicenow-prod.fluidtopics.net/e_3dxGN4biBm~4jW9gpSlw)** Wenn Sie Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren erstellen, erfahren Sie, wie Sie durch die Anpassung einiger Komponentenkonfigurationsoptionen das Aussehen und die Funktion von Seiten bei kleineren Größen verbessern können. * **[Passen Sie Stile für Responsive Authoring an](https://servicenow-prod.fluidtopics.net/5CIzs_ORMAN7Pk1Ci3uGiA)** Erfahren Sie beim Erstellen von Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren, wie Sie Stiloptionen ändern, um die Nutzbarkeit der Seite bei kleineren Größen zu verbessern. * **[Passen Sie das Layout für Responsive Authoring an](https://servicenow-prod.fluidtopics.net/n25nq5uI~9n2sqp2FrILZw)** Erfahren Sie, wie Sie beim Erstellen von Seiten mit reaktionsfähiger Dokumenterstellung für verschiedene Formfaktoren das Layout anpassen können, um das Erscheinungsbild der Seite bei kleineren Größen zu verbessern. * **[Erstellen Sie einen Haltepunkt für die reaktionsfähige Dokumenterstellung](https://servicenow-prod.fluidtopics.net/s5Mg~vHeHbTVjWXX5B0~1w)** Erfahren Sie, wie Sie anwenderdefinierte Haltepunkte für Responsive Authoring erstellen, um das Erscheinungsbild einer Seite bei verschiedenen Formfaktoren zu steuern.