UI Builder Zielseiten-Tutorial

Erfahren Sie, wie Sie mit dem veralteten UI Builder eine benutzerdefinierte 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 gehört zur veralteten 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 untersuchen.

Prozedur

1. Navigieren zu Alle > Arbeitsbereicherfahrung > Administration > Alle Arbeitsbereiche und klicken Sie auf einen Arbeitsbereich, um ihn zu öffnen.
2. Wenn die Seite, die geöffnet wird, nicht bearbeitbar ist, klicken Sie auf den Link hier in Zum Bearbeiten dieses Datensatzes klicken Sie hier, um die Seite bearbeitbar zu machen.
3. Klicken Sie auf In UI Builder öffnen.
4. Klicken Sie im Seitenverwaltungsbereich auf der Registerkarte Seiten auf die Zielseite „ Incident-Übersicht “.
   Diese Zielseite wird im Bereich „Phase“ 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 an, dass die Zielseite von ITSM Mitarbeiterbereichverwendet wird. Wenn Sie auf Folgendes geklickt haben:

   • Wenn Sie 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 sie bearbeiten. Um beispielsweise die aktuelle Zielseite zu aktualisieren, können Sie:

     1. Klonen Sie Ihre aktuelle Zielseite.
     2. Arbeiten Sie im inaktiven Status daran.
     3. Machen Sie die aktualisierte Version auf Aktiv.
     4. Machen Sie die ursprüngliche Version inaktiv.
   • Schaltfläche „Speichern “, speichern Sie alle Änderungen, die Sie an der Zielseite vorgenommen haben. 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, wie sich die Konfigurationsparameter im Konfigurationsbereich ändern.
6. Klicken Sie auf „Happening Now“(Aktuelles Geschehen).

   Der Container wird um die vier kleineren Komponenten sichtbar. „Happening Now “ ist die Bezeichnung des Containers. Suchen Sie im Konfigurationsbereich unter Bezeichnung. Mit Containern gruppieren Sie andere Komponenten.

7. Schieben Sie bei hervorgehobenem Container den Schieberegler Rahmen anzeigen nach rechts.

   Ein Rahmen wird angezeigt, der den Container anzeigt.

8. Schieben Sie den Schieberegler Kann reduzieren nach rechts.

   Über dem Container wird ein (Reduzierungssymbol) angezeigt. Ein Service Desk-Mitarbeiter kann auf die Einfügemarke klicken, um den Container und alles darin enthaltene zu reduzieren.

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 Konfigurationssymbol ( ).

    

    Der Konfigurationsbereich wird erneut geöffnet.

    Sie sehen auch das Verschiebungssymbol ( ), mit dem Sie eine Komponente verschieben können. Tun Sie das noch nicht.

    Der Schieberegler Reduziert im Konfigurationsbereich bedeutet, dass der Container reduziert beginnt und als Abwärtspfeil (Erweitern- ) angezeigt wird, auf den ein Service Desk-Mitarbeiter klicken kann, um den Container zu erweitern.

    Nachdem Sie nun gesehen haben, wie Sie die verschiedenen Teile der Benutzeroberfläche verwenden, sehen 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.

   

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

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.

   

Tutorial zum Hinzufügen und Konfigurieren von Komponenten

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

Prozedur

1. Wechseln Sie zur Registerkarte +Komponente hinzufügen, und ziehen Sie eine Bildkomponente in den Bereich „Phase“.

   Parameter für das Image werden im Konfigurationsbereich angezeigt.

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

   Die Komponente wird nicht im Bereich „Phase“ angezeigt.

3. Ziehen Sie eine Datenvisualisierungskomponente über die Bildkomponente, aber legen Sie sie nicht ab, und verschieben Sie dann die Datenvisualisierungskomponente an den Rändern der Bildkomponente.

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

4. Halten Sie die Datenvisualisierungskomponente über die linke Seite des Bildes, und legen Sie sie ab.

   Die Datenvisualisierungskomponente wird links von der Bildkomponente angezeigt.

5. Wählen Sie das Verschieben-Symbol ( erfassen) über der Datenvisualisierungskomponente aus, 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 wir es aus, damit es sichtbar ist.

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

   Eine Typeahead-Liste mit möglichen Einträgen wird angezeigt.

7. Wählen Sie in der Liste Offene Incidents nach Priorität aus.
   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-Widgetincidentein.
   Eine Typeahead-Liste mit möglichen Einträgen 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 Sie Komponenten auf einer Zielseite hinzufügen und anordnen. Sehen wir uns nun an, wie Sie sie gruppieren.

Tutorial zum Gruppieren und Anordnen von Komponenten

Gruppieren und ordnen Sie Komponenten auf einer Zielseite an.

Prozedur

1. Klicken Sie auf Seitenaktionen, wählen Sie Seite löschenaus, und bestätigen Sie dann den Löschvorgang.
2. Wählen Sie die Datenvisualisierungskomponente aus, klicken Sie auf das Papierkorbsymbol ( ) und dann auf das Häkchensymbol zum Löschen ( löschen) über der Komponente, um sie zu entfernen.
   Sie haben jetzt Komponenten auf einer Zielseite gelöscht. Wenn Sie möchten, können Sie auch die Bildkomponente entfernen.
3. Ziehen Sie eine Containerkomponente in den Bereich „Phase“.
4. Geben Sie im Komponentenbereich einen Wert in das 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 dem Container im Feld Bezeichnung einen Titel hinzu, z. B. „Wichtige Listen“.
6. Ziehen Sie eine Listenkomponente in den Container.
7. Geben Sie im Komponentenbereich 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.

   

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 ziehen Sie die Komponenten mithilfe des Verschieben-Symbols ( ), um sich mit dem Hinzufügen, Löschen, Verschieben und Gruppieren von Komponenten vertraut zu machen.
11. Klicken Sie auf Speichern.

    Wenn Sie eine echte Zielseite erstellen, klicken Sie auch auf Aktivieren. Da Sie in diesem Tutorial keine echte 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.