Jira ist an sich schon übersichtlich gestaltet. Du hast eine Menüleiste mit einigen festgelegten Links. Die sind jedoch entweder über das System gegeben oder werden direkt durch Plugins hinzugefügt. Arbeitest du jetzt aber beispielsweise immer im gleichen Projekt, erstellst unzählige Tickets für ein und dasselbe Projekt oder arbeitest mit Tools außerhalb von Jira (z.B Hubspot oder Confluence). Oder vielleicht möchtest du deinen Usern direkten Zugang zum internen Support geben. Genau dann, kannst du direkt Quicklinks, wie Buttons, Bilder oder andere Textelemente direkt unterhalb des Jira Menüs hinzufügen.
Das funktioniert dann über die Systemeinstellungen und dem Menüpunkt Benutzeroberfläche und Ankündigungsbanner.
Was ist der Ankündigungsbanner und wie funktioniert es?
Wie der Name schon sagt, kann man das Ankündigungsbanner in erster Linie dazu verwenden um, naja, Ankündigungen an alle Jira User zu machen. Was du letztendlich ankündigst, bleibt natürlich Dir überlassen. Wir bei XALT, oder auch einige unserer Kunden, nutzen das Banner allerdings hauptsächlich um intern wichtige News zu verkünden. Diese betreffen dann zum Beispiel Systemänderungen, Updates oder neue Plugins.
Zusätzlich nutzen wir das Ankündigungsbanner bei unseren Partnern dafür, Quicklinks als Button zur Verfügung zu stellen, welcher die Ticketerstellung für ein spezielles Jira Projekt stark vereinfacht bzw. beschleunigt.
Wie funktioniert das Ankündigungsbanner?
Das Ankündigungsbanner basiert auf HTML und CSS und kann mit Grundkenntnissen gestaltet und jederzeit angepasst werden. Gehe dazu einfach in die Systemeinstellungen, suche in dem Menü auf der Linken Seite nach Benutzeroberfläche und klicke auf Ankündigungsbanner.
Hier hast du anschließend die Möglichkeit das Banner ganz nach deinen Wünschen zu gestalten. Jira bietet dir außerdem die Option, das Banner einerseits nur für eingeloggte Nutzer:innen oder öffentlich, d.h. für jeden anzeigen zu lassen.
Pro Tipp: Erstelle einfach mehrere Templates und Code-Snippets um jederzeit den Inhalt oder Design anzupassen
So fügst du einen Quicklink als Button hinzu
Die Oberfläche von Jira stellt bereits einige tolle HTML Elemente bzw. Klasse zur Verfügung, die du anschließend weiter nutzen kannst. Um herauszufinden welche Klassen sich als Button eignen, öffnest du einfach die Entwickler-Tools (F12) deines Browsers und inspizierst das Element, welches du in das Banner einfügen möchtest. In unserem Fall, ein Standard Jira Button, nutzt die Klassen.
.aui-button.aui-button-primary, .aui-button.aui-button-primary:visitedDiese Klasse nutzt du anschließend während der Erstellung des Quicklinks.
Pro Tipp: Erstelle deine eigenen Klassen und nutze individuellen CSS um alle Elemente nach deinen Wünschen (oder Branding) zu stylen.)
Um Beispielsweise diesen Button zu erstellen, kannst du den folgenden Code nutzen:
<a id="create_issue" class="aui-button aui-button-primary aui-style create-issue" style="margin: 10px; display: block; position: relative; width: 200px; text-align: center;" title="Request Permission" href="[Füge hier deinen Link ein]">Beispiel Button</a>Um den Quicklink zur Ticketerstellung eines Projekts verwenden zu können, musst allerdings vorher herausfinden, welche ID der Jira Issue Type hat, den du erstellen willst. Dazu gehst du einfach in die Issue Type Übersicht in den Admin Einstellungen und navigiere zu dem Issue Type, den du direkt ansprechen möchtest. Gehe mit deiner Maus über den “Edit” Button (Hover) und überprüfe die angezeigte URL im linken unteren Bereich deines Browsers. Notiere dir anschließend die ID.
Anschließend benötigst du nur noch die Projekt-ID. Diese findest du in der Projektübersicht im Admin Bereich. Navigiere in der Übersicht zur Spalte Aktionen, klicke auf die 3 Punkte und lege deinen Cursor erneut über “Edit”. Anschließend gehst du ähnlich vor wie bei der Issue-ID.
Der Link sollte anschließend wie folgt aussehen:
https://example.domain.de/secure/CreateIssue.jspa?issuetype=12345&pid=12345Sobald du mit dem Erstellen deines Buttons fertig bist, klickst du auf “Banner einstellen” und die Benutzeroberfläche wird automatisch aktualisiert. Bist du mit dem Ergebnis zufrieden und der Quicklink macht, was er soll? Perfekt!
Füge weitere Elemente zu dem Ankündigungsbanner hinzu
Selbstverständlich kannst du die Funktion noch für weitere Dinge verwenden und Elemente ganz nach deiner Wahl hinzufügen.
Hinzufügen von Text Elementen – Überschriften, Paragrafen und mehr
Um einfache Textabschnitte mit Überschriften hinzuzufügen, nutzt du am besten die Standard-HTML Kennungen, <H1>, <H2>, <H3>,<p> oder für einfache Links dann <a>.
So erstellst du das folgende Design:
<style>
#announcement-banner {
background-color: #c5dff0;
}
#announcement-banner h1, #announcement-banner p{
color: #262626!important;
text-align: center;
}
p {
font-size: 18px;
}
</style>
<h1 style="margin: 10px; display: block;">This is how you create cool announcements</h1>
<p style="margin:10px;">You can add anything you want to the Announcement Banner by using HTML and CSS.<br>For example, a button that let's you create a ticket for an important project.</p>
Hinzufügen von Bildern und Hintergrundbildern
Um Hintergrundbilder zu deinem Banner hinzufügen zu können, muss das verwendete Bild auf einem Server liegen auf den zugreifen kannst. Das kann beispielsweise dein Content-Management-System (CMS), Internetseite oder auch deine Firmen-Cloud sein. Wichtig dabei ist lediglich, dass dein Jira darauf zugreifen kann. Lade das Bild hoch und notiere dir die URL. In unserem Fall nutzen wir ein Bild unserer WordPress Instanz.
<style>
#announcement-banner {
background-color: #c5dff0;
background-image:url('https://www.deinedomain.de/hintergrundbild.png');
background-position: center center;
background-size: cover;
padding: 120px 0px;
}
#announcement-banner h1{
font-size:35px;
color: #fff!important;
text-align: center;
margin: 10px;
display: block;
}
</style>
<h1>This is how you add background images</h1>Pro Tipp: Mit dem zusätzlichen CSS-Code <box-shadow:inset 0 0 0 2000px rgba(0, 0, 0, 0.3);> kannst du über das Hintergrundbild auch noch ein Overlay legen und den Text dadurch besser Sichtbar zu machen.
Achte allerdings bei der Verwendung eines Hintergrundbildes darauf, dass dieses nicht zu viel Platz einnimmt und der Banner nach dem Scrollen hinter den anderen UI Elementen liegt.
Was du als Jira Admin auch noch machen kannst, ist mehrere Code-Snippets als Templates in einer Textdatei zu speichern. Dann kannst du je nach Bedarf das Ankündigungsbanner bzw. den Quicklink in Jira jederzeit austauschen.
Zusammenfassung – Ankündigungsbanner und Quicklinks für Jira
Du siehst also, das Ankündigungsbanner anzupassen und Quicklinks hinzuzufügen ist ganz einfach und kann ja nach Belieben an deine Anforderungen angepasst werden. Über CSS kannst du diesen noch einen coolen Style verpassen.
Du benötigst Unterstützung bei der Konfiguration deiner Jira Instanzen oder möchtest wissen, welche Power noch in Jira schlummert? Unsere Atlassian Consultants helfen dir hier gerne weiter. Schick uns doch einfach eine Nachricht mit deinen Fragen ????.
