Styles von agorum core anpassen

Die Weboberfläche von agorum core lässt sich per CSS anpassen. Dazu überschreiben Sie vorhandene Stylesheets.

Der Login-Screen kann nicht angepasst werden. Sie können nur Einfluss auf die angemeldeten Oberflächen nehmen. Auch die Oberfläche von aguila-Widgets können Sie individuell per CSS anpassen.

Eigene Styles definieren

1. Öffnen Sie links in der App-Leiste Administration und dann MetaDB.
2. Öffnen Sie den Pfad:

   MAIN_MODULE_MANAGEMENT/home/control

3. Erstellen Sie über folgendes Property-Bundle, wenn es noch nicht vorhanden ist. Wechseln Sie in den Ordner Styles.
   
   Name
   Styles
4. Erstellen Sie über ein Property-Entry.
   
   Name
   <Name>.css, Beispiel: mystyle.css
   
   Datentyp
   Zeichenkette (String)
   
   Wert (Content)
   <gewünschtes CSS>
5. Speichern Sie das Property-Entry.

Angaben im Property-Entry

Styles über CSS-Datei definieren

Alternativ definieren Sie die Styles in einer separaten CSS-Datei, die Sie auf dem agorum core-Server ablegen.

Ablageort der CSS-Datei (Beispiel)

<Installdir>/jboss/server/default/deploy/roi.ear/roiwebui.war/meinestyles_module/css/MeineStyles.css

Nachdem Sie die CSS-Datei abgelegt haben, referenzieren Sie in der MetaDB auf diese separate CSS-Datei.

1. Befolgen Sie die Schritte 1 bis 4 unter Eigene Styles definieren.
2. Erstellen Sie über ein Property-Entry.
   
   Name
   <Name>
   
   Datentyp
   Inhalt (Content)
   
   Wert (Content)
   <Pfad zur separaten CSS-Datei>
3. Speichern Sie das Property-Entry.

Verweis auf eine CSS-Datei

Überschreibbare Styles herausfinden

Um herauszufinden, wie die überschreibbaren Styles lauten, verwenden Sie einen Browser mit Developer Tools, etwa Chrome oder Firefox. Mit dem dort eingebauten Inspector (F12-Taste) fahren Sie auf ein Element in der Weboberfläche und erfahren so, wie der Style lautet. Kopieren Sie ihn anschließend in Ihr erstelltes Property-Entry.

Beispiel für die Farbe der Titelleiste

Überschreibbare Styles mithilfe des Inspectors herausfinden

Der zu überladende Style lautet hier div.x-toolbar.x-toolbar-default-docked-top.agorum-header-toolbar.x-toolbar-default. Sie können den Style im Inspector testweise ändern, um das Ergebnis anzusehen:

Style im Inspector ändern

Beispiele für Style-Anpassungen

Die Farbe anpassen

Ein Beispiel für die Farbanpassung finden Sie unter Überschreibbare Styles herausfinden. Allerdings möchten Sie vielleicht nicht nur die Hintergrundfarbe der Titelleiste anpassen, sondern auch die Farbe der Seitenleiste.

Sie überschreiben diesen Style folgendermaßen:

.x-toolbar.aguila-component.side-bar.x-vertical {
  background-color: springgreen;
}

Das Logo anpassen

Das Logo im Header jedes agorum core-Moduls ist im Style .agorum-header-logo definiert.

Um das Logo zu überschreiben, legen Sie Ihr Logo auf dem Server ab, etwa unter:

<Installdir>/jboss/server/default/deploy/roi.ear/roiwebui.war/meinestyles_module/img/MeinLogo.png

Sie überschreiben diesen Style folgendermaßen:

.agorum-header-logo {
    background: url(/roiwebui/meinestyles_module/img/MeinLogo.png)!important;
}

Listen-Styles basierend auf Selektoren anpassen

Die Styles für Listen-Elemente lassen sich abhängig von diversen Gegebenheiten anpassen, etwa einem Metadatum. In folgendem Beispiel wird ein Style belegt in Abhängigkeit des Metadatums asco_ticketPrio. Damit können die einzelnen Listen-Einträge des internen agorum core-Ticketsystems entsprechend der Priorität eingefärbt werden:

Farbiger Hintergrund von Vorgängen auf Basis des Metadatums Priorität

Für dieses Beispiel benötigen Sie das Plugin agorum core smart organization.

1. Öffnen Sie links in der App-Leiste Administration und dann MetaDB.
2. Öffnen Sie den Pfad:

   MAIN_MODULE_MANAGEMENT/filingassistant/2.0/control/AddOns

