Die Bildschirme

Das ist die längste Etappe des Leitfadens und die, die der App ein Gesicht gibt. Am Ende haben Sie vier Bildschirme entworfen, die auf den echten Daten des Modells laufen: ein Início mit Kennzahlen und einem Diagramm, eine Liste Contas, eine Ficha de Conta, die speichert, und ein Board Oportunidades mit Karten, die sich ziehen lassen.

Vor den Bildschirmen steht allerdings ein kurzer Schritt, der sie erst möglich macht.

#Zuerst die Tabellen-APIs

Ein Bildschirm spricht nicht mit der Datenbank. Er spricht mit Datastores — den Datencontainern jedes Bildschirms — und die Datastores lesen und schreiben über die Tabellen-APIs der App. Eine Tabellen-API zeigt auf eine Entität des Modells und erzeugt von allein die Operationen zum Lesen und Schreiben.

Wir erstellen drei, eine pro Entität:

1. Wählen Sie in der Seitenleiste das Panel Code.
2. Klicken Sie in der Zeile APIs auf das + (Neue API).
3. Schreiben Sie in Name contas. Der Name ist die Basis der Operationen (getContas, addContas, updateContas, deleteContas) — geben Sie ihm deshalb keine Präfixe wie get oder listar.
4. Klicken Sie auf API erstellen. Der Builder öffnet sich im Tab Aufbau.
5. Wählen Sie im Abschnitt Pipeline den Block Tabelle.
6. Wählen Sie im Feld Tabelle Dados CRM ▸ Contas.
7. Lassen Sie unter Bereitgestellte Aktionen Select, Insert, Update und Delete angehakt — das CRM braucht alle vier.
8. Lassen Sie Öffentlicher Zugriff (ohne Sitzung) vollständig ausgeschaltet: Diese App ist für Menschen mit angemeldeter Sitzung.
9. Prüfen Sie unter Enthaltene Felder, dass die Felder markiert sind, die die Bildschirme verwenden werden. Für die Konten sind es alle.
10. Schalten Sie den Schalter Veröffentlicht ein und klicken Sie auf Speichern.

Wiederholen Sie es für die anderen beiden:

API	Entität	Aktionen	Anmerkungen
contas	Contas	Select, Insert, Update, Delete	Alle Felder.
contactos	Contactos	Select, Insert, Update, Delete	Enthält den Navigator conta (nur das Feld nome).
oportunidades	Oportunidades	Select, Insert, Update, Delete	Enthält den Navigator conta (nur das Feld nome).

Die Navigators sind das, was es erlaubt, den Namen des Kontos neben einer Verkaufschance zu zeigen, ohne eine Zeile SQL zu schreiben: Markieren Sie sie in der Liste der enthaltenen Felder, und das Feld conta.nome steht in den Bildschirmen zur Verfügung.

#Die vier Bildschirme erstellen

Die Bildschirme leben im Panel UI, im Abschnitt Bildschirme.

1. Wählen Sie in der Seitenleiste das Panel UI.
2. Klicken Sie in der Zeile Bildschirme auf den Button Neuer Bildschirm.
3. Schreiben Sie den Namen und bestätigen Sie mit Erstellen. Der Bildschirm öffnet sich sofort im Arbeitsbereich.

Erstellen Sie alle vier auf einmal, in dieser Reihenfolge:

Name des Bildschirms	Route	Was er werden soll
Início	/inicio	Das Vertriebspanel, mit Kennzahlen und Diagramm.
Contas	/contas	Die Liste der Konten.
Ficha de Conta	/ficha-de-conta	Das Formular eines Kontos.
Oportunidades	/oportunidades	Das Kanban-Board.

Die Route wird aus dem Namen abgeleitet und ist im Inspektor zu sehen (und zu bearbeiten), wenn kein Widget ausgewählt ist. Lassen Sie sie, wie sie sind — der Leitfaden bezieht sich später auf sie.

