Blog Archiv

Suchen

Anpassen des neuen SCSM Self Service Portals

Bewertung:  / 0
SchwachSuper 
Freitag, 13. November 2015 Dirk Huser

Anpassen des neuen SCSM Self Service Portals

Das UR8 für SCSM 2012 R2 stellt für den Service Manager das neue Self Service Portal bereit, basierend auf HTML5 und CSS.

Damit ergeben sich bzgl. der Gestaltung des Portals jede Menge Möglichkeiten. Mit Hilfe der CSS-Styles lässt sich z.B. das Layout und die Farbgestaltung flexibel anpassen. Zusätzlich bieten jederzeit editierbare CSHTML-Dateien weitere Einfluss- und Gestaltungsmöglichkeiten.

Nach einer Standard-Installation befinden sich die Dateien für das Portal üblicherweise hier:

C:\inetpub\wwwroot\SelfServicePortal

Alle weiteren Pfadangaben in diesem Artikel beziehen sich auf diesen Ordner. 

HTML- und CSS-Nerds können das Portal vermutlich spielend leicht komplett umbauen. Für alle, die aber keine tiefergehenden Erfahrungen mit HTML und CSS haben, sollen hier zumindest einige einfache Anpassungsmöglichkeiten gezeigt werden. 

Ganz wichtiger Hinweis: Vor Änderungen an den Out of the Box-Dateien bitte unbedingt eine Kopie anlegen. Am besten gleich vor den ersten Änderungen den gesamten Ordner „SelfServicePortal“ an einen sicheren Ort kopieren, um jederzeit eine Rückfall-Option bei fehlgeschlagenen Änderungen zu haben! 

Die hier beschriebenen Anpassungen beziehen sich auf das Portal, wie es zum Start am 11.11.2015 verfügbar war und sind, zumindest bisher, noch keine offiziell von Microsoft bestätigten Vorgehensweisen. Daher alle beschriebenen Anpassungen auf eigene Gefahr und ohne Gewähr

Hinweis: Die Dateien lassen sich mit einem einfachen Texteditor, z.B. Notepad++, ändern. Da die Dateien aber in einem Systemverzeichnis liegen, muss man den Editor als Administrator starten, sonst können Änderungen nicht gespeichert werden. 

Portal-Updates können die Anpassungen überschreiben oder komplett neue Funktionen einführen. Daher am besten ein erfolgreich geändertes Portal auch gleich an einen sicheren Ort kopieren, damit man im Falle eines Updates, das bestimmt kommen wird, gewappnet ist und die Änderungen ggf. wieder herstellen kann! 

Anpassung über web.config 

Microsoft stellt über die web.config-Datei im Verzeichnis SelfServicePortal einige einfache Einstellmöglichkeiten bereit, die man anpassen kann und die vermutlich auch durch ein Update nicht überschrieben werden. 

Dazu gehören z.B. der Seitentitel (CompanyName) und das Logo (CompanyLogoLocation). 

Informationen dazu hier: https://technet.microsoft.com/library/mt622142.aspx 

Der Artikel erklärt die vorhandenen Möglichkeiten recht gut, daher soll hier der Verweis genügen. 

Damit ein eigenes Logo in die originale CSS-Gestaltung passt, sollte man eine Größe von ca. 40x40 Pixeln wählen oder man muss den Logo-Balken mittels CSS vergrößern oder verkleinern. 

Bilder kann man generell gut in ..\Content\Images ablegen. Am besten als PNG, damit die Transparenzinformation erhalten bleibt.

Das Portal mit aufgeklappter Sidebar, neuem Logo und Titel sowie Telefon und Mail, Rest noch nicht geändert:

Portal Title Logo Change

Anpassen der Farbe für die Sidebar

Als kleines Beispiel für die Möglichkeiten der Portal-Gestaltung mittels CSS soll hier die Farbe der Sidebar im Portal angepasst werden (die graue Leiste mit den Icons am linken Rand).

Die CSS-Dateien liegen im Verzeichnis ..\Content\Css. Dort findet sich auch die Datei main.css.

Innerhalb main.css gibt es diesen Abschnitt: 

.main_body .side_nav_bar,
.main_body .side_nav_bar_expand {
   background-color: rgb(77, 77, 77);
   color: white;
   position: fixed;
   margin-top: 4em;
}
 

