Summary
Listen liefern eine gute Übersicht. Sie sind breit und leere Zellen stören. Warum nicht Datenkarten in einer Zelle?
Lists are a proven way displaying data. They are wide and empty cells make them less readable. A pledge for card-cells.
Listen machen Daten übersichtlich. Tabellen klassifizieren Datenelemente und packen jedes in seine Zelle. Leere Zellen stehen für unbekannt. Das ist der Charme einer Tabellenkalkulation: damit kann jeder umgehen. Darum ist Excel die beste Datenbank für viele, aufs Rechnen kommt es ihnen nicht an.
Listboxen in 4D sind ebenfalls Tabellen die auflisten. Mir sind Listboxen unverzichtbares Objekt zur Gestaltung meiner Oberflächen. Für mich haben sie den Vorteil, das sie gut handzuhaben sind.
Doch mir fehlt die Gestaltungsfreiheit in der Zelle. Die variable Zeilenhöhe für Listboxen ist angekündigt, ich brauche was anderes. Meistenteils habe ich in der Breite weniger Platz als ich Spalten brauchte. Nicht jeder Datensatz füllt in allen Spalten jede Zelle. Viele Zellen bleiben leer und das ist die reine Platzverschwendung.
Im Screenshot rechts habe ich eine Liste mit Datensätzen. Es sind Personen und deren Adresse, sowie Telefon und eMail. Habe ich ein Bild der Person, stelle ich es links vom Datensatz dar. Das ist eine Listbox, ihr Platzbedarf ist ökonomisch. Rechts davon werden Detaildaten zur Auswahl in der Listbox angezeigt und sind editierbar.
Stellen Sie sich diese Information in einer normalen Tabelle vor. Meine Listbox braucht weniger Breite. Leere Datenzellen gibt es auch hier, verbraten weniger Platz. Keine variable Zeilenhöhe juckt mich nicht.
Wie wird diese Darstellung erzeugt?
4D stellt SVG in Bildern dar. Das ist also eine Listbox-Spalte vom Datentyp Bild. Den Textteil des Bildes erzeuge ich aus SVG und addiere es zu einem vorhandenen Foto.
Das hier verwendete SVG ist sehr einfach.
Anstatt Stilformaten werden die Eigenschaften im Objekt gesetzt. Der Inhalt aus dem Datenfeld wird in Variablen zusammengesetzt, denn svgMainName setzt sich zusammen aus Titel + Vorname(n) + Nachname. In svgSecondaryName steht der Firmenname oder die beiden Variablen tauschen ihren Inhalt, wenn es eine Firmen- und keine Personenadresse ist. Etiketten zu Fon, Fax, eMail werden nur zu vorhandenen Daten eingefügt. Dieses Zusammenfassen von Datenfeldern ist mir ein wichtiges Aufhübschen von Daten.
PROCESS 4D TAGS entfaltet diese Variablen in das SVG und das SVG wird in einem Datenfeld vom Typ Bild aufgehoben. Ändert sich eines der Datenfelder, wird das SVG neu erzeugt.
Ich könnte das Bild der Person ebenfalls direkt in das SVG einbinden. Base64-codiert sparte es mir das hantieren mit Pfaden zu externen Bildern. Der Weg ist umständlicher als in 4D nötig. Habe ich im Datensatz ein Bild der Person, so addiere ich das Thumbnail dieses Bildes zu dem SVG des Datensatzes.
Die Adress-Daten sind relativ statisch, darum hebe ich die Darstellung im Datensatz auf. Damit ist die Listbox über SELECTION TO ARRAY oder eine Auswahl-Listbox sofort gefüllt.
Hätte ich auch gerne
Klicke ich eine Listbox-Zelle an, wird die gesamte Listbox-Zeile ausgewählt. Das hält mich davon ab, Datensatz-Raster, wie ich sie in HTML-Seiten verwende, in Listboxen darzustellen.
In diesem Beispiel ist auch die Hintergrundfarbe der Karte bereits Information: gelb hat die Eigenschaft OTC und hellblau bedeutet außer Vertrieb. In der Listbox würde die gesamte Zeile ausgewählt gesetzt, wollte ich den merken-Haken eines Medikamentes setzen. Um das zu vermeiden, müßte ich mit viel Code drumherum arbeiten und es sähe doch nicht richtig aus. Das will ich nicht.
Feature request
Es ist gut, daß die variable Zeilenhöhe kommt. Ich könnte mehr anfangen mit Array-Spalten vom Typ WebArea.
Alternativ nähme ich ARRAY OBJECT-Spalten. Es ist für 4D View Pro vorgesehen, über JSON-Strukturen je Zelle einen anderen Inhalt haben zu können. Text, Zahlen mit min und max, Buttons und Popups, … hier ein Bild aus dem How do I-Beispiel Array_Object_LiBo.
Ich brauchte JSON-Strukturen, die mehr können als einen Oberflächen-Element darzustellen. Also das was ich mit HTML und CSS in der Web-Seite oder der WebArea erreiche.
Ins Laufen kommen
Wollen Sie in SVG starten und brauchen eine Starthilfe, dann melden Sie sich.
Lists are indispensable to display my data. Table lists are even better, packen single elements into to the appropriate cell of the table. Empty cells mean unknown in this case. That’s why people love spreadsheets: everybody knows how to use … sort of. Excel is that tool, many people use without any calculation included. 4D listboxes are synonym for the data-table use.
Listboxes are indispensable for a modern user-interface. I like them very much, because listboxes are easy to work with.
I’m missing more display-capabilities inside a cell. Variable rowheight for listboxes is announced. Nice to have, but I need something better. In many cases the real estate available is less wide than I need for all the rows. Horizontal scrollbar is a crutch then. Even worse all those empty cells, telling me which data I still don’t have. Variable rowheight for list boxes adds to the empty space. A horrendous waste of space, anyway.
The screenshot to the right is a list of records, listing people and their addresses, phone and email. Do I have a picture of that person, it’s added to the left of the text. Looks pretty nice for that narrow column.
Just imagine displaying that much data inside a normale tableview. My listbox is much narrower. Even unavailable data doesn’t look that empty. Non-variable rowheight is a non-issue here.
How to do?
To display an SVG inside 4D you need to use a picture. Therefore this is a listbox-column of type picture. The textual SVG-part of the picture is added to an existing photo, when available. This is playing with 4Ds multi-aspect of SVGs.
The actual SVG used is pretty simple. No style sheet, just plain attributes setted. The fieldcontent is concatenated into variables like svgMainName which combines title + name(s) + familyname. svgSecondaryName takes the companyname oder both variables exchange their content, if this is a company- and not private-address. Labels for phone, fax, email are only used when data is available. I call this the icing on the data-cake.
PROCESS 4D TAGS fills the SVG with data-content. The resulting SVG is stored inside a field of type picture. With any change of the fields used, the SVG is recreated.
I could even include the foto of the person directly into the SVG. Base64-coding would save me from getting frustrated from paths to external files which hardly work. This is more complicated than necessary inside 4D. Much easier to combine the thumbnail of a picture of the person to the SVG.
Address-data is pretty static. So it made sense to store the combined pictures inside a field of the table. Which makes the listbox easy to fill by SELECTION TO ARRAY and a selection-based one means ow work at all.
Even better
In this data-grid the background-colour is part of the information display: yellow means this is a OTC-product while lightblue means not for sale any more. Selecting a listbox-cell highlights the whole row. Checking the merken-checkbox would highlight the listbox-row, too. This keeps me from using data-grids inside listboxes as I do on HTML-pages.
Feature request
Variable row-height is a nice extension to list boxes. I’d prefer Array-columns of type WebArea.
A more realistic solution could be ARRAY OBJECT-column enhancements. As a 4D View Pro-feature announced, JSON-struktures define cell content, which means different content for each cell. Text, numbers with min and max, buttons and popups, … shown by a screenshot of How do I-example Array_Object_LiBo.
For my purpose I’d need JSON-struktures, that can display more than one UI-element. Comparable to what can be achieved by HTML and CSS on a web-page or inside a 4D web area.
Getting a headstart
Up and running soon? Contact me by mail.