#Der Bildschirm Início — das Vertriebspanel

Öffnen Sie den Bildschirm Início. Das Design hat vier Teile: einen Titel, einen Streifen mit Kennzahlen, ein Diagramm und eine Tabelle.

#Der Titel

1. Ziehen Sie eine Beschriftung aus der Palette an den oberen Rand des Canvas.
2. Schreiben Sie in der Kategorie Inhalt des Inspektors den Text Vertriebspanel.
3. Erhöhen Sie in der Kategorie Aussehen die Größe des Textes — es ist der Titel der Seite.

#Der Streifen mit Kennzahlen

Vier Zahlen nebeneinander macht man mit einem Widget KPI mit vier Indikatoren, nicht mit vier Widgets: Ausrichtung und Abstände sind damit garantiert.

1. Ziehen Sie ein KPI unter den Titel und ziehen Sie es auf die volle Breite.
2. In der Kategorie Daten beginnt der Abschnitt Indikatoren mit einem Indikator. Nutzen Sie Indikator hinzufügen, bis Sie vier haben.
3. Jeder Indikator hat eine Beschriftung, ein Symbol, eine Eigene Datenmenge (seinen Datastore) und einen Wert mit Aggregation.

Konfigurieren Sie sie so:

Beschriftung	Datastore (Tabellen-API)	Filter	Wert
Aktive Konten	contas	—	Anzahl von id
Offene Verkaufschancen	oportunidades	fase ≠ fechada_ganha und fase ≠ fechada_perdida	Anzahl von id
Wert in der Pipeline	oportunidades	derselbe Filter	Summe von valor
In diesem Quartal abgeschlossen	oportunidades	fase = fechada_ganha	Summe von valor

Öffnen Sie bei den beiden Geldindikatoren das Format und wählen Sie die Währung EUR mit null Nachkommastellen — 475.850 liest sich besser als 475850.

#Das Diagramm

1. Ziehen Sie ein Diagramm in die linke Hälfte, unter das KPI.
2. Erstellen Sie in der Kategorie Daten den Listen-Datastore auf der API oportunidades.
3. Wählen Sie unter Typ des Diagramms die Option Balken.
4. Wählen Sie unter Kategoriefeld (X-Achse / Segmente) das Feld fase.
5. Fügen Sie unter Wertfelder valor hinzu.
6. Schalten Sie in der Kategorie Aussehen Titel anzeigen ein und schreiben Sie Pipeline nach Phase.

#Die Tabelle der nächsten Abschlüsse

1. Ziehen Sie eine Tabelle in die rechte Hälfte, neben das Diagramm.
2. Erstellen Sie in der Kategorie Daten den Listen-Datastore auf oportunidades, mit dem Filter der offenen Phasen (demselben wie bei den Kennzahlen), sortiert nach data_fecho aufsteigend und Pro Seite auf
3. Definieren Sie in der Kategorie Daten, Abschnitt Spalten, vier Spalten:

Feld	Überschrift
titulo	Verkaufschance
conta.nome	Konto
valor	Wert (€)
data_fecho	Abschluss

4. Schalten Sie Titel anzeigen ein und schreiben Sie Nächste Abschlüsse.

#Der Bildschirm Contas — die Liste

Öffnen Sie den Bildschirm Contas. Es sind drei Widgets.

1. Eine Beschriftung oben, mit dem Text Konten.
2. Ein Button in der oberen rechten Ecke: in der Kategorie Inhalt der Text Neues Konto und das Symbol plus.
3. Eine Tabelle, die den Rest des Bildschirms einnimmt. Erstellen Sie in der Kategorie Daten den Listen-Datastore auf der API contas, sortiert nach nome aufsteigend, und definieren Sie die Spalten:

Feld	Überschrift
nome	Name
sector	Branche
cidade	Stadt
telefone	Telefon
email	E-Mail
estado	Status

Es fehlen noch die zwei Gesten, die diese Liste zu etwas nütze machen. Beide schreibt man in der Kategorie Ereignisse, in TypeScript:

