Icon eines Objekts in der Listendarstellung und in der Detailansicht ändern
Sie können bei Objekten verschiedene Icons, basierend auf diversen Metadaten, konfigurieren.
Beispiele
In der Kundenakte von agorum core erscheinen die Icons an verschiedenen Stellen.
Im Detailfenster (Registerkarte „Ansicht“)
Detailfenster (Registerkarte
Ansicht)
Als Kriterium für das Anzeigen der Icons verwendet das System das Metadatum identifier:
Metadatum
identifier
Ein eigenes Icon erstellen
Sie können eigene Icons erstellen. Dazu definieren Sie zuerst einen Selektor, bei dem die Konfiguration greifen soll. Er ist die Bedingung. Zudem definieren Sie, welches Stylesheet das System anwendet.
- Öffnen Sie links in der Seitenleiste Administration und dann MetaDB.
- Öffnen Sie den Pfad:
MAIN_MODULE_MANAGEMENT/filingassistant/2.0/control/AddOns/
- Legen Sie in diesem Pfad über ein neues Property-Bundle an.
Name
MeineIcons
- Öffnen Sie das Property-Bundle und legen Sie über folgende Property-Entrys an:
format
Definiert die Versionsnummer des agorum core smart assistants.
Die aktuelle Nummer finden Sie unter /MetaDb/MAIN_MODULE_MANAGEMENT/filingassistant/2.0/control/Standard unter format.
ListIcons.json
Definiert, bei welchem Selektor das System welchen Style anwendet.
version
Definiert die Version der Konfiguration.
Sobald Sie etwas ändern, müssen Sie den Eintrag unter version hochzählen, sodass agorum core die Konfiguration neu lädt.
Ergebnis: Das System wendet die Style-Klasse list-icon-sample-icon an, wenn das Objekt vom Typ Ordner ist und das Metadatum identifier=Kundenakte besitzt.
Property-Entrys
Name |
Datentyp |
Wert |
format |
Zeichenkette (String) |
1.6 |
ListIcons.json |
Inhalt (Content) |
[
{
"selectors": {
"sampleIcon": "[~identifier=Kundenakte][isFolder]"
},
"value": "list-icon-sample-icon"
}
] |
version |
Zeichenkette (String) |
1 |
Einen Style definieren
Sie definieren den Style für die CSS-Klasse, in diesem Beispiel list-icon-sample-icon.
- Öffnen Sie in der MetaDB den Pfad:
MAIN_MODULE_MANAGEMENT/home/control/Styles
- Legen Sie in diesem Pfad über etwa folgende Property-Group an.
Name
[ MeineIcons ]
- Öffnen Sie die Property-Group und legen Sie über folgendes Property-Entry an (siehe SampleIcons.css).
Name
SampleIcons.css
Ergebnis: Die Icons erscheinen, sobald Sie die Oberfläche neu laden.
Property-Entry
Name |
Datentyp |
Wert |
SampleIcons.css |
Inhalt (Content) |
.blue-list-icon.list-icon-sample-icon {
background: url(/roiwebui/sampleicon_module/img/icons/sample.svg);
margin-top: -2px;
margin-bottom: 2px;
margin-left: -1px;
margin-right: 6px !important;
background-repeat: no-repeat;
}
/* definiert das Icon für die "normale" Datailliste. */
.list-icon.list-icon-agorum-task {
background-image: url(/roiwebui/sampleicon_module/img/icons/sample.svg);
background-size: 14px;
}".blue-list-icon.list-icon-sample-icon"
- Der Eintrag .list-icon.list-icon-agorum-task dient für die Detail-Listen, etwa bei Suche und Mitteilungen.
- Beide Einträge verweisen auf eine Bild-Datei (in diesem Beispiel auf eine skalierbare SVG-Datei). Diese liegt unterhalb der agorum core-Installation in folgendem Verzeichnis:
IntallDir/jboss/server/default/deploy/roi.ear/roiwebui.war/sampleicon_module/img/icons
|
Tipp: Sie können so auch andere CSS-Eigenschaften eines solchen Listeneintrags ändern, etwa die Hintergrundfarbe oder ähnliche Dinge.