Näytöt

Tämä on oppaan pisin vaihe ja se, joka antaa sovellukselle kasvot. Lopussa sinulla on neljä näyttöä suunniteltuina ja toimimassa mallin oikean datan päällä: Início tunnuslukuineen ja kaavioineen, Contas-lista, Ficha de Conta, joka tallentaa, ja Oportunidades-taulu, jonka kortteja voi vetää.

Ennen näyttöjä on kuitenkin yksi lyhyt askel, joka tekee ne mahdollisiksi.

#Ensin taulu-API:t

Näyttö ei puhu tietokannan kanssa. Se puhuu datastorejen kanssa — kunkin näytön datasäiliöiden — ja datastoret lukevat ja kirjoittavat sovelluksen taulu-API:en kautta. Taulu-API osoittaa mallin entiteettiin ja tuottaa itse luku- ja kirjoitusoperaatiot.

Luodaan kolme, yksi entiteettiä kohden:

1. Valitse sivupalkista paneeli Koodi.
2. Napsauta rivillä API:t painiketta + (Uusi API).
3. Kirjoita kohtaan Nimi teksti contas. Nimi on operaatioiden perusta (getContas, addContas, updateContas, deleteContas) — älä siis lisää siihen etuliitteitä kuten get tai listaa.
4. Napsauta Luo API. Rakennin avautuu välilehdelle Rakenna.
5. Valitse osiossa Pipeline lohko Taulu.
6. Valitse kentässä Taulu kohde Dados CRM ▸ Contas.
7. Jätä kohdassa Julkaistut toiminnot valituiksi Select, Insert, Update ja Delete — CRM tarvitsee kaikki neljä.
8. Jätä Julkinen pääsy (ilman istuntoa) kokonaan pois päältä: tämä sovellus on niille, jotka ovat kirjautuneet.
9. Varmista kohdassa Mukana olevat kentät, että ne kentät ovat valittuina, joita näytöt käyttävät. Asiakkuuksissa ne ovat kaikki.
10. Kytke päälle valitsin Julkaistu ja napsauta Tallenna.

Toista sama kahdelle muulle:

API	Entiteetti	Toiminnot	Huomioita
contas	Contas	Select, Insert, Update, Delete	Kaikki kentät.
contactos	Contactos	Select, Insert, Update, Delete	Sisältää navigaattorin conta (vain kentän nome).
oportunidades	Oportunidades	Select, Insert, Update, Delete	Sisältää navigaattorin conta (vain kentän nome).

Navigaattorit ovat se, mikä sallii asiakkuuden nimen näyttämisen myyntimahdollisuuden vieressä ilman ainuttakaan SQL-riviä: merkitse ne mukana olevien kenttien listalla, ja kenttä conta.nome on käytettävissä näytöillä.

#Neljän näytön luominen

Näytöt asuvat paneelissa UI, osiossa Näytöt.

1. Valitse sivupalkista paneeli UI.
2. Napsauta rivillä Näytöt painiketta Uusi näyttö.
3. Kirjoita nimi ja vahvista painikkeella Luo. Näyttö avautuu heti työtilaan.

Luo kaikki neljä yhdellä kertaa, tässä järjestyksessä:

Näytön nimi	Reitti	Mitä siitä tulee
Início	/inicio	Myyntipaneeli tunnuslukuineen ja kaavioineen.
Contas	/contas	Asiakkuuslista.
Ficha de Conta	/ficha-de-conta	Asiakkuuden lomake.
Oportunidades	/oportunidades	Kanban-taulu.

Reitti johdetaan nimestä ja se näkyy (ja sitä muokataan) inspectorissa, kun mitään widgetiä ei ole valittu. Jätä reitit sellaisinaan — opas viittaa niihin myöhemmin.

#Näyttö Início — myyntipaneeli

Avaa näyttö Início. Ulkoasussa on neljä palaa: otsikko, tunnuslukujen kaista, kaavio ja taulukko.

#Otsikko

1. Vedä paletista Nimike canvasin ylälaitaan.
2. Kirjoita inspectorin kategoriassa Sisältö teksti Myyntipaneeli.
3. Kasvata kategoriassa Ulkoasu tekstin Koko — kyseessä on sivun otsikko.

#Tunnuslukujen kaista

Neljä lukua vierekkäin tehdään yhdellä KPI-widgetillä, jossa on neljä tunnuslukua — ei neljällä widgetillä: näin tasaus ja välistys ovat varmasti kohdallaan.

1. Vedä KPI otsikon alle ja venytä se koko leveydelle.
2. Kategoriassa Data osio Tunnusluvut alkaa yhdellä. Käytä Lisää tunnusluku, kunnes niitä on neljä.
3. Jokaisella tunnusluvulla on Nimike, kuvake, Oma tietojoukko (sen datastore) ja arvo, jolla on Aggregointi.

Määritä ne näin:

Nimike	Datastore (taulu-API)	Suodatin	Arvo
Aktiiviset asiakkuudet	contas	—	id-kentän Lukumäärä
Avoimet myyntimahdollisuudet	oportunidades	fase ≠ fechada_ganha ja fase ≠ fechada_perdida	id-kentän Lukumäärä
Arvo pipelinessä	oportunidades	sama suodatin	valor-kentän Summa
Suljettu tällä neljänneksellä	oportunidades	fase = fechada_ganha	valor-kentän Summa

Avaa kahden rahamäärän kohdalla Muoto ja valitse valuutta EUR ilman desimaaleja — 475 850 luetaan paremmin kuin 475850.

#Kaavio

1. Vedä Kaavio vasemmalle puolikkaalle, KPI:n alle.
2. Luo kategoriassa Data listadatastore API:n oportunidades päälle.
3. Valitse kohdassa Kaavion tyyppi vaihtoehto Palkit.
4. Valitse kohdassa Luokkakenttä (X-akseli / lohkot) kenttä fase.
5. Lisää kohtaan Arvokentät kenttä valor.
6. Kytke kategoriassa Ulkoasu päälle Näytä otsikko ja kirjoita Pipeline vaiheittain.

#Seuraavien päätösten taulukko

1. Vedä Taulukko oikealle puolikkaalle, kaavion viereen.
2. Luo kategoriassa Data listadatastore oportunidades-API:n päälle, avoimien vaiheiden suodattimella (sama kuin tunnusluvuissa), järjestettynä data_fecho-kentän mukaan nousevasti ja Sivua kohden arvolla 8.
3. Määritä kategoriassa Data, osiossa Sarakkeet, neljä saraketta:

Kenttä	Otsikko
titulo	Myyntimahdollisuus
conta.nome	Asiakkuus
valor	Arvo (€)
data_fecho	Päätös

4. Kytke päälle Näytä otsikko ja kirjoita Seuraavat päätökset.

#Näyttö Contas — lista

Avaa näyttö Contas. Kolme widgetiä.

1. Nimike ylälaidassa, tekstillä Asiakkuudet.
2. Painike oikeassa ylänurkassa: kategoriassa Sisältö teksti Uusi asiakkuus ja kuvake plus.
3. Taulukko, joka täyttää loput näytöstä. Luo kategoriassa Data listadatastore API:n contas päälle, järjestettynä nome-kentän mukaan nousevasti, ja määritä sarakkeet:

Kenttä	Otsikko
nome	Nimi
sector	Toimiala
cidade	Kaupunki
telefone	Puhelin
email	Sähköposti
estado	Tila

Puuttuu vielä kaksi elettä, jotka tekevät tästä listasta hyödyllisen. Molemmat kirjoitetaan kategoriassa Tapahtumat, TypeScriptillä:

Painikkeeseen, tapahtumaan onClick — avaa tyhjät tiedot, luomista varten:

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

Taulukkoon, tapahtumaan onRowClick — avaa napsautetun rivin tiedot:

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

#Näyttö Ficha de Conta — lomake

Tämä on näyttö, jossa on eniten palasia, ja se joka näyttää parhaiten, miten data toimii. Avaa näyttö Ficha de Conta.

#Reitin parametri

1. Napsauta canvasin tyhjää aluetta — inspector näyttää nyt näytön.
2. Napsauta osiossa Reitin parametrit kohtaa + lisää parametri ja kirjoita id.
3. Jätä Pakollinen pois päältä. Se on tarkoituksellista: ilman id:tä näyttö avautuu tyhjänä, ja juuri niin sama lomake kelpaa uuden asiakkuuden luomiseen.

Reitiksi tulee /ficha-de-conta/:id.

#Näytön kaksi datastorea

Kun näyttö on edelleen valittuna, kategoriassa Data:

1. Napsauta + tietue. Napsauta luotua datastorea avataksesi modaalin Määritä datastore.
2. Kirjoita kohtaan Datastoren nimi teksti conta.
3. Valitse kohdassa Taulu-API vaihtoehto contas.
4. Napsauta kohdassa Mikä tietue ladataan (avain) kohtaa + avainkenttä ja kokoa ehto: kenttä id, operaattori eq, arvo Param ▸ id.
5. Jätä Lataa automaattisesti päälle ja sulje painikkeella Valmis.

Nyt toinen, asiakkuuden yhteyshenkilöille:

1. Napsauta + lista ja avaa se.
2. Nimi contactosConta, Taulu-API contactos.
3. Lisää kohtaan Suodattimet (where): kenttä conta_id, operaattori eq, arvo Param ▸ id.
4. Järjestä nome-kentän mukaan nousevasti.

#Lomake

1. Vedä Paneeli canvasin vasempaan reunaan. Kytke kategoriassa Ulkoasu päälle Näytä otsikko ja kirjoita Yrityksen tiedot.
2. Vedä Tekstikentät paneelin sisään — widgetin pudottaminen paneelin sisään tekee siitä paneelin lapsen. Kirjoita jokaiselle kategoriassa Sisältö nimike ja valitse kategoriassa Data, osiossa Datasidonta, datastore conta ja kenttä:

Nimike	Kenttä	Pakollinen
Nimi	nome	kyllä
Y-tunnus	nif	ei
Toimiala	sector	ei
Kaupunki	cidade	ei
Puhelin	telefone	ei
Sähköposti	email	ei

3. Käytä tilalle Pudotusvalikkoa tekstikentän sijaan: nimike Tila, sidottuna conta ▸ estado, Pakollinen päällä, ja kiinteät vaihtoehdot:

Arvo	Nimike
ativo	Aktiivinen
prospeto	Prospekti
inativo	Ei aktiivinen

4. Vedä Taulukko paneelin oikealle puolelle, sidottuna datastoreen contactosConta, sarakkeilla nome (Nimi), cargo (Tehtävä) ja telefone (Puhelin) ja otsikolla Tämän asiakkuuden yhteyshenkilöt.

#Tallennus ja takaisin

Kaksi Painiketta paneelin alle, kummallakin oma tapahtuma onClick:

Tallenna (kuvake save):

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

Takaisin (kuvake arrow-left):

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

save() validoi ensin — pakolliset kentät ja säännöt — ja tallentaa vain jos kaikki menee läpi; se palauttaa true, kun tallennus onnistui. Siksi ilmoitus ja siirtymä ovat if-lauseen sisällä.

#Näyttö Oportunidades — kanban-taulu

Avaa näyttö Oportunidades.

1. Nimike ylälaidassa, tekstillä Myyntimahdollisuudet.
2. Vedä Kanban sen alle, koko leveydelle.
3. Luo kategoriassa Data listadatastore API:n oportunidades päälle (ilman suodatinta — taulu näyttää kaiken), Sivua kohden arvolla 50.
4. Valitse kohdassa Tilakenttä (sarake) kenttä fase. Juuri tämä kenttä kertoo, missä sarakkeessa kukin kortti asuu — ja se on se, mihin kirjoitetaan, kun joku vetää korttia.
5. Valitse kohdassa Sarakkeiden lähde vaihtoehto Kiinteä ja käytä + lisää sarake kuusi kertaa:

Arvo	Nimike	Väri
prospecao	Prospektointi	harmaa
qualificacao	Kvalifiointi	sininen
proposta	Tarjous	keltainen
negociacao	Neuvottelu	violetti
fechada_ganha	Voitettu	vihreä
fechada_perdida	Menetetty	punainen

6. Kytke päälle Salli korttien vetäminen ja Korttien lukumäärä; jätä Sarake luokittelemattomille pois päältä.
7. Kerro kohdassa Kortin pohja, mitä kukin kortti näyttää:

Kenttä	Rooli
titulo	Otsikko
conta.nome	Kuvateksti
valor	Arvo

8. Lisää taulun alle Taulukko, jonka otsikko on Kaikki myyntimahdollisuudet, sidottuna listadatastoreen oportunidades-API:n päälle, sarakkeilla titulo, conta.nome, valor, fase, data_fecho ja responsavel.

#Tuloksen katsominen

Näytöillä ei ole tallennuspainiketta: muutokset tallentuvat itsestään, ja oikea ylänurkka kertoo, missä mennään (Tallennetaan…, Tallennettu).

Nähdäksesi näytön oikeasti napsauta Esikatsele: alusta tallentaa sen mikä on kesken ja avaa näytön oikeassa sovelluksessa uuteen selaimen välilehteen. Käyt läpi kirjautumisen kuten kuka tahansa käyttäjä — sovellukseen kirjautuvat tilit luodaan vaiheessa Julkaisu ja käyttö, ja siihen asti voit käyttää sitä, joka jo on olemassa.

#Miksi ei…?

• Miksi API:ni ei näy datastorejen listalla? API on luonnostilassa. Avaa se ja kytke päälle Julkaistu.
• Miksi aukeaa aina tyhjät tiedot? Tietuedatastorella ei ole ehtoja kohdassa Mikä tietue ladataan (avain), tai parametri id ei tule perille reitissä. Varmista, että reitti on /ficha-de-conta/:id.
• Miksi en näe saraketta conta.nome? Navigaattori ei ole mukana taulu-API:n kohdassa Mukana olevat kentät — tai datastore määritettiin ennen kuin merkitsit sen. Avaa Määritä datastore uudelleen ja valitse API taas, niin kenttien kuva päivittyy.
• Miksi kanban ei anna vetää? Datastoresta puuttuu pääavain tai taulu-API:sta toiminto Update.
• Miksi kaavio on tyhjä? Luokkakenttä tai Arvokentät ovat valitsematta — tai datastoren suodatin ei päästä läpi ainuttakaan riviä.

Näytöt ovat olemassa, mutta niiden välillä ei vielä pääse hyppäämään. Seuraava vaihe: navigointi ja teema.