Seiten mithilfe des Serviceportal Designers erstellen und bearbeiten.

Erstellen oder bearbeiten Sie eine Seite und verwenden Sie Layouts für die Anordnung der Spalten, in denen sich die Widgets befinden.

Vorbereitungen

Erforderliche Rolle: sp_admin oder admin

Warum und wann dieser Vorgang ausgeführt wird

Diese Schritte sind für Benutzer gedacht, die wenig oder keine Erfahrung mit dem Schreiben von Code haben. Der Serviceportal Designer bietet verschiedene Anpassungsstufen − angefangen von bestimmten Konfigurationen, zu denen Sie einfach Widgets hinzufügen können bis hin zur Möglichkeit, CSS-Klassen zu definieren.

Prozedur

1. Navigieren zu Alle > Service Portal > Serviceportal-Konfigurationan.
2. Wählen Sie Designer aus.
3. Rufen Sie das Portal auf, für das Sie Seiten entwerfen möchten, indem Sie den Namen des Portals in der Kopfzeile auswählen.
   
4. Von Serviceportal Designer: Wählen Sie eine Seite aus, die Sie anpassen oder auswählen möchten Fügen Sie eine neue Seite hinzu .
5. Klicken Sie im Abschnitt Layouts auf Container und ziehen Sie dies auf die Seite.
6. Ziehen Sie ein anderes Layout auf einen Container und legen Sie es dort ab.
   Das Layout definiert die Struktur der Seite und den verfügbaren Platz für Widgets. Die Layoutstruktur richtet sich an der Bootstrap-Gittervorlage aus und beträgt immer 12.
7. Suchen Sie mit dem Filter nach einem Widget und ziehen Sie es anschließend in das Layout.

   Abbildung : 1. Ziehen Sie Container, Layouts und dann Widgets auf eine Seite

   

   Für Widgets, die standardmäßig keine Informationen enthalten, müssen Sie die Optionen für ihre Widget-Instanzen konfigurieren, bevor sie auf einer Portalseite angezeigt werden. Weitere Informationen zum Konfigurieren von Widget-Instanzoptionen finden Sie unter Konfigurieren Sie Widget-Instanzen.

8. Wahlweise: Seiteneigenschaften bearbeiten.
   1. Wählen Sie Aus Bearbeiten Sie Seiteneigenschaften .
      Der Seitendatensatz aus der Seitentabelle [sp_page] wird geöffnet.
   2. Füllen Sie das Formular aus.

      Tabelle : 1. Seitenfelder

      Feld	Beschreibung
      Titel	Interner Name der Seite Anhand des Titels kann der Service Portal Designer nach einer Seite durchsucht werden.
      ID	Eine eindeutige ID für die Seite. Eine Seite wird anhand der ID einem Portal zugewiesen. Sie legt auch die URL für die Seite fest, z. B.: https://<Instanzname>.service-now.com/doc_portal/?id=doc_page. Bei „doc_page“ handelt es sich um die Seiten-ID.
      Anwendung	Anwendungsbereich
      Öffentlich	Ermöglicht den Zugriff auf die Seite, ohne dass eine Authentifizierung erforderlich ist. Wird Öffentlich ausgewählt, können alle Benutzer unabhängig der aufgeführten Rollen die Seite anzeigen.
      Entwurf	Markieren Sie eine Seite als Entwurf, um die Möglichkeit des Anwenders zu beschränken, die Seite während der Erstellung anzuzeigen. Nur Benutzer mit der Administratorrolle können eine Seite im Entwurf anzeigen, alle anderen Benutzer sehen eine 404-Seite.
      Rollen	Der Zugriff auf eine Seite lässt sich durch Benutzerrollen beschränken.
      Kurzbeschreibung	Beschreibung der Portalseite. Dieses Feld ist nicht öffentlich zugänglich.
      Seitenspezifisches CSS	Hat eine Seite kein seitenspezifisches CSS, übernimmt die Seite das CSS vom Thema und dem Branding. Wenn Sie das Aussehen einer Seite verändern möchten, kann das von Thema und Branding geerbte CSS mit einem seitenspezifischen CSS überschrieben werden.
      Dynamischer Seitentitel	Erstellen Sie Variablen, um Titel zu generieren, die den Inhalt beschreiben, der in eine Seite geladen wird. Weitere Informationen finden Sie unter Dynamische Titel zu einer Seite hinzufügen.
      Seite klonen	Erstellt Kopien einer Seite, die verändert werden können. Wenn Sie eine Basissystemseite klonen, wird für jedes Widget auf der Seite eine neue Widget-Instanz erstellt.
      SEO-Skript verwenden	Option zum Aktivieren einer Skripteinbindung, die SEO-Tags für kanonische URLs und hreflang-Tags hinzufügt. Weitere Informationen finden Sie unter Aktivieren Sie SEO für lokalisierte Versionen einer Portalseite.
      SEO-Skript	Skripteinbindung, die auf die Seite angewendet werden soll. Standardmäßig verwendet das System die Skripteinbindung SPSEOHeaderTags, die die Standardimplementierung für die kanonische URL und die hreflang-Tags für enthält Serviceportal Analytics Seiten.
      Visuell lesbare URL-Struktur	Fügen Sie der Seiten-URL visuell lesbare Stichwörter hinzu, um die Suchmaschinenoptimierung (SEO) und die Klickraten für öffentliche Seiten zu verbessern. Visuell lesbare URLs helfen Anwendern auch zu verstehen, was sie auf einer Seite für öffentliche und nicht öffentliche Seiten erwarten. Beispiel: https://<instance>/kb/de/faq/what-is-a-Cookie?ID=kb_article_View&sysparm_article=KB0000007 . Weitere Informationen finden Sie unter Fügen Sie visuell lesbare Stichwörter zu Seiten-URLs hinzu.