3. Erstellen Sie über ein Property-Bundle mit beliebigem Namen.
4. Erstellen Sie über die unten aufgeführten Property-Entrys.
5. Definieren Sie die entsprechenden CSS-Styles (siehe Eigene Styles definieren).
   
   CSS des Listen-Beispiels

   .ag-ticketsystem-ticketprio-hoch .x-grid-td {
     background-color: rgba(255, 0, 0, 0.13);
   }
   
   .ag-ticketsystem-ticketprio-mittel .x-grid-td {
     background-color: rgba(255, 197, 0, 0.32);
   }
   
   .ag-ticketsystem-ticketprio-niedrig .x-grid-td {
     background-color: rgba(0, 255, 64, 0.19);
   }
   
   .ag-ticketsystem-ticketprio-hoch.x-grid-row-selected .x-grid-td,
   .ag-ticketsystem-ticketprio-hoch.x-grid-row-focused .x-grid-td,
   .x-grid-row-selected .ag-ticketsystem-ticketprio-hoch .x-grid-td,
   .x-grid-row-focused .ag-ticketsystem-ticketprio-hoch .x-grid-td {
     background-color: #dfe8f6;
   }
   
   .ag-ticketsystem-ticketprio-mittel.x-grid-row-selected .x-grid-td,
   .ag-ticketsystem-ticketprio-mittel.x-grid-row-focused .x-grid-td,
   .x-grid-row-selected .ag-ticketsystem-ticketprio-mittel .x-grid-td,
   .x-grid-row-focused .ag-ticketsystem-ticketprio-mittel .x-grid-td {
   
     background-color: #dfe8f6;
   }
   
   .ag-ticketsystem-ticketprio-niedrig.x-grid-row-selected .x-grid-td,
   .ag-ticketsystem-ticketprio-niedrig.x-grid-row-focused .x-grid-td,
   .x-grid-row-selected .ag-ticketsystem-ticketprio-niedrig .x-grid-td,
   .x-grid-row-focused .ag-ticketsystem-ticketprio-niedrig .x-grid-td {
   
     background-color: #dfe8f6;
   }
   
   .ag-ticketsystem-ticketprio-hoch.x-grid-row-over .x-grid-td,
   .x-grid-row-over .ag-ticketsystem-ticketprio-hoch .x-grid-td {
     background-color: #dfe8f6;
   }
   
   .ag-ticketsystem-ticketprio-mittel.x-grid-row-over .x-grid-td,
   .x-grid-row-over .ag-ticketsystem-ticketprio-mittel .x-grid-td {
     background-color: #dfe8f6;
   }
   
   .ag-ticketsystem-ticketprio-niedrig.x-grid-row-over .x-grid-td,
   .x-grid-row-over .ag-ticketsystem-ticketprio-niedrig .x-grid-td {
     background-color: #dfe8f6;
   }

Property-Entrys

[
  {
    "selectors" : {
      "TicketSystemPrioNiedrig" : "[~~acso_ticketPrio=niedrig][~identifier=Ticket]"
    },
    "value" : "ag-ticketsystem-ticketprio-niedrig"
    }, {
        "selectors" : {
      "TicketSystemPrioMittel" : "[~~acso_ticketPrio=mittel][~identifier=Ticket]"
        },
        "value" : "ag-ticketsystem-ticketprio-mittel"
    }, {
        "selectors" : {
            "TicketSystemPrioHoch" : "[~~acso_ticketPrio=hoch][~identifier=Ticket]"
        },
        "value" : "ag-ticketsystem-ticketprio-hoch"
    }
]

Durch das Property-Entry ListRowClasses.json wird eine entsprechende CSS-Klasse gesetzt, wenn das vererbte Metadatum ag_ticketPrio den Wert niedrig, mittel oder hoch hat:

• ag-ticketsystem-ticketprio-niedrig
• ag-ticketsystem-ticketprio-mittel
• ag-ticketsystem-ticketprio-hoch

Das Property-Entry Version müssen Sie immer verändern, wenn Sie die Definition unter dem Property-Entry ListRowClasses.json anpassen, damit Version neu geladen wird.

Den Login-Screen anpassen

Um Styles des Login-Screens anzupassen, existiert aktuell keine offizielle Möglichkeit, jedoch ein Workaround.

1. Öffnen Sie auf dem agorum core-Server folgende Datei. Darin sind alle Styles des Login-Screens enthalten und können angepasst werden.

   <Installdir>/jboss/server/default/deploy/roi.ear/roiwebui.war/home_module/css/app.css
   

2. Passen Sie die Styles entsprechend an.
   
   Beispiel Login-Logo

   .login-logo {
       background: url(../img/mylogo.png);
       background-image: url(../img/mylogo.svg), none;
       background-repeat:no-repeat !important;
   }

aguila-Widgets anpassen

Sie können Ihre eigens erstellten aguila-Widgets per CSS individuell anpassen.

Im folgenden Beispiel wird eine Schaltfläche angepasst.

1. Öffnen Sie links in der App-Leiste Explorer.

2. Öffnen Sie Ihr Konfigurationsprojekt:

   Eigene Dateien‎/Administration‎/customers‎/<Ihr Konfigurationsprojekt>

