De schermen

Dit is de langste etappe van de handleiding, en degene die de app een gezicht geeft. Aan het einde hebt u vier schermen ontworpen die werken op de echte gegevens van het model: een Início met indicatoren en een grafiek, een lijst met Contas, een Ficha de Conta die opslaat, en een bord met Oportunidades met sleepbare kaarten.

Vóór de schermen is er echter een korte stap die hen mogelijk maakt.

#Eerst de tabel-API's

Een scherm praat niet met de database. Het praat met datastores — de gegevenshouders van elk scherm — en de datastores lezen en schrijven via de tabel-API's van de app. Een tabel-API wijst naar een entiteit van het model en genereert vanzelf de lees- en schrijfbewerkingen.

We maken er drie, één per entiteit:

1. Kies het paneel Code in de zijbalk.
2. Klik op de regel API's op de + (Nieuwe API).
3. Schrijf bij Naam contas. De naam is de basis van de bewerkingen (getContas, addContas, updateContas, deleteContas) — geef hem daarom geen voorvoegsels als get of listar.
4. Klik op API aanmaken. De bouwer opent op het tabblad Bouwen.
5. Kies in de sectie Pipeline het blok Tabel.
6. Kies in het veld Tabel Dados CRM ▸ Contas.
7. Laat bij Beschikbaar gestelde acties Select, Insert, Update en Delete aangevinkt — het CRM heeft alle vier nodig.
8. Laat Openbare toegang (zonder sessie) helemaal uitgeschakeld: deze app is voor wie een sessie heeft.
9. Controleer bij Opgenomen velden dat de velden zijn aangevinkt die de schermen gaan gebruiken. Voor de accounts zijn dat ze allemaal.
10. Zet de schakelaar Gepubliceerd aan en klik op Opslaan.

Herhaal dit voor de andere twee:

API	Entiteit	Acties	Opmerkingen
contas	Contas	Select, Insert, Update, Delete	Alle velden.
contactos	Contactos	Select, Insert, Update, Delete	Inclusief de navigator conta (alleen het veld nome).
oportunidades	Oportunidades	Select, Insert, Update, Delete	Inclusief de navigator conta (alleen het veld nome).

De navigators zijn wat het mogelijk maakt om de naam van de account naast een opportuniteit te tonen zonder één regel SQL te schrijven: vink ze aan in de lijst met opgenomen velden, en het veld conta.nome is voortaan beschikbaar op de schermen.

#De vier schermen aanmaken

De schermen leven in het paneel UI, in de sectie Schermen.

1. Kies het paneel UI in de zijbalk.
2. Klik op de regel Schermen op de knop Nieuw scherm.
3. Schrijf de naam en bevestig met Aanmaken. Het scherm opent meteen in de werkruimte.

Maak alle vier in één keer aan, in deze volgorde:

Naam van het scherm	Route	Wat het gaat worden
Início	/inicio	Het commerciële paneel, met indicatoren en grafiek.
Contas	/contas	De lijst met accounts.
Ficha de Conta	/ficha-de-conta	Het formulier van een account.
Oportunidades	/oportunidades	Het kanbanbord.

De Route wordt uit de naam afgeleid en is te zien (en te bewerken) in de inspector, wanneer er geen enkele widget is geselecteerd. Laat ze zoals ze zijn — de handleiding verwijst er verderop naar.

#Het scherm Início — het commerciële paneel

Open het scherm Início. Het ontwerp heeft vier onderdelen: een titel, een band met indicatoren, een grafiek en een tabel.

#De titel

1. Sleep een Label uit het palet naar de bovenkant van het canvas.
2. Schrijf in de categorie Inhoud van de inspector de tekst Commercieel paneel.
3. Verhoog in de categorie Uiterlijk de Grootte van de tekst — het is de titel van de pagina.

#De band met indicatoren

Vier getallen naast elkaar maakt u met één widget KPI met vier indicatoren, niet met vier widgets: de uitlijning en de tussenruimte zijn dan gegarandeerd.

1. Sleep een KPI onder de titel en rek hem over de volle breedte uit.
2. In de categorie Gegevens begint de sectie Indicatoren met één indicator. Gebruik Indicator toevoegen tot u er vier hebt.
3. Elke indicator heeft een Label, een icoon, een Eigen gegevensset (zijn datastore) en een waarde met Aggregatie.