Beim Button, im Ereignis onClick — das leere Datenblatt öffnen, um anzulegen:

keplin.nav.go("/ficha-de-conta");

Bei der Tabelle, im Ereignis onRowClick — das Datenblatt der angeklickten Zeile öffnen:

keplin.nav.go("/ficha-de-conta/" + keplin.event.row.id);

#Der Bildschirm Ficha de Conta — das Formular

Das ist der Bildschirm mit den meisten Teilen und der, der am besten zeigt, wie die Daten funktionieren. Öffnen Sie den Bildschirm Ficha de Conta.

#Der Parameter der Route

1. Klicken Sie auf eine leere Stelle des Canvas — der Inspektor zeigt nun den Bildschirm.
2. Klicken Sie im Abschnitt Routen-Parameter auf + Parameter hinzufügen und schreiben Sie id.
3. Lassen Sie Erforderlich ausgeschaltet. Das ist Absicht: Ohne id öffnet der Bildschirm leer, und genau so dient dasselbe Formular dazu, ein neues Konto anzulegen.

Die Route lautet nun /ficha-de-conta/:id.

#Die zwei Datastores des Bildschirms

Noch immer mit ausgewähltem Bildschirm, in der Kategorie Daten:

1. Klicken Sie auf + Datensatz. Klicken Sie auf den erstellten Datastore, um das Modal Datastore konfigurieren zu öffnen.
2. Schreiben Sie in Name des Datastores conta.
3. Wählen Sie unter Tabellen-API contas.
4. Klicken Sie unter Welcher Datensatz geladen wird (Schlüssel) auf + Schlüsselfeld und bauen Sie die Bedingung: Feld id, Operator eq, Wert Param ▸ id.
5. Lassen Sie Automatisch laden eingeschaltet und schließen Sie mit Fertig.

Nun der zweite, für die Kontakte des Kontos:

1. Klicken Sie auf + Liste und öffnen Sie ihn.
2. Name contactosConta, Tabellen-API contactos.
3. Fügen Sie unter Filter (where) hinzu: Feld conta_id, Operator eq, Wert Param ▸ id.
4. Sortieren Sie nach nome aufsteigend.

#Das Formular

1. Ziehen Sie ein Panel in die linke Hälfte des Canvas. Schalten Sie in der Kategorie Aussehen Titel anzeigen ein und schreiben Sie Daten des Unternehmens.
2. Ziehen Sie die Textfelder in das Panel hinein — ein Widget innerhalb eines Panels loszulassen macht es zu dessen Kind. Schreiben Sie für jedes in der Kategorie Inhalt die Beschriftung und wählen Sie in der Kategorie Daten, Abschnitt Datenbindung, den Datastore conta und das Feld:

Beschriftung	Feld	Erforderlich
Name	nome	ja
Steuernummer	nif	nein
Branche	sector	nein
Stadt	cidade	nein
Telefon	telefone	nein
E-Mail	email	nein

3. Nehmen Sie für den Status eine Auswahlliste statt eines Textfelds: Beschriftung Status, gebunden an conta ▸ estado, Erforderlich eingeschaltet, und feste Optionen:

Wert	Beschriftung
ativo	Aktiv
prospeto	Interessent
inativo	Inaktiv

4. Ziehen Sie eine Tabelle rechts neben das Panel, gebunden an den Datastore contactosConta, mit den Spalten nome (Name), cargo (Position) und telefone (Telefon) und dem Titel Kontakte dieses Kontos.

#Speichern und zurück

Zwei Buttons unter dem Panel, mit dem jeweiligen Ereignis onClick:

Speichern (Symbol save):

const ok = await keplin.data.store("conta").save();
if (ok) {
  keplin.ui.toast("Konto gespeichert");
  keplin.nav.go("/contas");
}

Zurück (Symbol arrow-left):

keplin.nav.go("/contas");

