UI Builder Zielseiten-Tutorial

  • Freigeben Version: Xanadu
  • Aktualisiert 1. August 2024
  • 6 Minuten Lesedauer
  • Erfahren Sie, wie Sie mit dem Legacy-Element UI Builder eine anwenderdefinierte Zielseite erstellen.

    Vorbereitungen

    Wichtig:
    Der auf dieser Seite beschriebene Generator dient zum Erstellen und Bearbeiten von Zielseiten in allen Arbeitsbereichen außer CSM. Informationen zum neuen UI Builder, mit dem Sie alle Seiten in CSM Workspace erstellen und bearbeiten können, finden Sie unter UI Builder.
    Diese Aufgabe bezieht sich auf die Legacy-Version UI Builder, mit der Sie nur eine Zielseite erstellen können. Verwenden Sie die neue Version von UI Builder, um einen konfigurierbaren Arbeitsbereich zu erstellen. Weitere Informationen finden Sie unter UI Builder.

    Erforderliche Rolle: admin, workspace_admin oder ui_builder_admin

    Warum und wann dieser Vorgang ausgeführt wird

    Bevor Sie Ihre Zielseite erstellen, sehen wir uns an, wie UI Builder funktioniert, indem wir eine vorhandene Zielseite erkunden.

    Prozedur

    1. Navigieren zu Alle > Arbeitsbereicherfahrung > Administration > Alle Arbeitsbereiche und klicken Sie auf einen Arbeitsbereich, um ihn zu öffnen.
    2. Wenn die sich öffnende Seite nicht bearbeitbar ist, klicken Sie auf den Link hier unter Um diesen Datensatz zu bearbeiten, klicken Sie hier, um die Seite bearbeitbar zu machen.
    3. Klicken Sie auf In UI Builder öffnen.
    4. Klicken Sie im Bereich Seitenverwaltung auf der Registerkarte Seiten auf die Zielseite „ Incident-Übersicht “.
      Diese Zielseite wird im Phasenbereich angezeigt. Beachten Sie die Felder Status und Anwendung über dem Konfigurationsbereich. Der Status „ Aktiv “ bedeutet, dass die Zielseite derzeit verwendet wird. Das Feld Anwendung zeigt, dass die Zielseite von ITSM Mitarbeiterbereichverwendet wird. Wenn Sie auf Folgendes geklickt haben:
      • deaktivieren, ändert sich der Status in „ Inaktiv “, und die Zielseite wird nicht mehr im Arbeitsbereich angezeigt.

        Die Schaltfläche „Deaktivieren “ wird durch die Schaltfläche „ Aktivieren “ ersetzt, mit der Sie die Zielseite im Arbeitsbereich veröffentlichen können.

        Normalerweise deaktivieren Sie Zielseiten, wenn Sie an ihnen arbeiten. Um beispielsweise die aktuelle Zielseite zu aktualisieren, können Sie:
        1. Klonen Sie Ihre aktuelle Zielseite.
        2. Im inaktiven Status daran arbeiten
        3. Aktivieren Sie die aktualisierte Version.
        4. Deaktivieren Sie die ursprüngliche Version.
      • Mit der Schaltfläche „Speichern “ werden alle an der Zielseite vorgenommenen Änderungen gespeichert. Wenn der Status :
        • Aktiv, die Änderungen werden sofort im Arbeitsbereich angezeigt.
        • Inaktiv, die Änderungen werden gespeichert, aber nicht veröffentlicht.
    5. Klicken Sie auf die Komponenten, und sehen Sie sich an, wie sich die Konfigurationsparameter im Konfigurationsbereich ändern.
    6. Klicken Sie auf Geschehen Jetzt.

      Der Container wird um die vier kleineren Komponenten herum sichtbar. „Jetzt geschieht“ ist die Bezeichnung des Containers. Suchen Sie im Konfigurationsbereich unter Bezeichnungnach. Mithilfe von Containern werden andere Komponenten gruppiert.

    7. Schieben Sie den Schieberegler Rahmen anzeigen nach rechts, während der Container noch hervorgehoben ist.

      Es wird ein Rahmen angezeigt, der den Container zeigt.

    8. Schieben Sie den Schieberegler Kann reduzieren nach rechts.

      Über dem Container wird ein Caret-Symbol ( Symbol zum Einklappen) angezeigt. Ein Service Desk-Mitarbeiter kann auf den Textcursor klicken, um den Container und alles darin enthaltene einzuklappen.

    9. Klicken Sie oben rechts im Konfigurationsbereich auf den Rechtspfeil (>), um den Bereich zu reduzieren.
    10. Klicken Sie im Bereich Phase auf den Container und dann auf das zugehörige Konfigurationssymbol ( Konfigurationssymbol).

      Popup-Fenster der Komponente

      Der Konfigurationsbereich wird erneut geöffnet.

      Sie sehen auch das Verschieben-Symbol ( Komponente greifen), mit dem Sie eine Komponente hin- und herziehen können. Tu das noch nicht.

      Der Schieberegler Reduziert im Konfigurationsbereich bedeutet, dass der Container zu Beginn reduziert und als Abwärtspfeil ( Symbol„Erweitern“ ) angezeigt wird, auf den Service Desk-Mitarbeiter klicken können, um den Container zu erweitern.

      Nachdem Sie nun gesehen haben, wie die verschiedenen Teile der Anwenderoberfläche verwendet werden, schauen wir uns an, wie Sie eine Zielseite erstellen.

    Tutorial zum Erstellen einer neuen Zielseite

    Erstellen Sie eine neue Zielseite.

    Prozedur

    1. Klicken Sie auf der Registerkarte Seiten auf das Pluszeichen (+), um eine neue Zielseite zu öffnen.

      Neue Seite erstellen

      Sie können auch eine neue Seite erstellen, indem Sie auf klicken Seitenaktionen > +Neue Seitean.

    2. Geben Sie im modalen Fenster OK. Hier finden Sie allgemeine Informationen für diese Seite. den Namen der Zielseite ein, und klicken Sie auf Zielseite erstellen.

      Dieser Titel wird allerdings nicht auf Ihrer Zielseite angezeigt, sondern über der Phase.

      Name der Zielseite

    Tutorial zum Hinzufügen und Konfigurieren von Komponenten

    Fügen Sie -Komponenten auf einer -Zielseite hinzu, und konfigurieren Sie sie.

    Prozedur

    1. Klicken Sie auf die Registerkarte +Komponente hinzufügen, und ziehen Sie eine Bildkomponente in den Bereich Phase.

      Im Konfigurationsbereich werden Parameter für das Bild angezeigt.

    2. Ziehen Sie eine Datenvisualisierungskomponente weit unter das Bild, und legen Sie sie ab.

      Die Komponente wird nicht im Phasenbereich angezeigt.

    3. Ziehen Sie eine Datenvisualisierungskomponente über die Bildkomponente, aber lassen Sie sie nicht ablegen.
      Verschieben Sie die Datenvisualisierungskomponente an den Rändern der Bildkomponente.

      Die Seite der Bildkomponente wird hervorgehoben, wenn Sie die Datenvisualisierungskomponente darüber bewegen. Komponenten ziehen

    4. Halten Sie die Datenvisualisierungskomponente über die linke Seite des Bildes, und lassen Sie sie ablegen.

      Die Datenvisualisierungskomponente wird links neben der Bildkomponente angezeigt.

    5. Klicken Sie auf das Verschieben-Symbol ( Komponentegreifen) über der Datenvisualisierungskomponente, ziehen Sie es über den unteren Rand der Bildkomponente und legen Sie es ab.

      Jetzt wissen Sie, wie Sie eine Komponente im Zielbereich verschieben. Die Datenvisualisierungskomponente ist leer. Füllen Sie es aus, damit es sichtbar ist.

    6. Geben Sie im Konfigurationsbereich im Feld Bericht den Wert incidentein.

      Eine Typeahead-Liste möglicher Einträge wird angezeigt.

    7. Klicken Sie in der Liste auf Incidents nach Priorität öffnen.
      Dieser Bericht wird in der Komponente geöffnet.
    8. Löschen Sie im Konfigurationsbereich Offene Incidents nach Priorität, und geben Sie im Feld PA-Widget den Wert incidentein.
      Eine Typeahead-Liste möglicher Einträge wird angezeigt. Diese Einträge sind Performance Analytics (PA)-Widgets.

      Sie können nur eine Datenvisualisierung in die Komponente einfügen. Sie können also entweder einen Bericht oder ein PA-Widget anzeigen, aber nicht beides. Wenn Sie Einträge für einen Bericht und ein PA-Widget eingeben, zeigt UI Builder nur den Bericht an.

      Sie wissen jetzt, wie Komponenten auf einer Zielseite hinzugefügt und angeordnet werden. Sehen wir uns nun an, wie sie gruppiert werden.

    Tutorial zum Gruppieren und Anordnen von Komponenten

    Gruppieren und ordnen Sie Komponenten auf einer Zielseite.

    Prozedur

    1. Klicken Sie auf Seitenaktionen, wählen Sie Seite löschen, und bestätigen Sie dann den Löschvorgang.
    2. Wählen Sie die Datenvisualisierungskomponente aus, klicken Sie auf das Papierkorbsymbol ( Papierkorbsymbol) und dann auf das Häkchensymbol zum Löschen ( Komponentelöschen ) über der Komponente, um sie zu entfernen.
      Sie haben jetzt Komponenten auf einer Zielseite gelöscht. Wenn Sie möchten, können Sie die Bildkomponente auch entfernen.
    3. Ziehen Sie eine Containerkomponente in den Bereich Phase.
    4. Geben Sie im Komponentenbereich einen Wert im Feld Bezeichnung für den Container ein, und schieben Sie den Schieberegler Rahmen anzeigen nach rechts, damit Sie den Container sehen können.
    5. Fügen Sie im Feld Bezeichnung einen Titel für den Container hinzu, z. B. Wichtige Listen.
    6. Ziehen Sie eine Listenkomponente in den Container.
    7. Geben Sie im Bereich Komponente im Feld Tabelle einen Wert für die Tabelle ein, aus der die Liste der Datensätze stammt, z. B. Incident.
    8. Ziehen Sie eine weitere Listenkomponente in den Container.

      Sie können die Liste innerhalb oder außerhalb des Containers ablegen. Legen Sie sie im Container ab.

      Liste zum Container hinzufügen

    9. Geben Sie im Komponentenbereich im Feld Tabelle einen Wert für eine andere Tabelle ein, aus der die Liste der Datensätze stammt, z. B. Aufgabe.

      Sie haben jetzt zwei Listenkomponenten in einer Containerkomponente, deren Bezeichnung die Listen beschreibt.

    10. Fügen Sie weiterhin Komponenten innerhalb oder außerhalb des Containers hinzu, und verwenden Sie das Verschieben-Symbol ( Komponente greifen), um die Komponenten hin und her zu ziehen, damit Sie sich an das Hinzufügen, Löschen, Verschieben und Gruppieren von Komponenten geleiten können.
    11. Klicken Sie auf Speichern.

      Wenn Sie eine echte Zielseite erstellen würden, klicken Sie auch auf Aktivieren. Da Sie in diesem Lernprogramm keine richtige Zielseite erstellen, löschen wir diese Übungszielseite.

    Zielseite löschen – Tutorial

    Löschen Sie eine Zielseite.

    Prozedur

    1. Markieren Sie auf der Registerkarte Seiten Ihre Zielseite.
    2. Klicken Sie unter Seitenaktionen auf Seite löschen.

    Nächste Maßnahme

    Sie haben jetzt eine Vorstellung von der Verwendung von UI Builder. Sie sind bereit, Ihre erste Zielseite zu erstellen.