Navigatie van de app

De schermen zijn de pagina's; de navigatie is wat de mensen ernaartoe brengt. In Keplin leeft zij niet binnen een scherm: zij is een eigen document van de app, getekend in een visuele editor en geserveerd rondom elk scherm dat open staat.

En zij wordt per apparaat getekend: de bovenbalk van de computer, de lade van de telefoon en de actiebalk van de tablet zijn drie onafhankelijke ontwerpen, elk met hun eigen menu's.

#De editor openen

In de zijbalk van de app, op het tabblad UI, heet het eerste item Navigatie. Klik erop en het opent in een tabblad van de werkruimte.

Wat u in het midden ziet is geen formulier: het is de pagina van de app, getekend zoals hij eruit gaat zien. De balk bovenaan, de inhoud van het scherm eronder (Inhoud van het scherm), het merk links. U bewerkt door eraan te werken.

Onder de titel staan de bedieningselementen die bepalen wat u ziet:

Bediening	Wat die doet
Web (1280 px) / Tablet (768 px) / Mobiel (390 px)	Kiest het apparaat dat u aan het tekenen bent.
Modus (alleen tablet en telefoon)	De vorm van de navigatie op dat apparaat.
Beginmenu	Welk van de menu's opent wanneer iemand de app binnenkomt.

#De gebaren

Gebaar	Wat er gebeurt
Klik op een menu	Selecteert het (en toont, in een context, de bijbehorende zijbalk).
Dubbelklik op een menu	Opent het venster Geselecteerd item, waar alles bewerkt wordt.
Slepen van een menu	Verplaatst het naar een andere zone of herschikt het. Het valt alleen waar dat geldig is.
+	Voegt op die plek een menu toe.
× in de hoek van een menu	Verwijdert het.
Klik op het merk	Opent het venster Logo van de app.

#De soorten menu

De knop + van elke zone toont de soorten die die plek aanvaardt:

Soort	Wat het is
Menu	Leidt naar een scherm van de app. Dat is het gewone item.
Submenu	Groepeert andere menu's — in de lade en in de zijbalken.
Context (zijbalk)	Een menu dat, wanneer het gekozen wordt, een eigen zijbalk activeert met zijn kinderen. Het is alsof u de app in gebieden verdeelt.
Scheidingslijn	Een scheidende streep.
Gebruikersmenu	De avatar van wie de app gebruikt, met de bijbehorende ingangen en Afmelden.
Meldingen	De bel, met de automatische telling van ongelezen meldingen.
Taal	De taalkiezer: de talen van de app, elk in de eigen naam.
Widgetgebied	Een balkscherm dat in de balk getekend wordt: een keuzelijst om het bedrijf te kiezen, een samenvatting, een zoekveld.