save() validiert zuerst — Pflichtfelder und Regeln — und speichert nur, wenn alles durchgeht; es gibt true zurück, wenn gespeichert wurde. Deshalb stehen der Hinweis und die Navigation innerhalb des if.

#Der Bildschirm Oportunidades — das Kanban-Board

Öffnen Sie den Bildschirm Oportunidades.

1. Eine Beschriftung oben, mit dem Text Verkaufschancen.
2. Ziehen Sie ein Kanban darunter, über die volle Breite.
3. Erstellen Sie in der Kategorie Daten den Listen-Datastore auf der API oportunidades (ohne Filter — das Board zeigt alles), mit Pro Seite auf 50.
4. Wählen Sie unter Statusfeld (Spalte) das Feld fase. Dieses Feld sagt, in welcher Spalte jede Karte lebt — und es ist das, was geschrieben wird, wenn jemand eine Karte zieht.
5. Wählen Sie unter Quelle der Spalten die Option Statisch und nutzen Sie + Spalte hinzufügen sechsmal:

Wert	Beschriftung	Farbe
prospecao	Akquise	grau
qualificacao	Qualifizierung	blau
proposta	Angebot	bernstein
negociacao	Verhandlung	lila
fechada_ganha	Gewonnen	grün
fechada_perdida	Verloren	rot

6. Schalten Sie Karten ziehen erlauben und Anzahl der Karten ein; lassen Sie Spalte „Ohne Kategorie“ ausgeschaltet.
7. Sagen Sie unter Vorlage der Karte, was jede Karte zeigt:

Feld	Rolle
titulo	Titel
conta.nome	Beschriftung
valor	Wert

8. Fügen Sie unter dem Board eine Tabelle mit dem Titel Alle Verkaufschancen hinzu, gebunden an einen Listen-Datastore auf oportunidades, mit den Spalten titulo, conta.nome, valor, fase, data_fecho und responsavel.

#Das Ergebnis ansehen

In den Bildschirmen gibt es keinen Speichern-Button: Die Änderungen speichern sich von allein, und die obere rechte Ecke sagt, wie es steht (Wird gespeichert…, Gespeichert).

Um den Bildschirm in echt zu sehen, klicken Sie auf Vorschau: Die Plattform speichert, was noch aussteht, und öffnet den Bildschirm in der echten App, in einem neuen Tab des Browsers. Sie gehen wie jeder Benutzer durch das Login — die Konten, die in die App hereinkommen, werden in der Etappe Veröffentlichen und nutzen angelegt, und bis dahin können Sie das nehmen, was es schon gibt.

#Warum nicht…?

• Warum erscheint meine API nicht in der Liste der Datastores? Die API ist ein Entwurf. Öffnen Sie sie und schalten Sie Veröffentlicht ein.
• Warum öffnet sich immer ein leeres Datenblatt? Der Datensatz-Datastore hat keine Bedingungen unter Welcher Datensatz geladen wird (Schlüssel), oder der Parameter id kommt nicht über die Route an. Prüfen Sie, dass die Route /ficha-de-conta/:id lautet.
• Warum sehe ich die Spalte conta.nome nicht? Der Navigator ist nicht in den Enthaltenen Feldern der Tabellen-API enthalten — oder der Datastore wurde konfiguriert, bevor Sie ihn markiert haben. Öffnen Sie Datastore konfigurieren erneut und wählen Sie die API noch einmal, um das Abbild der Felder aufzufrischen.
• Warum lässt das Kanban nicht ziehen? Es fehlt der Primärschlüssel im Datastore oder die Aktion Update in der Tabellen-API.
• Warum ist das Diagramm leer? Das Kategoriefeld oder die Wertfelder sind nicht gewählt — oder der Filter des Datastores lässt keine einzige Zeile durch.

Die Bildschirme existieren, aber es gibt noch keinen Weg, zwischen ihnen zu springen. Nächste Etappe: Navigation und Theme.