Der gelb unterlegte Bereich legt die Farbe der Sidebar in RGB-Notation fest, also in Rot/Grün/Blau-Anteilen von 0 (kein Anteil) bis 255 (maximaler Anteil). Möchte man z.B. anstelle des voreingestellten Grau-Tons ein dunkles Blau haben, dann kann die Angabe einfach geändert werden: 

   background-color: rgb(0, 0, 100);

Die Datei nach der Änderung speichern und das Portal im Browser neu laden, schon erscheint die Sidebar in einem Blauton!

Die anderen Abschnitte im CSS sind durchaus sprechend benannt, so dass man die übrigen Bestandteile des Portals mit etwas Experimentierfreude recht schnell finden und ändern kann. 

Anpassen der Adressinformationen 

Klappt man die Sidebar des Portals auf, erscheinen im unteren Teil Adressinformationen. 

Mail-Adresse und Telefonnummer kann man in der web.config über die Eigenschaften ITPhone und ITEmail anpassen. 

Das angezeigte Logo muss jedoch an anderer Stelle geändert werden: ..\Views\Shared\Sidebar.cshtml 

Dort findet sich zum Ende hin folgender Abschnitt: 

<div class="side_nav_bar_expand col side_menu">
.
.
   <div class="side_nav_bottom">
      <div class="side_nav_report">
         <div>@Resources.SelfServicePortalResources.PoweredBy :</div>
         <img src="/~/Content/images/msft_logo.png" alt="Microsoft" style="max-width: 12em;" />
         <br /><br />
         <div>@Resources.SelfServicePortalResources.CantFindSolution</div>
         <div>@Resources.SelfServicePortalResources.ContactUs</div>
      </div>
 

Der unterlegte Bereich gibt die Bilddatei und den Alternativtext für die Logo-Einblendung an und kann geändert werden. 

Da es sich um regulären HTML-Code handelt, kann die Gestaltung des gesamten Abschnitts "side_nav_bottom" auch mit entsprechenden HTML-Kenntnissen komplett anderes gestaltet werden! 

Anklickbare Mail-Adresse 

Bei ausgeklappter Sidebar findet sich im Adressbereich die Mailadresse. Leider kann diese nicht angeklickt werden, um direkt eine Email zu schreiben, weder im ein- noch im ausgeklappten Zustand der Sidebar. Auch das kann angepasst werden! 

Zunächst mal die Anpassungen im zugeklappten Zustand der Sidebar: Dazu gibt es im oberen Teil von Sidebar.cshtml einen Abschnitt 

<div class="side_nav_bar col side_menu"> 

Dort findet sich der Unter-Abschnitt: 

<div class="side_nav_bottom">
   <div class="row side_nav_phone">
       <span class="icon-Phone icon-pos icon icon-medium"></span>
   </div>
   <div class="row side_nav_mail">
       <span class="icon-Mail icon-pos icon icon-medium"></span>
   </div>

</div>
 

<div class="row side_nav_mail">” enthält die Anzeige des Mail-Icons. 

Es genügt einen HTML-Link zu ergänzen, um das Icon klickbar zu machen. Da Links üblicherweise blau angezeigt werden, wird im folgenden Beispiel noch die Änderungen der Font-Farbe auf „weiß“ ergänzt. Das kann natürlich auch mittels CSS erfolgen. Hier das Beispiel, einfach die Mail-Adresse passend ersetzen: 

   <div class="row side_nav_mail">
       <a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! "><font color="white"><span class="icon-Mail icon-pos icon icon-medium"></span></font></a>
   </div>
 

Gleichartiges muss jetzt noch für die Sidebar im ausgeklappten Zustand erfolgen. Der Abschnitt für den ausgeklappten Zustand ist bereits aus dem vorangehenden Kapitel bzgl. der Logo-Änderung bekannt: 

<div class="side_nav_bar_expand col side_menu"> 

Auch hier findet sich ein Unter-Abschnitt “<div class="row side_nav_mail">”. 

