--- 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 --- Anpassung der Transparenz von Komponenten beim reaktionsfähigen Authoring ========================================================================= Anpassung der Transparenz von Komponenten beim reaktionsfähigen Authoring {#ariaid-title1} ========================================================================================== * Freigeben Version: Yokohama * * Aktualisiert 30. Januar 2025 * * ![](https://www.servicenow.com/docs/portal-asset/ico-clock) 4 Minuten Lesedauer 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. Vorbereitungen -------------- Erforderliche Rolle: ui_builder_admin Warum und wann dieser Vorgang ausgeführt wird --------------------------------------------- Eine Methode zur Verbesserung der Anwenderfreundlichkeit einer Seite besteht darin, Komponenten auszublenden oder eine andere Komponente über Haltepunkte hinweg anzuzeigen. Es gibt zahllose Möglichkeiten, die Transparenz von Komponenten zu nutzen. Einige Beispiele sind: * Verwenden Sie mehrere Schaltflächenkomponenten horizontal am oberen Rand einer Seite für die Desktop- und Tablet-Größe. Bei der mobilen Größe blenden Sie die Schaltflächen aus und zeigen die Dropdown-Komponente an. * Verwenden Sie eine kleinere Schaltflächengröße für die Mobile-Größe, aber überprüfen Sie, ob die Schaltflächen groß genug sind, damit Anwender sie mit dem Daumen drücken können. Erwägen Sie, die Platzierung der Schaltflächen auch für Mobilgeräte zu ändern. * Verwenden Sie Bilder auf Desktop- und Tablet-Seiten, blenden Sie jedoch Bilder, insbesondere größere, auf Mobilgeräten aus. {#responsive-authoring-component-visibility__ul_ild_2lw_sbc} In diesem Verfahren werden für die Formfaktoren Desktop und Tablet Schaltflächen im oberen Bereich angezeigt, für Mobilgeräte jedoch die Schaltflächen ausgeblendet und die Dropdown-Komponente verwendet. Prozedur -------- 1. Navigieren zu AlleNow-Experience-FrameworkUI Builder. 2. Öffnen Sie eine Experience, um darin zu arbeiten, oder erstellen Sie eine Experience, indem Sie Erstellen \> Experiencewählen. Weitere Informationen zum Erstellen von Experiences finden Sie unter [Konfigurieren Sie, wie Benutzer in mit Ihren Anwendungen interagieren UI Builder](https://servicenow-prod.fluidtopics.net/CeZNVGqy8eTZVd2gZsb4ng "Erfahren Sie, was eine Experience in UI Builderist. Verstehen, was eine Experience enthält."). 3. Erstellen Sie eine Seite von Grund auf neu mit reaktionsfähiger Dokumenterstellung. Weitere Informationen zum Erstellen einer Seite finden 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."). 4. Überprüfen Sie oben, ob das Symbol für den Desktop-Formfaktor ausgewählt ist. ![Schwarzer Pfeil, der auf das Symbol für den Desktop-Formfaktor zeigt, oben auf einer UI Builder-Seite in der Editor-Ansicht.]() 5. Fügen Sie ein Spaltenlayout hinzu, indem Sie in der Inhaltsstruktur unter Textkörperdie Option + Inhalt hinzufügen auswählen. 6. Wählen Sie auf der Registerkarte Layouts die Option Einzelne Spalteaus. 7. Fügen Sie die erste Schaltflächenkomponente hinzu. 1. Wählen Sie in der Mitte der neuen Spalte in der Phase das Symbol + aus. 2. Suchen Sie auf der Registerkarte Komponenten nach der Komponente Schaltfläche, und wählen Sie sie aus. 3. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus. 4. Ersetzen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Standardtext im Feld Bezeichnung, indem Sie Aufgabeneingeben. 5. Wählen Sie Speichern. {#responsive-authoring-component-visibility__substeps_z3n_1cn_5bc} 8. Fügen Sie zwei weitere Schaltflächen hinzu, indem Sie Schritt 7 zweimal wiederholen. Benennen Sie die Schaltflächen in 7 Tagen mit Incidents und Changes. Hinweis: Um die Schaltflächen hinzuzufügen, zeigen Sie in der Inhaltsstruktur auf Schaltfläche 1, wählen Sie das Menüsymbol und dann Hinzufügen nach aus. 9. Überprüfen Sie, ob die Inhaltsstruktur und die Seite korrekt sind. 10. Fügen Sie etwas Platz um jede Schaltfläche hinzu. 1. Wählen Sie in der Inhaltsstruktur Schaltfläche 1aus. 2. Wählen Sie im Konfigurationsbereich die Registerkarte Stile. 3. Wählen Sie unter Abstanddie Option Randaus. 4. Wählen Sie im Menü XS (extra klein) aus. 5. Wählen Sie Speichern. {#responsive-authoring-component-visibility__substeps_ivk_plp_vbc} 11. Fügen Sie Platz um die anderen beiden Schaltflächen hinzu, indem Sie Schritt 10 für jede wiederholen. 12. Ändern Sie die Schaltflächen von der vertikalen Richtung in die horizontale Richtung. 1. Wählen Sie in der Inhaltsstruktur Spalte 1 aus. 2. Wählen Sie im Konfigurationsbereich unter Richtungdas Zeilensymbol aus. 3. Wählen Sie Speichern. {#responsive-authoring-component-visibility__substeps_ydm_qpc_1cc} Die Seite sieht in Desktopbreite gut aus. 13. Wählen Sie das Symbol für den Tablet-Formfaktor. ![Schwarzer Pfeil, der auf das Symbol für den Tablet-Formfaktor zeigt, oben auf einer UI Builder-Seite in der Editor-Ansicht.]() Der Abstand und die Position der Schaltflächen sehen auch bei der Tablet-Breite gut aus. 14. Wählen Sie das Symbol für Responsive Authoring auf Mobilgeräten. ![Schwarzer Pfeil, der auf das Symbol für den mobilen Formfaktor oben auf einer UI Builder-Seite in der Editor-Ansicht zeigt.]() Die Schaltflächen belegen bei geringerer Größe fast den gesamten horizontalen Platz. 15. Fügen Sie die Dropdown-Komponente hinzu. 1. Wählen Sie oben in der Phase den Desktop-Formfaktor aus. 2. Zeigen Sie in der Inhaltsstruktur auf Schaltfläche 3, wählen Sie das Menüsymbol und dann Hinzufügen nach aus. 3. Suchen Sie auf der Registerkarte Komponenten nach der Komponente Dropdown, und wählen Sie sie aus. 4. Wählen Sie im Konfigurationsbereich Keines - Komponente manuell konfigurieren aus. 5. Entfernen Sie im Konfigurationsbereich auf der Registerkarte Konfigurieren den Standardtext in Platzhaltertext, und wählen Sie Menügliederung in Symbolaus. 6. Wählen Sie Speichern. {#responsive-authoring-component-visibility__substeps_hry_ksc_1cc} 16. Blenden Sie die Dropdown-Komponente bei den Formfaktoren Desktop und Tablet aus. 1. Wählen Sie in der Inhaltsstruktur Dropdown 1aus. 2. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurierendie Option Komponentensichtbarkeit aus, um die Optionen anzuzeigen. 3. Wählen Sie Komponente ausblendenaus. 4. Wählen Sie Speichern. {#responsive-authoring-component-visibility__substeps_izs_gxc_1cc} 17. Blenden Sie beim mobilen Formfaktor die Schaltflächenkomponenten aus. 1. Wählen Sie das Symbol „Formfaktor für mobile Geräte" oben in der Phase aus. 2. Wählen Sie in der Inhaltsstruktur Schaltfläche 1aus. 3. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurierendie Option Komponente ausblendenaus. 4. Wiederholen Sie die Schritte bc für Schaltfläche 2 und Schaltfläche 3. 5. Wählen Sie Speichern. {#responsive-authoring-component-visibility__substeps_ddn_ztv_sbc} Zwei Positionen zeigen, dass die Schaltflächenkomponenten in mobiler Größe ausgeblendet sind. Wählen Sie zuerst im Konfigurationsbereich neben der Option Komponente ausblenden das Mobilsymbol aus. Es wird eine Meldung angezeigt, um zu bestätigen, dass der Wert (Ausgewählte Komponente ausblenden) für die Größe des Mobilgeräts gilt. Zweitens werden in der Inhaltsstruktur die drei Schaltflächenkomponenten mit dem ausgeblendeten Symbol ![Ausgeblendetes]() Symbol angezeigt. 18. Zeigen Sie beim mobilen Formfaktor die Dropdown-Komponente an. 1. Wählen Sie in der Inhaltsstruktur Dropdown 1aus. 2. Wählen Sie im Konfigurationsbereich auf der Registerkarte Konfigurierendie Option Komponente ausblenden aus, um das Feld zu löschen. 3. Wählen Sie Speichern. {#responsive-authoring-component-visibility__substeps_wf2_25q_1cc} 19. Wählen Sie Vorschau. Der mobile Formfaktor wird mit dem Menüsymbol angezeigt. Wenn Sie den Pfeil auswählen, werden die Standardoptionen angezeigt (Listenelement 1, Listenelement 2 usw.). Konfigurieren Sie die Dropdown-Komponente so, dass Aufgaben, Incidentsund Changes genau wie die horizontalen Schaltflächen angezeigt werden, die bei den Tablet- und Desktop-Formfaktoren verfügbar sind. 20. Wählen Sie oben die Symbole für den Desktop- und Tablet-Formfaktor. Bei den Formfaktoren Desktop und Tablet werden nur die horizontalen Schaltflächen angezeigt, nicht das Menüsymbol. 21. Schließen Sie die Vorschaueinblendung, indem Sie Xwählen.