Erweiterungsmöglichkeiten
Das Portal wird mit einem Standard Layout und Corporate Identity ausgeliefert. Allerdings ist gerade durch die Verwendung von HTML5 und AngularJS eine Anpassung der Oberflächen einfach möglich.
Das Aussehen der einzelnen Oberflächen kann nicht nur durch CSS entsprechend den eigenen CI Anforderungen angepasst werden. Auch das Layout der kompletten HTML Seite kann durch eine kundenspezifische Seite ausgetauscht werden, solange die Schnittstelle weiterhin alle benötigten Daten erhält. Dadurch wird höchste Flexibilität in der Darstellung erreicht.
Beispiel
Unsere Anwendung benutzt die Farbpalette von Google Material Design als Standard-Farbpalette. Diese Farbpalette besteht aus Grund- und Akzentfarben. Die beiden Farben wurden wieder nach Deckkraft gestuft.
Alle kundenindividuellen Ressourcen sind in einem eigenen Ressourcen-Bundle zusammengefasst. Dort können die CSS-Einstellungen durch Designer geändert werden.
Beispielcode in CSS:
.button-primary {
background-color: \#FFC107; }\
.primary{ background-color: \#FFC107; }\
.primary-text{ color: \#FFC107; }\
.darken-primary { color: \#FFA000; }\
.darken-primary-text{ color: \#FFA000; }
.button-secondary { background-color: \#CCCCCC; }\
.secondary { background-color: \#2196f3; }\
.secondary-text { color: \#2196f3; }\
.lighten-secondary-text { color: \#E3F2FD; }
Beispielcode in HTML:
<div class="row">\
<div class="small-6 columns right">\
<div data-value="Speichern"
data-click="nli\_customer\_data\_SaveButton\_click(event)">\
<input type="button" class="button primary" value="Speichern">\
</div>\
</div>
<div class="small-6 columns left">\
<div data-value="Abbrechen"
data-click="nli\_customer\_data\_CancelButton\_click(event)">\
<input type="button" class="button button-secondary"
value="Abbrechen">\
</div>\
</div>\
</div>
