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.

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 en scheidingslijnen 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.

#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 of Scheidingslijn).

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).

#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	Alleen voor SVG: Schaal, Breedte 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": u sleept en schaalt tot het goed op de balk staat, en het venster zelf garandeert dat het SVG-bestand intact blijft — de uitsnede is alleen visueel en omkeerbaar. Voor andere formaten legt de notitie uit dat de uitsnede alleen voor SVG beschikbaar is.

#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.