9. Wahlweise: Containereigenschaften bearbeiten.
   1. Wählen Sie innerhalb des Containers aus, den Sie bearbeiten möchten, oder wählen Sie aus Container In den Breadcrumbs.
   2. Wählen Sie das Bearbeitungssymbol [ ].
      Der Containerdatensatz aus der Containertabelle [sp_container] wird geöffnet.
   3. Füllen Sie das Formular aus.

      Tabelle : 2. Containerfelder

      Feld	Beschreibung
      Name	Interner Name des Containers.
      Reihenfolge	Die Reihenfolge, in der die Container auf einer Seite angezeigt werden. Damit ein Container über allen anderen Containern angezeigt wird, geben Sie ihm die niedrigste Nummer im Feld Reihenfolge.
      Seite	Die Seite, die den Container enthält.
      Screenreader-Titel	Der Titel, der von der Sprachausgabe verwendet wird.
      Semantisches Tag	Das semantische HTML-Tag, das den Container enthält. Verfügbare Optionen: Keine: Der gesamte Inhalt auf der Seite zwischen Kopf- und Fußzeile ist in enthalten <main>Tag. Haupt: Der <main>Tag enthält nur den Container und seinen Inhalt. Die <main>Tag ist ein semantisches HTML-Element, das den Hauptinhalt der Seite enthält. Sie sollte auf Inhalte angewendet werden, die für die Seite eindeutig sind und nur für ein Element auf der Seite konfiguriert werden. Hinweis: Die <main>Tag kann auf einen Container, eine Zeile oder eine Spalte angewendet werden. Weitere Informationen finden Sie unter Konfigurieren Sie das Haupt-Tag auf einer Seite.
      Anwendung	Anwendungsbereich
      Breite	Containerbreite Verfügbare Optionen: Fest Fließend
      Übergeordnete Klasse	Übergeordnete CSS-Klasse für den Container.
      CSS-Klasse	CSS-Klassen für den Container. Überschreibt seitenspezifische CSS.
      Hintergrundfarbe	Die Hintergrundfarbe des Containers.
      Hintergrundbild	Das Hintergrundbild für den Container
      Hintergrundstil	Der Anzeigestil eines Hintergrundbildes. Verfügbare Optionen: Standard Überdecken Enthalten Wiederholen
      Bootstrap-Alternative	Wird dieses Feld ausgewählt, werden die standardmäßigen Bootstrap-Gitter-Klassen entfernt und das Bootstrap-Gitter-System im Container deaktiviert. Wenn diese Option ausgewählt ist, wird Folgendes nicht angewendet: Das Feld Breite im Containerdatensatz. Die Bootstrap-Standardklasse im Zeilendatensatz innerhalb des Containers. Die Felder Größe - xs, Größe - sm, Größe - md und Größe - lg in den Spaltendatensätzen innerhalb des Containers. Wählen Sie dieses Feld nur aus, wenn Sie benutzerdefinierte CSS-Klassen und CSS für die Container-, Zeilen- und Spaltensätze bereitstellen möchten.
      Zu Kopfzeile gehen	Wenn diese Option ausgewählt ist, bleibt der Container am Header und scrollen nicht. Verwenden Sie diese Option, um eine Unterkopfzeile zu erstellen.