Niet alle soorten passen op alle plekken, en de editor biedt alleen de geldige aan: een context mag geen andere context bevatten, een submenu neemt alleen items op, het gebruikersmenu neemt alleen items, scheidingslijnen en de taal op, en de lade van de telefoon heeft geen contexten (gebruik submenu's).

#De zones van de balk

Op de bovenbalk ordenen de menu's zich in drie zones, en de tip in de editor zegt het wezenlijke: Sleep de menu's tussen de zones van de balk (links / midden / rechts) om groepen te maken.

Zone	Gebruikelijk gebruik
Groep links	De hoofdnavigatie, direct na het merk.
Groep in het midden	Een uitgelichte groep. Blijft zij leeg, dan neemt zij geen ruimte in.
Groep rechts	Het gebruikersmenu, de bel, snelkoppelingen.

Binnen de zijbalk van een context — en in de lade — zijn er twee zones: Groep bovenaan en Onderaan (deze plakt aan de onderkant, zodat "Instellingen" en "Help" staan waar men ze verwacht).

#Een menu aanmaken

1. Kies het apparaat in de contextbalk.
2. Klik op de + van de zone waar u het wilt.
3. Kies het soort.
4. Het menu ontstaat met een algemene naam en blijft geselecteerd — dubbelklik erop om het venster Geselecteerd item te openen.
5. Vul in:

Veld	Wat het is
Icoon	Een icoon uit de bibliotheek of een SVG uit de assets van de app.
Naam van het menu	De tekst die verschijnt. Het is een zin van de app — hij gaat mee in de vertalingen.
Scherm…	Het doelscherm (alleen bij Menu).
(parameters)	Heeft het doelscherm routeparameters, dan verschijnt er één veld per parameter om er een vaste waarde aan te geven.
Alleen icoon (de naam komt in een tooltip)	Laat alleen het icoon op de balk staan.

6. Sluit af met Voltooid en sla op met Opslaan.

De knop Item verwijderen, in hetzelfde venster, wist het menu.

#Contexten en zijbalken

Een Context (zijbalk) is de manier om een gebied van de app een eigen menu te geven: u kiest "Verkoop" op de bovenbalk en links verschijnt de zijbalk met de verkoopschermen. De kinderen van de context zijn de items van die balk.

In het venster van de context verfijnt de sectie Zijbalk van deze context haar:

Veld	Opties
Gedrag	Vast (altijd open) · Inklapbaar (knop klapt in tot iconen) · Mini (iconen; klapt uit bij zweven) · Mini met paneel (zweven opent de boom van het menu)
Breedte	Tussen 180 en 400 pixels.
Bij het uitklappen (alleen in de mini-modus)	Legt zich over de inhoud of Duwt de inhoud opzij.
Begint ingeklapt (alleen in de inklapbare modus)	Hoe hij de eerste keer opent.

De zijbalk blijft open terwijl u zich in het gebied verplaatst, ook op pagina's die in geen enkel menu staan (een detailpagina die vanuit een lijst is geopend), en ook na herladen. Een scherm uit een andere context wisselt hem, en een item van de bovenbalk zonder context sluit hem. Kies het Bovenliggend scherm in de eigenschappen van het scherm, categorie Navigatie, zodat een detailpagina ook bij een directe link het juiste menu markeert.

#Het gebruikersmenu

Het Gebruikersmenu is een item als de andere: het kan op de bovenbalk staan, binnen een context, in de lade of op de compacte balk. Het selecteren opent zijn pop-up, en daar voegt u met de + ingangen toe (Menu, Scheidingslijn of Taal).

In het venster staan de opties die niet visueel zijn:

Optie	Wat die doet
De naam tonen	De naam van wie de app gebruikt verschijnt in de kop van het menu.
De gebruikersnaam (login) tonen	Ook de gebruikersnaam.
Optie «Afmelden»	Neemt de uitgang op aan het eind van het menu.
Tekst van «Afmelden»	Een eigen tekst; leeg gebruikt Die van het systeem (vertaald).

Zonder icoon toont de avatar de initialen van de naam — en dat is wat de icoonkiezer Geen icoon (initialen) noemt.

#Meldingen

Het item Meldingen is de bel: alleen een icoon, met de pill van de ongelezen meldingen die zichzelf bijwerkt. De klik opent de laatste meldingen en Meer bekijken opent het paneel met alle meldingen. In het venster bepaalt Meldingen in de dropdown hoeveel er per keer verschijnen (tussen 1 en 20).

#Taal

Het item Taal is de taalkiezer. Het toont de talen van de app, ingesteld in de sectie Vertalingen van de instellingen, elk in de eigen naam ("Português", "English"), zodat wie de huidige taal niet begrijpt de eigen taal vindt. Een taal kiezen wisselt de teksten van de app zonder de pagina te herladen, en de keuze wordt op het apparaat opgeslagen.

Het kan op de bovenbalk staan, in een zijbalk, in de lade, op de compacte balk en op de actiebalk. In het Gebruikersmenu verschijnt het als de ingang "Taal · Nederlands", die de lijst ter plekke opent. In het venster bepaalt Huidige taal tonen als wat de knop toont: Naam (Nederlands) of Code (NL).

In een app met één taal verschijnt de kiezer niet.

Bij het eerste bezoek, voordat iemand kiest, opent de app in de taal van de browser of de telefoon als de app die heeft; anders in de basistaal. Een scherm zonder menu's, zoals het aanmeldscherm, kan de keuze aanbieden met een knop die keplin.i18n.setLocale aanroept.

#Widgetgebieden

Een Widgetgebied zet widgets in een balk: een keuzelijst om het bedrijf te kiezen op de bovenbalk, of een samenvatting onderaan de zijbalk van een context. De inhoud van het gebied is een scherm van de app, getekend in de designer zoals elk ander, met de presentatie Balk (widgetgebied).

Zo maak je een widgetgebied:

1. Maak in de sectie Schermen een scherm.
2. Kies in de eigenschappen van het scherm, in de categorie Presentatie, bij Modus de optie Balk (widgetgebied).
3. Stel bij Breedte (px) en Hoogte (px) de grootte van het gebied in. Standaard is het 320 bij 48 pixels.
4. Teken de widgets.
5. Klik in Navigatie op de + van de zone waar je het gebied wilt en kies Widgetgebied.
6. Dubbelklik op het item en kies bij Scherm van het gebied het balkscherm.
7. Klik op Opslaan.

De zone van het item bepaalt waar het gebied verschijnt en hoe groot:

Waar het item staat	Waar het gebied verschijnt
Groep links, Groep in het midden of Groep rechts van de bovenbalk	Op de bovenbalk, met de breedte en hoogte van het scherm.
Groep bovenaan of Onderaan in de zijbalk van een context	In de zijbalk, met de breedte van de balk en de hoogte van het scherm.
Lade	In de lade, met de breedte van de lade en de hoogte van het scherm.
Header	Naast het merk, met de breedte en hoogte van het scherm.

Het gebied komt niet op de actiebalk en niet in het gebruikersmenu. In een zijbalk die tot pictogrammen is ingeklapt, verschijnt het niet.

Het gebied blijft open terwijl je navigeert: de gegevens laden één keer en de gemaakte keuze blijft bewaard bij een andere pagina. In KeplinGo werkt het gebied op dezelfde manier in de header en in de lade.

#Het gebied met de pagina's verbinden

Het gebied en de pagina's communiceren via de state van de app: waarden met een naam, dezelfde op elk scherm. Om bijvoorbeeld een keuzelijst op de bovenbalk de pagina's te laten filteren op het gekozen bedrijf:

1. Kies in de keuzelijst van het gebied bij Gegevenskoppeling de optie State en typ de Sleutel bedrijf.
2. Kies op de pagina's in een filter van de datastore de bron State en typ dezelfde sleutel. De lijst leest de gegevens opnieuw als de keuze verandert.
3. Koppel een Label aan dezelfde sleutel om de waarde te tonen.

De code van de gebeurtenissen leest en schrijft dezelfde waarden met keplin.state.

#Hoogte van de balk

De bovenbalk is standaard 48 pixels hoog. Om een hoger gebied te laten passen, wijzig je Hoogte van de balk, in de besturingselementen onder de titel van de editor, naar een waarde tussen 40 en 96 pixels. Elk apparaat heeft een eigen hoogte, en in de compacte modi geldt die voor de header.

#Waardepills

Elk menu (behalve scheidingslijnen en de bel) mag een pill met een levend getal tonen — de te verwerken bestellingen naast "Bestellingen", de openstaande aanvragen naast "Goedkeuringen".

1. Schakel in het venster van het item Pill met waarde tonen in.
2. Kies de API die de gegevens levert (API kiezen…).
3. Kies bij Waarde de optie Telling (aantal records) of Veld van het 1e record — in dat laatste geval geeft u ook het Veld op.
4. Verbergen bij lege waarde of nul voorkomt dat de pill "0" staat te zeggen.

De pill werkt in real time bij: wanneer de gegevens veranderen, verandert het getal — zonder dat iemand de pagina herlaadt.

#Het logo van de app

Klik op het merk, links op de balk, om het venster Logo van de app te openen:

Veld	Wat het doet
Icoon of afbeelding	Kies een icoon uit de bibliotheek of een bestand uit de assets van de app.
De naam van de app tonen	De naam naast het merk.
Uitsnede in de balk	Voor afbeeldingen uit de assets (SVG, PNG, JPG, GIF of WebP): Schaal, Breedte van het kader, Hoogte van het kader en de plaatsing door de afbeelding te slepen.
Aan het kader aanpassen	Zet schaal en positie terug.
Geen uitsnede	Schakelt de uitsnede uit.

De uitsnede is het antwoord op het logo dat "niet past": je sleept en schaalt tot het goed op de balk staat, en het venster zelf garandeert dat het bestand intact blijft — de uitsnede is alleen visueel en omkeerbaar. Het kader is standaard 32 pixels hoog, in een balk van 48: een horizontaal logo groeit alleen als je de Hoogte van het kader verhoogt (tot 44); de Breedte van het kader alleen laat lege ruimte rond een klein logo. Zonder uitsnede staat de afbeelding in een kader van 24 pixels.

De voorvertoningsstrook van het venster gebruikt de echte kleuren van de balk van de app. Is de balk donker, dan moet het logobestand de lichte (witte) versie van het merk zijn — het kleurenlogo voor een witte achtergrond verdwijnt op de balk.

De logozone kan een andere achtergrondkleur hebben dan de rest van de bovenbalk: dat is de kleur Achtergrond van de logozone, in de groep Navigatie van het Thema in de app-instellingen. Tussen de logozone en de menu's is er geen scheiding; verschillen de twee kleuren, dan is de kleurwissel de grens. Dit geldt voor de bovenbalk op web en tablet; in de compacte balk en in de lade volgt het logo de kleur van de balk.

De logozone is nooit smaller dan het merk: met een mini- of ingeklapte zijbalk beginnen de bovenmenu's na het merk, niet eroverheen.

Het browsertabblad toont "Schermnaam · App-naam", en alleen "App-naam" op een scherm zonder naam; op de aanmeldpagina toont het "Aanmelden · App-naam".

#Beginmenu

Beginmenu, in de rechterbovenhoek, bepaalt waar de app opent. U kiest een van de menu's (niet een los scherm), en de keuze geldt per apparaat — de telefoon mag in een ander paneel openen dan de computer.

Heeft een apparaat geen eigen keuze, dan neemt het die van het volgende over (telefoon → tablet → web); en is er helemaal geen, dan opent de app op het eerste menu dat naar een scherm leidt.

#Eén ontwerp per apparaat

Web is altijd een bovenbalk. De tablet en de telefoon hebben een keuze Modus:

Modus	Hoe het eruitziet
Bovenbalk (alleen tablet)	Zoals op de computer: merk, menu's en contexten op één balk.
Hamburgermenu	Een compacte balk met de knop ☰, die de lade met de menuboom opent.
Actiebalk	Een balk onderaan, in de stijl van een mobiele applicatie, met maximaal 5 ingangen — en zonder lade.

In de compacte modi zijn er nog twee eigen rijen:

• De Header — tot 4 acties naast het merk (het gebruikersmenu en de bel staan hier goed).
• De Actiebalk — tot 5 ingangen onderaan, elk een Knop of een Actiemenu.

Wanneer de grens bereikt is, zegt het platform waarom: De actiebalk heeft al 5 items (maximum). / De header neemt hoogstens 4 acties.

#Wie wat ziet

De editor tekent; wie beslist wie welk menu ziet is Instellingen van de app ▸ Rechten, op het tabblad Menu's — per rol en per apparaat.

De regel is het waard om te kennen: anders dan de schermen is een menu standaard zichtbaar. De deur is het scherm, en die is al dicht; het menu verbergen dient om een hele groep uit het zicht te halen, of om de bel weg te nemen bij wie niets ontvangt. Een groep verbergen neemt de kinderen mee, en een item dat naar een ontoegankelijk scherm wijst, verdwijnt vanzelf.

#Waarom niet…?

• Waarom zijn mijn wijzigingen verdwenen? Zij zijn niet opgeslagen. De navigatie heeft een knop Opslaan — en waarschuwt voordat u een tabblad met niet-opgeslagen wijzigingen sluit.
• Waarom lukt het niet het menu neer te zetten waar ik wil? Die plek aanvaardt dat soort niet. De ongeldige doelen lichten niet eens op: een context binnen een context, een submenu binnen een gebruikersmenu, een scheidingslijn op de bovenbalk.
• Waarom zie ik de menu's niet op de telefoon? De telefoon heeft een eigen boom en die kan leeg zijn. Kies Mobiel (390 px) en teken hem.
• Waarom is een menu in de gepubliceerde app verdwenen? Ofwel is het verborgen bij Instellingen ▸ Rechten ▸ Menu's voor die rol, ofwel wijst het naar een scherm waartoe die persoon geen toegang heeft.
• Waarom verschijnt het logo afgesneden? Het heeft een uitsnede. Open het venster en gebruik Aan het kader aanpassen, of Geen uitsnede.
• Waarom lukt het niet het soort van een menu te wijzigen? Dat wijzigt niet. Verwijder het en maak het met het juiste soort aan — het is de enige bewerking die het platform u niet halverwege laat doen.
• Waarom toont de pill altijd 0? Schakel Verbergen bij lege waarde of nul in, of controleer of de gekozen API werkelijk records teruggeeft.
• Waarom lijkt het logo klein, met ruimte eromheen? Het kader is standaard 32 pixels hoog en een horizontaal logo past erin met weinig breedte. Verhoog de Hoogte van het kader (tot 44) in plaats van de breedte.
• Waarom zie ik het logo niet op de balk? Is de balk donker en het bestand de kleurenversie voor een witte achtergrond, upload dan in Assets de witte versie van het merk en kies die in het venster.
• Waarom verschijnt mijn scherm niet bij Scherm van het gebied? Alleen schermen met de presentatie Balk (widgetgebied) verschijnen. Wijzig de Modus in de categorie Presentatie van de eigenschappen van het scherm.
• Waarom verschijnt het widgetgebied niet in de zijbalk? De balk is tot pictogrammen ingeklapt, en daar past het gebied niet. Klap de balk uit.