Skärmarna

Det här är guidens längsta etapp, och den som ger appen ett ansikte. I slutet har du fyra skärmar ritade och i drift ovanpå modellens riktiga data: ett Início med indikatorer och ett diagram, en lista med Contas, en Ficha de Conta som sparar, och en tavla med Oportunidades där korten går att dra.

Före skärmarna finns dock ett kort steg som gör dem möjliga.

#Först tabell-API:erna

En skärm talar inte med databasen. Den talar med datastores — varje skärms databehållare — och datastorena läser och skriver via appens tabell-API:er. Ett tabell-API pekar på en entitet i modellen och genererar, på egen hand, läs- och skrivoperationerna.

Vi skapar tre, en per entitet:

1. Välj panelen Kod i sidofältet.
2. På raden API:er, klicka på + (Nytt API).
3. I Namn, skriv contas. Namnet är grunden för operationerna (getContas, addContas, updateContas, deleteContas) — så sätt inga prefix som get eller lista på det.
4. Klicka på Skapa API. Byggaren öppnas på fliken Bygg.
5. I avsnittet Pipeline, välj blocket Tabell.
6. I fältet Tabell, välj Dados CRM ▸ Contas.
7. I Exponerade åtgärder, låt Select, Insert, Update och Delete vara ikryssade — CRM:et behöver alla fyra.
8. Låt Publik åtkomst (utan session) vara helt avstängd: den här appen är till för dem som har en påbörjad session.
9. I Inkluderade fält, kontrollera att de fält som skärmarna ska använda är ikryssade. För kontona är det alla.
10. Slå på reglaget Publicerat och klicka på Spara.

Upprepa för de andra två:

API	Entitet	Åtgärder	Anteckningar
contas	Contas	Select, Insert, Update, Delete	Alla fält.
contactos	Contactos	Select, Insert, Update, Delete	Inkluderar navigatorn conta (bara fältet nome).
oportunidades	Oportunidades	Select, Insert, Update, Delete	Inkluderar navigatorn conta (bara fältet nome).

Navigatorerna är det som gör att du kan visa kontots namn bredvid en affärsmöjlighet utan att skriva en rad SQL: kryssa i dem i listan över inkluderade fält, så blir fältet conta.nome tillgängligt på skärmarna.

#Skapa de fyra skärmarna

Skärmarna bor i panelen UI, i avsnittet Skärmar.

1. Välj panelen UI i sidofältet.
2. På raden Skärmar, klicka på knappen Ny skärm.
3. Skriv namnet och bekräfta med Skapa. Skärmen öppnas direkt på arbetsytan.

Skapa alla fyra på en gång, i den här ordningen:

Skärmens namn	Rutt	Vad den ska bli
Início	/inicio	Säljpanelen, med indikatorer och diagram.
Contas	/contas	Listan över konton.
Ficha de Conta	/ficha-de-conta	Formuläret för ett konto.
Oportunidades	/oportunidades	Kanban-tavlan.

Rutt härleds från namnet och syns (och redigeras) i inspektorn, när ingen widget är markerad. Låt dem vara som de är — guiden hänvisar till dem längre fram.

#Skärmen Início — säljpanelen

Öppna skärmen Início. Designen har fyra delar: en titel, ett band med indikatorer, ett diagram och en tabell.

#Titeln

1. Dra en Etikett från paletten till canvasens överkant.
2. I kategorin Innehåll i inspektorn, skriv texten Säljpanel.
3. I kategorin Utseende, höj textens Storlek — det är sidans titel.

#Indikatorbandet

Fyra tal sida vid sida gör man med en KPI-widget med fyra indikatorer, inte med fyra widgetar: justering och avstånd blir garanterat rätt.

1. Dra en KPI under titeln och sträck ut den över hela bredden.
2. I kategorin Data börjar avsnittet Indikatorer med en. Använd Lägg till indikator tills du har fyra.
3. Varje indikator har en Etikett, en ikon, en Egen datamängd (dess datastore) och ett värde med Aggregering.

Ställ in dem så här:

Etikett	Datastore (tabell-API)	Filter	Värde
Aktiva konton	contas	—	Antal av id
Öppna affärsmöjligheter	oportunidades	fase ≠ fechada_ganha och fase ≠ fechada_perdida	Antal av id
Värde i pipeline	oportunidades	samma filter	Summa av valor
Stängt detta kvartal	oportunidades	fase = fechada_ganha	Summa av valor

I de två pengaindikatorerna, öppna Format och välj valutan EUR med noll decimaler — 475 850 läses bättre än 475850.

#Diagrammet

1. Dra ett Diagram till vänstra halvan, under KPI:n.
2. I kategorin Data, skapa listdatastoren ovanpå API:et oportunidades.
3. I Diagramtyp, välj Staplar.
4. I Kategorifält (X-axel/sektorer), välj fase.
5. I Värdefält, lägg till valor.
6. I kategorin Utseende, slå på Visa titel och skriv Pipeline per fas.

#Tabellen med kommande avslut

1. Dra en Tabell till högra halvan, bredvid diagrammet.
2. I kategorin Data, skapa listdatastoren ovanpå oportunidades, med filtret för de öppna faserna (samma som i indikatorerna), sorterad på data_fecho stigande och Per sida satt till 8.
3. I kategorin Data, avsnittet Kolumner, definiera fyra kolumner:

Fält	Rubrik
titulo	Affärsmöjlighet
conta.nome	Konto
valor	Värde (€)
data_fecho	Avslut

4. Slå på Visa titel och skriv Kommande avslut.

#Skärmen Contas — listan

Öppna skärmen Contas. Det är tre widgetar.

1. En Etikett högst upp, med texten Konton.
2. En Knapp i övre högra hörnet: i kategorin Innehåll, texten Nytt konto och ikonen plus.
3. En Tabell som upptar resten av skärmen. I kategorin Data, skapa listdatastoren ovanpå API:et contas, sorterad på nome stigande, och definiera kolumnerna:

Fält	Rubrik
nome	Namn
sector	Bransch
cidade	Stad
telefone	Telefon
email	E-post
estado	Status

Nu återstår att koppla de två gester som gör den här listan användbar till något. Båda skrivs i kategorin Händelser, i TypeScript:

På Knapp, i händelsen onClick — öppna en tom detaljvy, för att skapa:

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

På Tabell, i händelsen onRowClick — öppna detaljvyn för den klickade raden:

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

#Skärmen Ficha de Conta — formuläret

Det här är skärmen med flest delar, och den som bäst visar hur data fungerar. Öppna skärmen Ficha de Conta.

#Ruttparametern

1. Klicka på en tom yta på canvasen — inspektorn börjar visa skärmen.
2. I avsnittet Ruttparametrar, klicka på + lägg till parameter och skriv id.
3. Låt Obligatorisk vara avstängd. Det är avsiktligt: utan id öppnas skärmen tom, och det är så samma formulär också duger till att skapa ett nytt konto.

Rutt blir nu /ficha-de-conta/:id.

#Skärmens två datastores

Fortfarande med skärmen markerad, i kategorin Data:

1. Klicka på + post. Klicka på den skapade datastoren för att öppna dialogrutan Konfigurera datastore.
2. I Datastorens namn, skriv conta.
3. I Tabell-API, välj contas.
4. I Vilken post som ska laddas (nyckel), klicka på + nyckelfält och sätt ihop villkoret: fältet id, operatorn eq, värdet Param ▸ id.
5. Låt Ladda automatiskt vara påslaget och stäng med Klart.

Nu den andra, för kontots kontakter:

1. Klicka på + lista och öppna den.
2. Namn contactosConta, Tabell-API contactos.
3. I Filter (where), lägg till: fältet conta_id, operatorn eq, värdet Param ▸ id.
4. Sortera på nome stigande.

#Formuläret

1. Dra en Panel till canvasens vänstra sida. I kategorin Utseende, slå på Visa titel och skriv Företagsuppgifter.
2. Dra Textrutorna in i panelen — att släppa en widget inne i en panel gör den till dess barn. För var och en, skriv etiketten i kategorin Innehåll och välj, i kategorin Data, avsnittet Databindning, datastoren conta och fältet:

Etikett	Fält	Obligatoriskt
Namn	nome	ja
Org.nr	nif	nej
Bransch	sector	nej
Stad	cidade	nej
Telefon	telefone	nej
E-post	email	nej

3. För status, använd en Lista i stället för en textruta: etiketten Status, kopplad till conta ▸ estado, Obligatoriskt påslaget, och statiska alternativ:

Värde	Etikett
ativo	Aktiv
prospeto	Prospekt
inativo	Inaktiv

4. Dra en Tabell till höger om panelen, kopplad till datastoren contactosConta, med kolumnerna nome (Namn), cargo (Befattning) och telefone (Telefon), och titeln Kontakter för det här kontot.

#Spara och gå tillbaka

Två Knappar under panelen, med var sin händelse onClick:

Spara (ikonen save):

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

Tillbaka (ikonen arrow-left):

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

save() validerar först — obligatoriska fält och regler — och sparar bara om allt går igenom; den returnerar true när den har sparat. Det är därför meddelandet och navigeringen ligger inuti if-satsen.

#Skärmen Oportunidades — kanban-tavlan

Öppna skärmen Oportunidades.

1. En Etikett högst upp, med texten Affärsmöjligheter.
2. Dra en Kanban under den, över hela bredden.
3. I kategorin Data, skapa listdatastoren ovanpå API:et oportunidades (utan filter — tavlan visar allt), med Per sida satt till 50.
4. I Statusfält (kolumn), välj fase. Det är det fältet som säger i vilken kolumn varje kort bor — och det är det som skrivs när någon drar ett kort.
5. I Kolumnernas källa, välj Statisk och använd + lägg till kolumn sex gånger:

Värde	Etikett	Färg
prospecao	Prospektering	grå
qualificacao	Kvalificering	blå
proposta	Offert	bärnsten
negociacao	Förhandling	lila
fechada_ganha	Vunnen	grön
fechada_perdida	Förlorad	röd

6. Slå på Tillåt att kort dras och Antal kort; låt Kolumn för utan kategori vara avstängd.
7. I Kortmall, säg vad varje kort ska visa:

Fält	Roll
titulo	Titel
conta.nome	Undertext
valor	Värde

8. Under tavlan, lägg till en Tabell med titeln Alla affärsmöjligheter, kopplad till en listdatastore ovanpå oportunidades, med kolumnerna titulo, conta.nome, valor, fase, data_fecho och responsavel.

#Se resultatet

Det finns ingen sparaknapp på skärmarna: ändringarna sparas av sig själva, och det övre högra hörnet säger hur det står till (Sparar…, Sparat).

För att se skärmen på riktigt, klicka på Förhandsgranska: plattformen sparar det som ligger och väntar och öppnar skärmen i den riktiga appen, i en ny webbläsarflik. Du går genom inloggningen som vilken användare som helst — kontona som loggar in i appen skapas i etappen Publicera och använda, och fram till dess kan du använda det som redan finns.

#Varför inte…?

• Varför syns inte mitt API i listan över datastores? API:et är ett utkast. Öppna det och slå på Publicerat.
• Varför öppnas alltid en tom detaljvy? Post-datastoren har inga villkor i Vilken post som ska laddas (nyckel), eller så kommer parametern id inte fram i rutten. Kontrollera att rutten är /ficha-de-conta/:id.
• Varför ser jag inte kolumnen conta.nome? Navigatorn ingår inte i tabell-API:ets Inkluderade fält — eller så konfigurerades datastoren innan du kryssade i den. Öppna Konfigurera datastore igen och välj API:et på nytt för att uppdatera bilden av fälten.
• Varför går det inte att dra i kanban? Primärnyckeln saknas i datastoren, eller åtgärden Update i tabell-API:et.
• Varför är diagrammet tomt? Kategorifält eller Värdefält är inte valda — eller så släpper datastorens filter inte igenom någon rad.

Skärmarna finns, men det går ännu inte att hoppa mellan dem. Nästa etapp: navigering och tema.