10. Wahlweise: Um zu einer anderen Seite zu wechseln, wählen Sie aus Seiten Registerkarte im linken Bereich, und wählen Sie dann die nächste Seite aus, die Sie konfigurieren möchten.
11. Wahlweise: Verwenden Sie die Schaltfläche Vorschau in der Kopfzeile, um Ihre Seite anzuzeigen, während Sie daran arbeiten.
    Über die Vorschau können Seiten auch im Mobil- oder Tabletmodus angezeigt werden. Nutzen Sie dazu die Steuerelemente in der Kopfzeile.

    Abbildung : 2. Designer − Tabletansicht

    

Fügen Sie einer Seite eine Unterkopfzeile hinzu

Wählen Sie einen Containerdatensatz aus, der als Unterkopfzeile für die Seite dienen soll. Eine Unterkopfzeile bleibt im Kopfbereich der Seite und scrollt nicht mit.

Vorbereitungen

Erforderliche Rolle: Administrator

Prozedur

1. Navigieren zu Alle > Service Portal > Serviceportal-Konfigurationan.
2. Wählen Sie Designer aus.
3. Wählen Sie eine Seite aus.
4. Rufen Sie das Portal auf, für das Sie Seiten entwerfen möchten, indem Sie den Namen des Portals in der Kopfzeile auswählen.
   
5. Wählen Sie den Container aus, den Sie als Unterheader verwenden möchten, oder wählen Sie den Container mithilfe der Breadcrumbs aus.
6. Wählen Sie das Bearbeitungssymbol ( ).
7. Wählen Sie In Kopfzeile verschieben.

Ergebnisse

Als Unterkopfzeile wird ein Container an die Kopfzeile angedockt und scrollt nicht mit.

Einfügen von Zeichensatzsymbolen auf einer Seite

Fügen Sie Symbole für Zeichensätze auf einer Seite ein, sodass alle Widgets auf der Seite Zugriff auf den Symbolsatz des Zeichensatzes haben.

Vorbereitungen

Erforderliche Rolle: sp_admin oder admin

Prozedur

1. Navigieren zu Alle > Serviceportal > Seiten Und klicken Sie auf die Seite, der Sie Schriftartsymbole hinzufügen möchten.
2. Hängen Sie die Datei mit den Zeichensatzsymbolen an den Seitendatensatz an.
3. Fügen Sie im Feld „Seitenspezifisches CSS“ für die Seite das CSS für die Definition der Zeichensatzsymbole hinzu.
   Verwenden Sie die sys_id des Anhangs als src in der CSS. Zum Beispiel:

   /* fallback */
   @font-face {
     font-family: 'Material Icons';
     font-style: normal;
     font-weight: 400;
     src: url('/828b8ca8b7033010897725cbde11a9f7.iix') format('woff2');
   }
   
   .material-icons {
     font-family: 'Material Icons';
     font-weight: normal;
     font-style: normal;
     font-size: 24px;  /* Preferred icon size */
     display: inline-block;
     line-height: 1;
     text-transform: none;
     letter-spacing: normal;
     word-wrap: normal;
     white-space: nowrap;
     direction: ltr;
   
     /* Support for all WebKit browsers. */
     -webkit-font-smoothing: antialiased;
     /* Support for Safari and Chrome. */
     text-rendering: optimizeLegibility;
   
     /* Support for Firefox. */
     -moz-osx-font-smoothing: grayscale;
   
     /* Support for IE. */
     font-feature-settings: 'liga';
   }

Ergebnisse

Für jedes Widget auf der Seite kann nun ein Symbol aus dem Symbolsatz ausgewählt werden. Im HTML-Widget können Sie beispielsweise verwenden Quellcode Option zur Verwendung eines Symbols. Zum Beispiel:

<p style="text-align: center;"><em class="material-icons">Flight_Land</em></p>