Skjermene

Dette er den lengste etappen i veiledningen, og den som gir appen et ansikt. Til slutt har du fire skjermer tegnet og i drift på de ekte dataene fra modellen: en Início med indikatorer og et diagram, en liste over Contas, en Ficha de Conta som lagrer, og en tavle med Oportunidades med kort du kan dra.

Før skjermene er det likevel et kort steg som gjør dem mulige.

#Først tabell-API-ene

En skjerm snakker ikke med databasen. Den snakker med datastores — databeholderne på hver skjerm — og datastorene leser og skriver gjennom tabell-API-ene i appen. Et tabell-API peker på en entitet i modellen og genererer, helt av seg selv, operasjonene for lesing og skriving.

Vi lager tre, én per entitet:

1. Velg panelet Kode i sidefeltet.
2. På linjen API-er, klikk på + (Ny API).
3. I Navn, skriv contas. Navnet er grunnlaget for operasjonene (getContas, addContas, updateContas, deleteContas) — derfor skal du ikke sette prefikser som get eller listar foran.
4. Klikk på Opprett API. Byggeren åpnes på fanen Bygg.
5. I seksjonen Pipeline, velg blokken Tabell.
6. I feltet Tabell, velg Dados CRM ▸ Contas.
7. Under Eksponerte handlinger, la Select, Insert, Update og Delete stå avkrysset — CRM-et trenger alle fire.
8. La Offentlig tilgang (uten økt) stå helt avslått: denne appen er for folk med en innlogget økt.
9. Under Inkluderte felt, bekreft at feltene skjermene skal bruke, er krysset av. For kontoene er det alle.
10. Slå på bryteren Publisert og klikk på Lagre.

Gjenta for de to andre:

API	Entitet	Handlinger	Merknader
contas	Contas	Select, Insert, Update, Delete	Alle felt.
contactos	Contactos	Select, Insert, Update, Delete	Inkluderer navigatoren conta (bare feltet nome).
oportunidades	Oportunidades	Select, Insert, Update, Delete	Inkluderer navigatoren conta (bare feltet nome).

Navigatorene er det som gjør det mulig å vise navnet på kontoen ved siden av en salgsmulighet uten å skrive en eneste linje SQL: kryss dem av i listen over inkluderte felt, og feltet conta.nome blir tilgjengelig på skjermene.

#Lage de fire skjermene

Skjermene bor i panelet UI, i seksjonen Skjermer.

1. Velg panelet UI i sidefeltet.
2. På linjen Skjermer, klikk på knappen Ny skjerm.
3. Skriv navnet og bekreft med Opprett. Skjermen åpnes med én gang i arbeidsområdet.

Lag alle fire på én gang, i denne rekkefølgen:

Navn på skjermen	Rute	Hva den skal bli
Início	/inicio	Salgspanelet, med indikatorer og diagram.
Contas	/contas	Listen over kontoer.
Ficha de Conta	/ficha-de-conta	Skjemaet for én konto.
Oportunidades	/oportunidades	Kanban-tavlen.

Ruten utledes fra navnet, og den ser du (og redigerer) i inspektøren når ingen widget er valgt. La dem stå som de er — veiledningen viser til dem lenger ned.

#Skjermen Início — salgspanelet

Åpne skjermen Início. Designet har fire deler: en tittel, en stripe med indikatorer, et diagram og en tabell.

#Tittelen

1. Dra en Etikett fra paletten til toppen av canvaset.
2. I kategorien Innhold i inspektøren, skriv teksten Painel comercial.
3. I kategorien Utseende, øk Størrelse på teksten — det er tittelen på siden.

#Stripen med indikatorer

Fire tall side om side lages med én KPI-widget med fire indikatorer, ikke med fire widgets: justering og avstander blir riktige av seg selv.

1. Dra en KPI inn under tittelen og strekk den over hele bredden.
2. I kategorien Data starter seksjonen Indikatorer med én. Bruk Legg til indikator til du har fire.
3. Hver indikator har en Etikett, et ikon, et Eget datasett (datastoren til den) og en verdi med Aggregering.

Sett dem opp slik:

Etikett	Datastore (tabell-API)	Filter	Verdi
Contas ativas	contas	—	Antall av id
Oportunidades abertas	oportunidades	fase ≠ fechada_ganha og fase ≠ fechada_perdida	Antall av id
Valor em pipeline	oportunidades	samme filter	Sum av valor
Fechado este trimestre	oportunidades	fase = fechada_ganha	Sum av valor

På de to pengeindikatorene, åpne Format og velg valutaen EUR med null desimaler — 475 850 leses bedre enn 475850.

#Diagrammet

1. Dra et Diagram til venstre halvdel, under KPI-en.
2. I kategorien Data, lag listedatastoren på API-et oportunidades.
3. I Diagramtype, velg Søyler.
4. I Kategorifelt (X-akse / sektorer), velg fase.
5. I Verdifelt, legg til valor.
6. I kategorien Utseende, slå på Vis tittel og skriv Pipeline por fase.

#Tabellen over nærmeste avslutninger

1. Dra en Tabell til høyre halvdel, ved siden av diagrammet.
2. I kategorien Data, lag listedatastoren på oportunidades, med filteret for de åpne fasene (det samme som på indikatorene), sortert på data_fecho stigende og Per side satt til 8.
3. I kategorien Data, seksjonen Kolonner, definer fire kolonner:

Felt	Overskrift
titulo	Oportunidade
conta.nome	Conta
valor	Valor (€)
data_fecho	Fecho

4. Slå på Vis tittel og skriv Próximos fechos.

#Skjermen Contas — listen

Åpne skjermen Contas. Det er tre widgets.

1. En Etikett på toppen, med teksten Contas.
2. En Knapp i øvre høyre hjørne: i kategorien Innhold, teksten Nova conta og ikonet plus.
3. En Tabell som fyller resten av skjermen. I kategorien Data, lag listedatastoren på API-et contas, sortert på nome stigende, og definer kolonnene:

Felt	Overskrift
nome	Nome
sector	Sector
cidade	Cidade
telefone	Telefone
email	Email
estado	Estado

Nå gjenstår det å koble på de to bevegelsene som gjør denne listen til noe brukbart. Begge skrives i kategorien Hendelser, i TypeScript:

På Knappen, i hendelsen onClick — åpne et blankt kort, for å opprette:

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

På Tabellen, i hendelsen onRowClick — åpne kortet til raden som ble klikket:

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

#Skjermen Ficha de Conta — skjemaet

Dette er skjermen med flest deler, og den som best viser hvordan dataene virker. Åpne skjermen Ficha de Conta.

#Ruteparameteren

1. Klikk på et tomt område på canvaset — inspektøren viser nå selve skjermen.
2. I seksjonen Ruteparametere, klikk på + legg til parameter og skriv id.
3. La Påkrevd stå av. Det er med vilje: uten id åpner skjermen blank, og det er slik det samme skjemaet også brukes til å opprette en ny konto.

Ruten blir nå /ficha-de-conta/:id.

#De to datastorene på skjermen

Fortsatt med skjermen valgt, i kategorien Data:

1. Klikk på + post. Klikk på datastoren som ble laget, for å åpne modalen Konfigurer datastore.
2. I Navn på datastoren, skriv conta.
3. I Tabell-API, velg contas.
4. I Hvilken post som skal lastes (nøkkel), klikk på + nøkkelfelt og sett sammen betingelsen: feltet id, operatoren eq, verdien Param ▸ id.
5. La Last inn automatisk stå på og lukk med Ferdig.

Så den andre, for kontaktene til kontoen:

1. Klikk på + liste og åpne den.
2. Navn contactosConta, Tabell-API contactos.
3. I Filtre (where), legg til: feltet conta_id, operatoren eq, verdien Param ▸ id.
4. Sorter på nome stigende.

#Skjemaet

1. Dra et Panel til venstre på canvaset. I kategorien Utseende, slå på Vis tittel og skriv Dados da empresa.
2. Dra Tekstfeltene inn i panelet — slipper du en widget inne i et panel, blir den barn av det. For hver av dem, skriv etiketten i kategorien Innhold, og velg datastoren conta og feltet i kategorien Data, seksjonen Databinding:

Etikett	Felt	Påkrevd
Nome	nome	ja
NIF	nif	nei
Sector	sector	nei
Cidade	cidade	nei
Telefone	telefone	nei
Email	email	nei

3. Til statusen bruker du en Nedtrekksliste i stedet for et tekstfelt: etiketten Estado, koblet til conta ▸ estado, Påkrevd slått på, og faste alternativer:

Verdi	Etikett
ativo	Ativo
prospeto	Prospeto
inativo	Inativo

4. Dra en Tabell til høyre for panelet, koblet til datastoren contactosConta, med kolonnene nome (Nome), cargo (Cargo) og telefone (Telefone), og tittelen Contactos desta conta.

#Lagre og gå tilbake

To Knapper under panelet, hver med sin onClick-hendelse:

Guardar (ikonet save):

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

Voltar (ikonet arrow-left):

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

save() validerer først — påkrevde felt og regler — og lagrer bare hvis alt går gjennom; den gir true når den har lagret. Det er derfor meldingen og navigasjonen ligger inne i if-en.

#Skjermen Oportunidades — kanban-tavlen

Åpne skjermen Oportunidades.

1. En Etikett på toppen, med teksten Oportunidades.
2. Dra en Kanban inn under den, over hele bredden.
3. I kategorien Data, lag listedatastoren på API-et oportunidades (uten filter — tavlen viser alt), med Per side satt til 50.
4. I Statusfelt (kolonne), velg fase. Det er dette feltet som sier hvilken kolonne hvert kort bor i — og det er det som blir skrevet når noen drar et kort.
5. I Kilde for kolonnene, velg Statisk og bruk + legg til kolonne seks ganger:

Verdi	Etikett	Farge
prospecao	Prospeção	grå
qualificacao	Qualificação	blå
proposta	Proposta	ravgul
negociacao	Negociação	lilla
fechada_ganha	Ganha	grønn
fechada_perdida	Perdida	rød

6. Slå på Tillat å dra kort og Antall kort; la Kolonne for uten kategori stå av.
7. I Mal for kortet, si hva hvert kort skal vise:

Felt	Rolle
titulo	Tittel
conta.nome	Undertekst
valor	Verdi

8. Under tavlen legger du til en Tabell med tittelen Todas as oportunidades, koblet til en listedatastore på oportunidades, med kolonnene titulo, conta.nome, valor, fase, data_fecho og responsavel.

#Se resultatet

Det finnes ingen lagreknapp på skjermene: endringene lagres av seg selv, og øvre høyre hjørne sier hvor de står (Lagrer…, Lagret).

For å se skjermen på ordentlig, klikk på Forhåndsvis: plattformen lagrer det som står igjen, og åpner skjermen i den ekte appen, i en ny nettleserfane. Du går gjennom innloggingen som en hvilken som helst bruker — kontoene som logger inn i appen, lages i etappen Publisere og bruke, og inntil da kan du bruke den som allerede finnes.

#Hvorfor ikke …?

• Hvorfor dukker ikke API-et mitt opp i listen over datastores? API-et er et utkast. Åpne det og slå på Publisert.
• Hvorfor åpner det seg alltid et tomt kort? Postdatastoren har ingen betingelser i Hvilken post som skal lastes (nøkkel), eller parameteren id kommer ikke fram i ruten. Sjekk at ruten er /ficha-de-conta/:id.
• Hvorfor ser jeg ikke kolonnen conta.nome? Navigatoren er ikke med under Inkluderte felt i tabell-API-et — eller datastoren ble satt opp før du krysset den av. Åpne Konfigurer datastore på nytt og velg API-et om igjen for å friske opp portrettet av feltene.
• Hvorfor lar ikke kanban meg dra? Primærnøkkelen mangler i datastoren, eller handlingen Update mangler i tabell-API-et.
• Hvorfor er diagrammet tomt? Kategorifeltet eller Verdifeltene er ikke valgt — eller filteret i datastoren slipper ikke gjennom en eneste rad.

Skjermene finnes, men det er ennå ingen måte å hoppe mellom dem på. Neste etappe: navigasjon og tema.