Im ausgeklappten Zustand ist sowohl das Logo als auch die Mail-Adresse sichtbar. Beides wird mit einem HTML-Link ergänzt. Der geänderte Abschnitt:

   <div class="row side_nav_mail">
       <a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! "><font color="white"><span class="icon-Mail icon-pos icon icon-medium"></span></font></a>
       <a href="mailto:Diese E-Mail-Adresse ist vor Spambots geschützt! Zur Anzeige muss JavaScript eingeschaltet sein! "><font color="white"><span class="icon-text icon-text-pos">@System.Web.Configuration.WebConfigurationManager.AppSettings["ITEmail"]</span></font></a>
   </div>

Eigene Links in der Sidebar 

Das vorangehende Beispiel demonstriert bereits, wie einfach Links in der Sidebar ergänzt werden können, sowohl im ein- als auch im ausgeklappten Zustand. 

Jetzt ist es auch einfach weitere Links zu ergänzen. Es müssen dazu in beiden Abschnitten 

<div class="side_nav_bar col side_menu"> (eingeklappter Zustand)
<div class="side_nav_bar_expand col side_menu">
(ausgeklappter Zustand) 

neue Unter-Abschnitte ergänzt werden. 

Zunächst das Link-Beispiel für den eingeklappten Zustand, wo nur ein Icon sichtbar sein soll: 

<div class="row side_nav_link">
   <a href="/http://www.vaserv.eu"><img src="~/Content/images/VasLink.png" alt="VA Serv" style="max-width: 12em;" /></a>
</div>
 

Den http:…-Link und den Pfad für die Icon-Datei einfach anpassen! 

Jetzt das Beispiel für den ausgeklappten Zustand mit Icon und Text: 

<div class="row side_nav_link">
   <a href="/http://www.vaserv.eu"><img src="~/Content/images/VasLink.png" alt="VA Serv" style="max-width: 12em;" /></a>
   <span class="icon-text icon-text-pos"><a href="/http://www.vaserv.eu"><font color="white">VAS Homepage</font></a></span>
</div>
 

Auch hier wieder einfach Link, Icon und Text zum Link anpassen. 

Anpassen der Portal-Texte 

Die im Portal sichtbaren Texte ändern sich mit der eingestellten Anzeigesprache. Für jede verfügbare Sprache gibt es im Verzeichnis App_GlobalResources eine entsprechende Ressourcen-Datei, welche die Texte enthält. 

Die Datei für die gewünschte Sprache kann anhand des ISO2-Ländercodes gefunden werden. Für Deutsch ist das „DE“ und die Datei heißt entsprechend SelfServicePortalResources.de.resx.  

Ressourcen-Dateien können auch mit einem Texteditor bearbeitet werden. Am einfachsten ist es, den zu ändernden Text im Editor suchen zu lassen und ihn dann entsprechend anzupassen. 

Beispiel: Ändern des Texts „Dienstkatalog“ in „Service Katalog“. Gefunden hier: 

<data name="ServiceCatalog" xml:space="preserve">
    <value>Dienstkatalog</value>
</data>

Geändert in: 

<data name="ServiceCatalog" xml:space="preserve">
    <value>Service Katalog</value>
</data>
 

Das Portal nach den oben beschriebenen Änderungen:

UR8 Portal SideBar Change

Ein Icon für die Shortcut-Leiste

Webseiten stellen im Browser-Link-Feld und in der Shortcut-Leiste oft ein kleines Icon dar, das SSP tut das von Haus aus erst mal nicht. In dieser Datei kann man jedoch einen entsprechenden Verweis ergänzen:

..\Views\Shared\_Layout.cshtml

Zu Beginn dieser Datei finden sich ein paar HTML-Zeilen, die Links definieren: <link href="/....

Hier kann ein Link der folgenden Art ergänzt werden: <link href="/~/Content/Images/vas_blau_16.ico" rel="shortcut icon" />

Der Link sollte auf eine Icon-Datei verweisen (Format: 16x16 Pixel), die im Images-Verzeichnis abgelegt ist. Fortan wird die Webseite im Browser mit dem angegebenen Icon gekennzeichet:

WebsiteIconBeispiel

Die in diesem Artikel gezeigten Beispiele offenbaren nur einen kleinen Ausschnitt der Anpassungsmöglichkeiten des neuen Portals, die oft ganz einfach umzusetzen sind. Vielleicht regen die Beispiele ja zu eigenen Experimenten an und vielleicht findet sich auch jemand, der mit Java-Script programmatische „Intelligenz“ im Portal ergänzt: Dann würde ich mich freuen davon zu hören/zu lesen J