3. Öffnen Sie im Projektordner den Ordner js.
4. Öffnen Sie mit der rechten Maustaste das Kontextmenü.
5. Wählen Sie Neu > JS-Dokument.
6. Vergeben Sie einen eindeutigen Namen für das Dokument.
7. Befüllen Sie das JavaScript etwa mit folgendem Inhalt:

   let aguila = require('common/aguila');
   
   let w = aguila.create({
     type: 'agorum.vbox',
     width: 400,
     height: 400,
     items: [
       {
         type: 'agorum.button',
         text: 'Mein Button', // Text ist nur als Beispiel gedacht.
         cls: 'prefix-my-button' // Vergeben Sie einen eindeutigen Namen pro Widget.
       }
     ]
   });
   
   w;
   

8. Klicken Sie auf Save und auf Run.
   
   Ergebnis: Das aguila-Widget öffnet sich.
   
   Sie sehen die Schaltfläche Mein Button in den Standardfarben. Diese Farben werden verwendet, wenn nichts anderes definiert ist. Das Ziel ist es jetzt, die Schaltfläche rot zu färben. Die Schrift soll in Weiß und fett dargestellt werden.

Aussehen nach Ausführen des Skripts

CSS-Elemente herausfinden

Um herauszufinden, welche Elemente im CSS geändert werden müssen, damit die Schaltfläche rot und die Schrift weiß werden, verwenden Sie die Entwickler Tools DevTools (etwa über Chrome). Mit diesen lässt sich vorab der CSS-Code herauszufinden. Die DevTools sind in Google Chrome automatisch vorhanden.

Sie können auch einen anderen Browser wie Firefox verwenden, der die gleichen Funktionen bietet wie Google Chrome.

1. Öffnen Sie mit F12 die Entwickler Tools DevTools (etwa über Chrome), während Ihr aguila-Widget geöffnet ist.
2. Klicken Sie links oben in den DevTools auf  .
3. Fahren Sie mit der Maus über die Schaltfläche im aguila-Widget.
   
   Ergebnis: Rechts erscheint die Button-Klasse, unter der die Schaltfläche erkennbar ist.
    
   

   Anzeige der Button-Klasse
4. Klicken Sie rechts auf .
   
    
   

   New Style Rule erstellen
5. Fügen Sie Folgendes hinzu:

   .x-btn.prefix-my-button {
       background-color:  red;
   }

6. Bestätigen Sie mit der Enter-Taste.
   
   Ergebnis: Die Schaltfläche erscheint mit rotem Hintergrund.
   
    
   

   Schaltfläche mit rotem Hintergrund
7. Wählen Sie in der Registerkarte Elements in den DevTools das darunter liegende Element span an und klappen Sie es zweimal auf.
8. Klicken Sie rechts oben erneut auf  (New Style Rule).
9. Fügen Sie Folgendes hinzu:

   .x-btn.prefix-my-button span {
       color: white;
       font-weight: bold;
   }

10. Bestätigen Sie mit der Enter-Taste.
    
    Ergebnis: Die Schaltfläche erscheint in fetter, weißer Schrift und mit rotem Hintergrund.
    
     
    

    Schaltfläche in fetter, weißer Schrift und mit rotem Hintergrund
11. Klicken Sie auf das inspector-stylesheet und kopieren Sie den gesamten CSS-Code in die Zwischenablage.

Den CSS-Code hinterlegen

Nachdem Sie in Ihrem Browser die CSS-Elemente herausgefunden und den Code ausprobiert und kopiert haben, hinterlegen Sie diesen in agorum core, damit Ihr aguila-Widget sich dort ebenfalls verhält wie eben gesehen.

1. Öffnen Sie links in der App-Leiste Administration und dann MetaDB.
2. Öffnen Sie den Pfad:

   MetaDb/MAIN_MODULE_MANAGEMENT/home/control/Styles

3. Erstellen Sie über  eine Property-Gruppe mit neuem Namen, etwa:

   [ Mein Button ]

4. Öffnen Sie die Property-Gruppe.
5. Öffnen Sie mit Rechtsklick das Kontextmenü.
6. Erstellen Sie über  einen Property-Entry mit folgendem Inhalt:
   
   Name
   prefix-styles.css
   
   Datentyp
   Inhalt (Content)
7. Fügen Sie im Feld Wert (Content) Ihren kopierten CSS-Code aus der Zwischenablage ein:

   .x-btn.prefix-my-button {
       background-color:  red;
   }
   
   .x-btn.prefix-my-button span {
       color: white;
       font-weight: bold;
   }

8. Öffnen Sie Ihr JavaScript zum aguila-Widget und klicken Sie auf Run.
   
   Ergebnis: Die Schaltfläche erscheint in fetter, weißer Schrift und rotem Hintergrund.