Das HTML-Frontend von REWOO Scope ist eine Plattform, die zahlreiche Möglichkeiten bietet, Daten auf dem Desktop, Tablet oder Smartphone übersichtlich und klar strukturiert darzustellen.
Der Web-Client ist bereits auch ohne weiteren Modellieraufwand voll einsatzfähig. Dennoch können zusätzliche Anpassungen vorgenommen werden, um die User Experience auf den verschiedenen Geräten weiter auf die jeweiligen Erwartungen abzustimmen.
Dabei stehen hier die Möglichkeiten unterschiedlicher Sprachen und Frameworks zur Verfügung. Dazu gehören unter anderem:
Die meisten Konfigurationsmöglichkeiten finden sich im Designer auf den Seiten Layouts und Code.
Da Layouts, wie sie für den Desktop erstellt werden, auf kleineren Bildschirmen leicht überladen und unübersichtlich wirken, gibt es die Möglichkeit, die Aufteilung, Größe und Position von Feldern auf Mobil-Geräten anders darstellen zu lassen als auf Laptops und Desktops. Damit ist es möglich, für jede Auflösung ein optimiertes Datenblatt-Layout anzubieten.
Um für die unterschiedlichen Bildschirme zu entwerfen, kann man entweder rechts oben zwischen den vier Bildschirmklassen umschalten, um dann jeweils mit den Plus- und Minus-Buttons die einzelnen Spalten und Zeilen zu vergrößern oder zu verkleinern. Oder man öffnet bei einer Spalte oder Zeile mit dem Zahnrad die Layouteinstellungen. Dort kann man direkt für alle Bildschirmklassen die Größe ändern und weitere CSS-Klassen angeben.
Als Grundlage für das Layout verwendet REWOO Scope das Framework Bootstrap 3. Alle Regeln, Möglichkeiten und CSS-Klassen des Bootstrap-Gridsystems können hier verwendet werden (mehr Informationen dazu auf der offiziellen Bootstrap-Webseite).
HTML-ID - Zeilen und Spalten kann eine ID zugewiesen werden, um sie leichter mit CSS zu stylen oder per JavaScript darauf zugreifen zu können. Außerdem ist eine HTML-Id Voraussetzung, um in der Hilfe-Tour eine Erklärung für diesen Teil des Formulars zu speichern.
CSS-Klassen - Einzelnen Zeilen und Spalten können zusätzliche CSS-Klassen zugewiesen werden.
Size - Hiermit wird die Spaltenbreite für die einzelnen Geräteklassen festgelegt, wie es in Bootstrap getan wird. Die einzelnen Input-Felder stehen für die einzelnen Geräteklassen, von links nach recht: xs, sm, md, lg. Alle Regeln des Bootstrap-Gridsystems sind hier anwendbar.
Offset - Hiermit wird der Linksabstand einer Spalte für die einzelnen Geräteklassen festgelegt, wie es in Bootstrap getan wird. Die einzelnen Input-Felder stehen für die einzelnen Geräteklassen, von links nach recht: xs, sm, md, lg. Alle Regeln des Bootstrap-Gridsystems sind hier anwendbar.
Wenn ein altes Flex-Layout vorhanden ist, kann daraus automatisch ein HTML-Layout erstellt werden. Das erzeugte Layout kann anschließend weiter verändert und angepasst werden.
Das HTML-Frontend von REWOO Scope kommt mit einer dienlichen, schlichten und für Scope typischen Farbgebung. Diese kann allerdings an eigene Bedürfnisse angepasst werden. Änderung der Farbgebung und auch einige Anpassungen des Grunddesigns sind damit möglich. So lässt sich zum Beispiel ein eigenes Branding oder Logo anzeigen oder ein Corporate Design auf Scope anwenden.
Die Veränderungen müssen als CSS in Scope eingepflegt werden. Dafür stehen unterschiedliche Möglichkeiten zur Wahl:
Änderungen, die sich auf den gesamten Client auswirken sollen, können von einem Administrator als CSS direkt in der Konfiguration von REWOO Scope hinterlegt werden.
Nähere Hinweise dazu finden Sie im Kapitel Konfiguration im Technischen Handbuch.
.datasheet-role-tab {
max-width: 40em;
}
Wenn der Reiter statt dessen den ganzen Text anzeigen soll, wenn der Mauszeiger über den Reiter fährt, kann das mit folgendem Code erreicht werden
.datasheet-role-tab:hover {
text-overflow: clip;
white-space: normal;
word-break: break-all;
}
Über das globale CSS kann nicht nur das generelle Aussehen des Menüs, sondern auch die Anzahl der angebotenen Menüoptionen gesteuert werden. Hierzu wurde jedem Menüeintrag eine passende ID zugeordnet. Diese sind im Einzelnen:
menu-item-start
: Verweis auf die persönliche Startseite des Benutzersmenu-item-bookmarks
: Liste der Lesezeichenmenu-item-tables
: Verweis auf die Liste der Tabellenansichtenmenu-item-kanbans
: Verweis auf die Liste der Kanban-Tafelnmenu-item-calendars
: Verweis auf den Kalendermenu-item-inbox
: Verweis auf die Inboxmenu-item-navigator
: Verweis auf den Navigatormenu-item-search
: Verweis auf die Volltext-Suchseitemenu-item-back
: Zurück zur vorherigen Seitemenu-item-tools
: Verweis auf die Seite mit weiteren Werkzeugenmenu-item-logout
: Ausloggen des Benutzers#menu-item-inbox {
display: none;
}
Wichtig ist dabei, dass der Eintrag nur ausgeblendet wird. Kennt der Benutzer den konkreten Link zur gewünschten Seite, kann er diese natürlich weiterhin aufrufen.
Standardmäßig wird das Menü ausgeklappt am linken Rand dargestellt. Erst wenn der Bildschirm des Benutzers eine bestimmte Größe unterschreitet (z. B. auf einem Smartphone) wird das Menü eingeklappt und dafür in der linken oberen Ecke ein sogenannter "Sandwich-Button" dargestellt. Nach dem Klick auf diesen Button, wird das Menü wieder angezeigt. Über den in der Konfiguration einstellbaren Parameter mobile.menu.alwaysSandwich kann das Menü grundsätzlich eingeklappt dargestellt werden.
JavaScript-Code, der im gesamten Mobile-Client eingebunden werden soll, kann von einem Administrator direkt in der Konfiguration von REWOO Scope hinterlegt werden.
Nähere Hinweise dazu finden Sie im Kapitel Konfiguration im Technischen Handbuch.
setInterval(function() {
$('#save').each(function() {
if (!($(this).prop('disabled'))) {
console.log('Autosave');
$(this).submit();
}
});
}, 180000);
$('.privat-infos').each(function () {
if ($(this).find('.privat-infos-inhalt .content input').attr('value').trim().length == 0) {
$(this).hide();
}
});
Sollen mehrere Bedingungen geprüft werden, können die Bedingungen entsprechend erweitert werden. Hierbei muss jedoch für jedes weitere Inhalts-Feld eine eigene Klasse angegeben werden:
$('.privat-infos').each(function () {
if ($(this).find('.privat-infos-inhalt .content input').attr('value').trim().length == 0 && $(this).find('.privat-infos-inhalt2 .content input').attr('value').trim().length == 0) {
$(this).hide();
}
});
Soll ein mehrzeiliges String Feld zur Prüfung benutzt werden, so muss die Bedingung leicht modifiziert werden:
if ($(this).find('.privat-infos-inhalt .content div').text().trim().length == 0) {
var serie = document.getElementById("inverse_entry_171");
var details = document.getElementsByClassName("serientermin");
var seriewert = serie.getAttribute("value");
if (seriewert == 'false'){
for (var i=0;i<details.length;i+=1) {
details[i].style.display = "none";
}
}
$('#serientermincheck').change(function(){
seriewert = serie.getAttribute("value");
if (seriewert == 'true'){
for (var i=0;i<details.length;i+=1) {
details[i].style.display = "block";
}
} else {
for (var i=0;i<details.length;i+=1) {
details[i].style.display = "none";
}
}
})
(function() {
var disabledBtnCaptions = collectBtnCaptions($('.entry input[type="button"]:disabled, .entry button:disabled'));
function collectBtnCaptions(elements) {
var captions = [];
elements.each(function() {
captions.push(getBtnCaption(this));
});
return captions;
}
function getBtnCaption(element) {
if ($(element).is('input')) {
return $(element).attr('id');
}
return $(element).children().text();
}
$(document).on('headerBtnChanged', function (event, changedElementId) {
var changedBtn = $('#' + changedElementId);
if (changedBtn.attr('name') === 'save') {
var allSheetBtns = $('.entry.copybutton input[type="button"], .entry.actionbutton button, .entry.signature button, .entry.connectionbutton button, .entry.tableviewbutton input[type="button"]');
allSheetBtns.each(function() {
var caption = getBtnCaption(this);
var btn = $(this);
if (disabledBtnCaptions.indexOf(caption) > -1) {
return;
}
if (changedBtn.attr('disabled')) {
btn.removeAttr('disabled');
} else {
btn.attr('disabled', 'disabled');
}
});
}
});
})();
Validatoren ermöglichen die Überprüfung von Werten und Benutzereingaben nach vorgegebenen Regeln. Ist eine Benutzereingabe ungültig (zum Beispiel ein Wert zu klein oder zu lang), wird eine Fehlermeldung angezeigt und das Datenblatt lässt sich so lange nicht speichern, bis die Eingabe korrigiert wurde. Zur einfachen Definition solcher Validatoren bietet REWOO Scope eine eigene Validator-API an, die im Folgenden beschrieben wird.
Aktuell unterstützt werden String, Date und Number (Email-Felder haben von Haus aus einen Validator eingebaut, der auf gültige E-Mail-Adressen überprüft. Es muss also kein zusätzlicher Validator dafür erstellt werden). Ein Validator kann dabei sowohl für normale Felder, als auch für Felder innerhalb von Tabellen definiert werde.
addValidator("Feldname", function(value, context) {
if ( Bedingung ) {
return "Fehlermeldung";
}
return null;
});
Feldname - Der Name des zu validierenden Feldes.
Fehlermeldung - Die Nachricht (als String), die der Nutzer bei einer Fehleingabe zu sehen bekommt.
Bedingung - Hier findet die eigentliche Überprüfung statt, normalerweise in Form eines Vergleichs zwischen dem aktuellen Wert eines Feldes mit einem konstanten Wert oder einem anderen Feldwert. Da es sich dabei um einen herkömmlichen JavaScript-Ausdruck handelt, sind sämtliche Booleschen Ausdrücke erlaubt. Darüber hinaus können Bedingungen auch geschachtelt und kombiniert werden, oder mehrere unterschiedliche Checks innerhalb einer addValidator
-Funktion durchgeführt werden. Nachfolgend eine Auswahl der Wichtigsten von JavaScript unterstützten Vergleichsoperatoren:
Operator | Funktion |
== | ist gleich |
!= | ist nicht gleich |
< | ist kleiner als |
<= | ist kleiner gleich |
> | ist größer als |
>= | ist größer gleich |
Number- und Date-Felder verwenden
Feldwerte werden immer als String zurückgegeben. Wird allerdings ein Number- oder ein Date-Feld referenziert, muss dieser Wert erst in eine Zahl oder ein Datum konvertiert werden, um anschließend mit anderen Zahlen- und Datumswerten verglichen werden zu können. Dazu können die folgende Funktion verwendet werden (Einheiten werden dann ignoriert):toNumber(value)
toDate(value, format, language)
Anmerkung - Der toDate-Funktion müssen zusätzlich zum reinen Datumswert noch das vorliegende Datumsformat (z.B. "dd.mm.yyyy" für das deutsche Datumsformat) sowie eine Sprache (z.B. "de" für deutsch oder "en" für englisch) mitübergeben werden, um den String-Wert erfolgreich in einen Datumswert umwandeln zu können.
Vergleich mit einem anderen Feld
Innerhalb eineraddValidator
-Funktion lässt sich auch ein weiteres Feld auslesen, um es anschließend mit dem aktuellen Feld zu vergleichen. Hierfür kann die Funktion getValue benutzt werden, die folgende Signatur aufweist:
getValue(entryTitle[, context] [, notifyOnChanges])
Die Funktion weist zwei optionale Parameter auf. Dabei muss context
immer dann übergeben werden, wenn der referenzierte Feldname ein Feld innerhalb einer Tabelle darstellt (damit ersichtlich ist, was die aktuelle Zeile ist). Wir raten aber grundsätzlich zur Übergabe des Kontextes. Der Parameter notifyOnChanges
ist standardmäßig auf true
gesetzt. In diesem Fall führen auch Änderungen des referenzierten Feldes zu einer Neuauswertung der Validator-Funktion. Wird dies nicht gewünscht, muss der Parameter manuell auf false
gesetzt werden.
Soll der Wert eines normalen Feldes mit dem Titel Feldname ausgelesen werden, kann dies mit folgendem Aufruf realisiert werden:
getValue("Feldname")
Das nachfolgende Beispiel zeigt hingegen, wie man von einem Zellen-Validator aus den Wert einer weiteren Tabellen-Zelle (mit dem Spaltennamen Feld2) innerhalb derselben Zeile ausliest.
getValue("Feld2", context)
addValidator
-Funktion verdeutlichen. Wichtige Code-Teile sind farblich hervorgehoben.
addValidator("Auftragswert", function(value, context) {
if ( toNumber(value) < 0 ) {
return "Der Auftragswert darf nicht kleiner als 0 sein!";
}
return null;
});
addValidator("Zu beantragende Urlaubstage", function(value, context) {
if ( toNumber(value) <= 0 ) {
return "Bitte geben Sie eine gültige Tagesanzahl an!";
}
if ( toNumber(value) > 5 ) {
return "Es können nicht mehr als 5 Urlaubstage am Stück genommen werden.";
}
return null;
});
addValidator("Adresse für Lieferungen", function(value, context) {
var rechnungsadresse = getValue("Rechnungsadresse", context);
if ( value != rechnungsadresse ) {
return "Lieferadresse muss sein: " + rechnungsadresse;
}
return null;
});
addValidator("Stunden Arbeitsschritt", function(value, context) {
if ( toNumber(value) < toNumber(getValue("Gesamtstunden", context)) ) {
return "Sie können nicht mehr Stunden für den Arbeitsschritt aufwenden, als Sie insgesamt gearbeitet haben!";
}
return null;
});
Veto-Funktionen sind Validatoren recht ähnlich, allerdings hängen sie nicht an einem einzelnen Eingabe-Feld oder einer Tabelle, sondern können völlig losgelöst von Datenblatt-Inhalten das Speichern bzw. Kopieren eines Datenblatts verhindern. Veto-Funktionen werden grundsätzlich erst nach der Ausführung aller herkömmlichen Validatoren beachtet: melden diese bereits einen Fehler, wird das Ergebnis der Veto-Funktion ignoriert und auch nicht angezeigt.
Der folgende Beispielcode zeigt die Syntax beim Hinzufügen einer neuen Veto-Funktion als JavaScript über den Datenblatt-Designer (siehe Abschnitt "Zusätzliches JavaScript einbinden").
addVeto(Zielelement, function() {
if ( Bedingung ) {
return "Fehlermeldung";
}
return null;
}, Ereignis, Kontext-Selektor);
Zielelement - Ein Verweis auf das DOM-Element, welches im Falle eines Vetos die Fehlermeldung als Container beinhalten soll. Wichtig: das Ziel-Element muss zwingend die Klasse "form-group" aufweisen, u.U. muss diese Klasse dem Element zuvor noch per JavaScript dynamisch hinzugefügt werden.
Fehlermeldung - Die Nachricht (als String), die der Nutzer im Falle eines Vetos zu sehen bekommt.
Bedingung - Eine beliebige Bedingung, um zu entscheiden, ob ein Veto eingelegt werden soll oder nicht.
Ereignis (Optional) - Da eine Veto-Funktion nur dann neu ausgewertet wird, wenn auch herkömmliche Validatoren neu ausgewertet werden würden (z.B. bei der Eingabe eines Werts in ein Formularfeld), kann es notwendig werden, die Veto-Funktion auch bei anderen Gelegenheiten aufzurufen (beispielsweise beim Anklicken eines Steuerelements auf der Seite). Aus diesem Grund kann über diesen Parameter ein Ereignis angegeben werden, bei dem eine vollständige Neuauswertung der Validatoren (und damit auch der Veto-Funktionen) angestoßen werden soll. Das Ereignis muss als String angegeben werden, der von jQuery als "Event" interpretiert werden kann (siehe jQuery-Dokumentation).
Kontent-Selektor (Zwinged, wenn "Ereignis" angeben wird) - Gibt den Kontext an, innerhalb dessen auf das Ereignis gelauscht werden soll. Der Selektor muss als String angegeben werden, der von jQuery interpretiert werden kann