Stel ze zo in:

Label	Datastore (tabel-API)	Filter	Waarde
Actieve accounts	contas	—	Aantal van id
Open opportuniteiten	oportunidades	fase ≠ fechada_ganha en fase ≠ fechada_perdida	Aantal van id
Waarde in pipeline	oportunidades	hetzelfde filter	Som van valor
Gesloten dit kwartaal	oportunidades	fase = fechada_ganha	Som van valor

Open bij de twee geldindicatoren de Notatie en kies de munt EUR met nul decimalen — 475.850 leest beter dan 475850.

#De grafiek

1. Sleep een Grafiek naar de linkerhelft, onder de KPI.
2. Maak in de categorie Gegevens de lijst-datastore op de API oportunidades.
3. Kies bij Type grafiek Staven.
4. Kies bij Categorieveld (X-as / segmenten) fase.
5. Voeg bij Waardevelden valor toe.
6. Zet in de categorie Uiterlijk Titel tonen aan en schrijf Pipeline per fase.

#De tabel met eerstvolgende sluitingen

1. Sleep een Tabel naar de rechterhelft, naast de grafiek.
2. Maak in de categorie Gegevens de lijst-datastore op oportunidades, met het filter van de open fasen (hetzelfde als bij de indicatoren), gesorteerd op data_fecho oplopend en Per pagina op 8.
3. Bepaal in de categorie Gegevens, sectie Kolommen, vier kolommen:

Veld	Kop
titulo	Opportuniteit
conta.nome	Account
valor	Waarde (€)
data_fecho	Sluiting

4. Zet Titel tonen aan en schrijf Eerstvolgende sluitingen.

#Het scherm Contas — de lijst

Open het scherm Contas. Het zijn drie widgets.

1. Een Label bovenaan, met de tekst Accounts.
2. Een Knop in de rechterbovenhoek: in de categorie Inhoud de tekst Nieuwe account en het icoon plus.
3. Een Tabel die de rest van het scherm vult. Maak in de categorie Gegevens de lijst-datastore op de API contas, gesorteerd op nome oplopend, en bepaal de kolommen:

Veld	Kop
nome	Naam
sector	Sector
cidade	Stad
telefone	Telefoon
email	E-mail
estado	Status

Nu ontbreken nog de twee gebaren die deze lijst ergens toe laten dienen. Beide schrijft u in de categorie Gebeurtenissen, in TypeScript:

Op de Knop, in de gebeurtenis onClick — de lege fiche openen om aan te maken:

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

Op de Tabel, in de gebeurtenis onRowClick — de fiche van de aangeklikte rij openen:

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

#Het scherm Ficha de Conta — het formulier

Dit is het scherm met de meeste onderdelen, en het scherm dat het best laat zien hoe de gegevens werken. Open het scherm Ficha de Conta.

#De parameter van de route

1. Klik op een leeg deel van het canvas — de inspector toont voortaan het scherm.
2. Klik in de sectie Routeparameters op + parameter toevoegen en schrijf id.
3. Laat Verplicht uitgeschakeld. Dat is met opzet: zonder id opent het scherm leeg, en zo dient hetzelfde formulier om een nieuwe account aan te maken.

De Route wordt daarmee /ficha-de-conta/:id.

#De twee datastores van het scherm

Nog steeds met het scherm geselecteerd, in de categorie Gegevens:

1. Klik op + record. Klik op de aangemaakte datastore om het venster Datastore instellen te openen.
2. Schrijf bij Naam van de datastore conta.
3. Kies bij Tabel-API contas.
4. Klik bij Welk record te laden (sleutel) op + sleutelveld en bouw de voorwaarde: veld id, operator eq, waarde Param ▸ id.
5. Laat Automatisch laden aan en sluit af met Voltooid.

Nu de tweede, voor de contactpersonen van de account:

1. Klik op + lijst en open hem.
2. Naam contactosConta, Tabel-API contactos.
3. Voeg bij Filters (where) toe: veld conta_id, operator eq, waarde Param ▸ id.
4. Sorteer op nome oplopend.

#Het formulier

1. Sleep een Paneel naar de linkerkant van het canvas. Zet in de categorie Uiterlijk Titel tonen aan en schrijf Bedrijfsgegevens.
2. Sleep de Tekstvakken in het paneel — een widget binnen een paneel loslaten maakt hem een kind ervan. Schrijf voor elk vak in de categorie Inhoud het label en kies in de categorie Gegevens, sectie Gegevenskoppeling, de datastore conta en het veld:

Label	Veld	Verplicht
Naam	nome	ja
Btw-nummer	nif	nee
Sector	sector	nee
Stad	cidade	nee
Telefoon	telefone	nee
E-mail	email	nee

3. Gebruik voor de status een Keuzelijst in plaats van een tekstvak: label Status, gekoppeld aan conta ▸ estado, Verplicht aan, en statische opties:

Waarde	Label
ativo	Actief
prospeto	Prospect
inativo	Inactief

4. Sleep een Tabel naar de rechterkant van het paneel, gekoppeld aan de datastore contactosConta, met de kolommen nome (Naam), cargo (Functie) en telefone (Telefoon), en de titel Contactpersonen van deze account.

#Opslaan en terug

Twee Knoppen onder het paneel, met hun eigen gebeurtenis onClick:

Opslaan (icoon save):

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

Terug (icoon arrow-left):

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

save() valideert eerst — verplichte velden en regels — en slaat pas op als alles slaagt; hij geeft true terug wanneer hij heeft opgeslagen. Daarom staan de melding en de navigatie binnen de if.

#Het scherm Oportunidades — het kanbanbord

Open het scherm Oportunidades.

1. Een Label bovenaan, met de tekst Opportuniteiten.
2. Sleep een Kanban eronder, over de volle breedte.
3. Maak in de categorie Gegevens de lijst-datastore op de API oportunidades (zonder filter — het bord toont alles), met Per pagina op 50.
4. Kies bij Statusveld (kolom) fase. Dit veld zegt in welke kolom elke kaart leeft — en het is wat er wordt geschreven wanneer iemand een kaart sleept.
5. Kies bij Bron van de kolommen Statisch en gebruik + kolom toevoegen zes keer:

Waarde	Label	Kleur
prospecao	Prospectie	grijs
qualificacao	Kwalificatie	blauw
proposta	Voorstel	amber
negociacao	Onderhandeling	paars
fechada_ganha	Gewonnen	groen
fechada_perdida	Verloren	rood

6. Zet Kaarten mogen worden gesleept en Aantal kaarten aan; laat Kolom voor zonder categorie uit.
7. Zeg bij Sjabloon van de kaart wat elke kaart toont:

Veld	Rol
titulo	Titel
conta.nome	Bijschrift
valor	Waarde

8. Voeg onder het bord een Tabel toe met de titel Alle opportuniteiten, gekoppeld aan een lijst-datastore op oportunidades, met de kolommen titulo, conta.nome, valor, fase, data_fecho en responsavel.

#Het resultaat bekijken

Er is geen opslaanknop op de schermen: de wijzigingen worden vanzelf opgeslagen, en de rechterbovenhoek zegt hoe het ervoor staat (Bezig met opslaan…, Opgeslagen).

Om het scherm echt te zien, klikt u op Voorbeeld: het platform slaat op wat nog openstaat en opent het scherm in de echte app, in een nieuw tabblad van de browser. U komt langs het aanmelden zoals elke gebruiker — de accounts die de app binnenkomen, worden aangemaakt in de etappe Publiceren en gebruiken, en tot dan kunt u gebruiken wat er al is.

#Waarom niet…?

• Waarom verschijnt mijn API niet in de lijst met datastores? De API staat in concept. Open haar en zet Gepubliceerd aan.
• Waarom opent er altijd een lege fiche? De record-datastore heeft geen voorwaarden bij Welk record te laden (sleutel), of de parameter id komt niet aan via de route. Controleer dat de route /ficha-de-conta/:id is.
• Waarom zie ik de kolom conta.nome niet? De navigator staat niet bij de Opgenomen velden van de tabel-API — of de datastore is ingesteld voordat u hem aanvinkte. Open Datastore instellen opnieuw en kies de API nog een keer om het portret van de velden te verversen.
• Waarom laat de kanban niet slepen? De primaire sleutel ontbreekt in de datastore, of de actie Update ontbreekt in de tabel-API.
• Waarom is de grafiek leeg? Het Categorieveld of de Waardevelden zijn niet gekozen — of het filter van de datastore laat geen enkele rij door.

De schermen bestaan, maar er is nog geen manier om ertussen te springen. Volgende etappe: navigatie en thema.